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/package.json b/package.json index c107ea56e4..158b870186 100644 --- a/package.json +++ b/package.json @@ -177,6 +177,7 @@ "react-native-pager-view": "6.2.3", "react-native-picker-select": "^9.1.3", "react-native-progress": "bluesky-social/react-native-progress", + "react-native-qrcode-styled": "^0.3.1", "react-native-reanimated": "^3.11.0", "react-native-root-siblings": "^4.1.1", "react-native-safe-area-context": "4.10.1", 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..48d1572eac 100644 --- a/src/screens/StarterPack/Main/index.tsx +++ b/src/screens/StarterPack/Main/index.tsx @@ -1,22 +1,25 @@ import React from 'react' -import {Text, View} from 'react-native' +import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' 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' -import {EventStopper} from 'view/com/util/EventStopper' import {CenteredView} from 'view/com/util/Views' 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' +import {Text} from '#/components/Typography' /** * TEMPORARY CONTENT, DO NOT TRANSLATE @@ -140,6 +143,7 @@ function StarterPackScreenInner() { function Header({isOwn}: {isOwn: boolean}) { const {_} = useLingui() + const qrCodeDialogControl = useDialogControl() return ( <> @@ -152,48 +156,48 @@ function Header({isOwn}: {isOwn: boolean}) { creator={undefined} avatarType="starter-pack"> - - - - {({props}) => { - return ( - - ) - }} - - - - {}}> - - Share link - - - - {}}> - - Create QR code - - - - - - - + + + {({props}) => { + return ( + + ) + }} + + + + { + shareUrl('https://bsky.app') + }}> + + Share link + + + + + + Create QR code + + + + + + {isOwn && (