diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000000..cc2d660341 Binary files /dev/null and b/assets/logo.png differ diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx new file mode 100644 index 0000000000..d31ef33cb8 --- /dev/null +++ b/src/components/StarterPack/QrCodeDialog.tsx @@ -0,0 +1,99 @@ +import React from 'react' +import {View} from 'react-native' +import QRCode from 'react-native-qrcode-styled' +import * as FS from 'expo-file-system' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {nanoid} from 'nanoid/non-secure' + +import {saveImageToMediaLibrary} from 'lib/media/manip' +import * as Toast from '#/view/com/util/Toast' +import {useTheme} from '#/alf' +import {atoms as a} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import {DialogControlProps} from '#/components/Dialog' +import {Text} from '#/components/Typography' + +export function QrCodeDialog({ + control, + url, +}: { + control: DialogControlProps + url: string +}) { + const {_} = useLingui() + const t = useTheme() + + // No types for this + // See https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/example/src/examples/DownloadQR.tsx for usage + const qrCodeRef = React.useRef() + + const onSavePress = () => { + qrCodeRef.current?.toDataURL(async (base64Code: string) => { + const filename = `${FS.cacheDirectory}/${nanoid(12)}.png` + await FS.writeAsStringAsync(filename, base64Code, { + encoding: FS.EncodingType.Base64, + }) + + await saveImageToMediaLibrary({uri: filename}) + Toast.show(_(msg`QR code saved to your camera roll!`)) + }) + } + + return ( + + + + + + Share this starter pack with friends! + + + + + + + + + ) +} diff --git a/src/screens/StarterPack/Main/index.tsx b/src/screens/StarterPack/Main/index.tsx index d4bf8b8274..43d18b6919 100644 --- a/src/screens/StarterPack/Main/index.tsx +++ b/src/screens/StarterPack/Main/index.tsx @@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react' import {NativeStackScreenProps} from '@react-navigation/native-stack' import {CommonNavigatorParams} from 'lib/routes/types' +import {shareUrl} from 'lib/sharing' import {isWeb} from 'platform/detection' import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' @@ -14,9 +15,11 @@ import {FeedsList} from '#/screens/StarterPack/Main/FeedsList' import {ProfilesList} from '#/screens/StarterPack/Main/ProfilesList' import {atoms as a} from '#/alf' import {Button, ButtonText} from '#/components/Button' +import {useDialogControl} from '#/components/Dialog' import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox' import {QrCode_Stroke2_Corner0_Rounded as QrCode} from '#/components/icons/QrCode' import * as Menu from '#/components/Menu' +import {QrCodeDialog} from '#/components/StarterPack/QrCodeDialog' /** * TEMPORARY CONTENT, DO NOT TRANSLATE @@ -140,6 +143,7 @@ function StarterPackScreenInner() { function Header({isOwn}: {isOwn: boolean}) { const {_} = useLingui() + const qrCodeDialogControl = useDialogControl() return ( <> @@ -175,7 +179,9 @@ function Header({isOwn}: {isOwn: boolean}) { {}}> + onPress={() => { + shareUrl('https://bsky.app') + }}> Share link @@ -184,7 +190,7 @@ function Header({isOwn}: {isOwn: boolean}) { {}}> + onPress={qrCodeDialogControl.open}> Create QR code @@ -214,6 +220,8 @@ function Header({isOwn}: {isOwn: boolean}) { started with the science community on Bluesky! + + ) }