diff options
Diffstat (limited to 'src/screens/Settings/AppIconSettings.tsx')
| -rw-r--r-- | src/screens/Settings/AppIconSettings.tsx | 260 |
1 files changed, 0 insertions, 260 deletions
diff --git a/src/screens/Settings/AppIconSettings.tsx b/src/screens/Settings/AppIconSettings.tsx deleted file mode 100644 index 18fcd5e30..000000000 --- a/src/screens/Settings/AppIconSettings.tsx +++ /dev/null @@ -1,260 +0,0 @@ -import React from 'react' -import {Alert, View} from 'react-native' -import {Image} from 'expo-image' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import * as AppIcon from '@mozzius/expo-dynamic-app-icon' -import {NativeStackScreenProps} from '@react-navigation/native-stack' - -import {PressableScale} from '#/lib/custom-animations/PressableScale' -import {CommonNavigatorParams} from '#/lib/routes/types' -import {isAndroid} from '#/platform/detection' -import {atoms as a, platform} from '#/alf' -import * as Layout from '#/components/Layout' -import {Text} from '#/components/Typography' - -type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppIconSettings'> -export function AppIconSettingsScreen({}: Props) { - const {_} = useLingui() - const sets = useAppIconSets() - - return ( - <Layout.Screen> - <Layout.Header.Outer> - <Layout.Header.BackButton /> - <Layout.Header.Content> - <Layout.Header.TitleText> - <Trans>App Icon</Trans> - </Layout.Header.TitleText> - </Layout.Header.Content> - <Layout.Header.Slot /> - </Layout.Header.Outer> - <Layout.Content - contentContainerStyle={[a.py_2xl, a.px_xl, {paddingBottom: 100}]}> - <Text style={[a.text_lg, a.font_heavy]}>Defaults</Text> - <View style={[a.flex_row, a.flex_wrap]}> - {sets.defaults.map(icon => ( - <View - style={[{width: '50%'}, a.py_lg, a.px_xs, a.align_center]} - key={icon.id}> - <PressableScale - accessibilityLabel={icon.name} - accessibilityHint={_(msg`Tap to change app icon`)} - targetScale={0.95} - onPress={() => AppIcon.setAppIcon(icon.id)}> - <Image - source={platform({ - ios: icon.iosImage(), - android: icon.androidImage(), - })} - style={[ - {width: 100, height: 100}, - platform({ - ios: {borderRadius: 20}, - android: a.rounded_full, - }), - a.curve_continuous, - ]} - accessibilityIgnoresInvertColors - /> - </PressableScale> - <Text style={[a.text_center, a.font_bold, a.text_md, a.mt_md]}> - {icon.name} - </Text> - </View> - ))} - </View> - - <Text style={[a.text_lg, a.font_heavy]}>Bluesky+</Text> - <View style={[a.flex_row, a.flex_wrap]}> - {sets.core.map(icon => ( - <View - style={[{width: '50%'}, a.py_lg, a.px_xs, a.align_center]} - key={icon.id}> - <PressableScale - accessibilityLabel={icon.name} - accessibilityHint={_(msg`Tap to change app icon`)} - targetScale={0.95} - onPress={() => { - if (isAndroid) { - Alert.alert( - _(msg`Change app icon to "${icon.name}"`), - _(msg`The app will be restarted`), - [ - { - text: _(msg`Cancel`), - style: 'cancel', - }, - { - text: _(msg`OK`), - onPress: () => { - AppIcon.setAppIcon(icon.id) - }, - style: 'default', - }, - ], - ) - } else { - AppIcon.setAppIcon(icon.id) - } - }}> - <Image - source={platform({ - ios: icon.iosImage(), - android: icon.androidImage(), - })} - style={[ - {width: 100, height: 100}, - platform({ - ios: {borderRadius: 20}, - android: a.rounded_full, - }), - a.curve_continuous, - a.shadow_lg, - ]} - accessibilityIgnoresInvertColors - /> - </PressableScale> - <Text - style={[a.text_center, a.font_bold, a.text_md, a.mt_md]} - // for Classic™ - emoji> - {icon.name} - </Text> - </View> - ))} - </View> - </Layout.Content> - </Layout.Screen> - ) -} - -function useAppIconSets() { - const {_} = useLingui() - - return React.useMemo(() => { - const defaults = [ - { - id: 'default_light', - name: _('Light'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_default_light.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_default_light.png`) - }, - }, - { - id: 'default_dark', - name: _('Dark'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_default_dark.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_default_dark.png`) - }, - }, - ] - - /** - * Bluesky+ - */ - const core = [ - { - id: 'core_aurora', - name: _('Aurora'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_core_aurora.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_core_aurora.png`) - }, - }, - // { - // id: 'core_bonfire', - // name: _('Bonfire'), - // iosImage: () => { - // return require(`../../../assets/app-icons/ios_icon_core_bonfire.png`) - // }, - // androidImage: () => { - // return require(`../../../assets/app-icons/android_icon_core_bonfire.png`) - // }, - // }, - { - id: 'core_sunrise', - name: _('Sunrise'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_core_sunrise.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_core_sunrise.png`) - }, - }, - { - id: 'core_sunset', - name: _('Sunset'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_core_sunset.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_core_sunset.png`) - }, - }, - { - id: 'core_midnight', - name: _('Midnight'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_core_midnight.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_core_midnight.png`) - }, - }, - { - id: 'core_flat_blue', - name: _('Flat Blue'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_core_flat_blue.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_core_flat_blue.png`) - }, - }, - { - id: 'core_flat_white', - name: _('Flat White'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_core_flat_white.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_core_flat_white.png`) - }, - }, - { - id: 'core_flat_black', - name: _('Flat Black'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_core_flat_black.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_core_flat_black.png`) - }, - }, - { - id: 'core_classic', - name: _('Bluesky Classic™'), - iosImage: () => { - return require(`../../../assets/app-icons/ios_icon_core_classic.png`) - }, - androidImage: () => { - return require(`../../../assets/app-icons/android_icon_core_classic.png`) - }, - }, - ] - - return { - defaults, - core, - } - }, [_]) -} |