forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useMemo} from 'react'
2import {Image as RNImage, View} from 'react-native'
3import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
4import {Image} from 'expo-image'
5import {msg, Trans} from '@lingui/macro'
6import {useLingui} from '@lingui/react'
7
8import {useHaptics} from '#/lib/haptics'
9import {Logo} from '#/view/icons/Logo'
10import {Logotype} from '#/view/icons/Logotype'
11import {atoms as a, useTheme} from '#/alf'
12import {Button, ButtonText} from '#/components/Button'
13// @ts-ignore
14import splashImagePointer from '../../../../assets/splash/illustration-mobile.png'
15// @ts-ignore
16import darkSplashImagePointer from '../../../../assets/splash/illustration-mobile-dark.png'
17const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
18const darkSplashImageUri = RNImage.resolveAssetSource(
19 darkSplashImagePointer,
20).uri
21
22export const SplashScreen = ({
23 onPressSignin,
24 onPressCreateAccount,
25}: {
26 onPressSignin: () => void
27 onPressCreateAccount: () => void
28}) => {
29 const t = useTheme()
30 const {_} = useLingui()
31 const isDarkMode = t.name !== 'light'
32
33 const playHaptic = useHaptics()
34
35 const styles = useMemo(() => {
36 const logoFill = isDarkMode ? 'white' : t.palette.primary_500
37 return {
38 logoFill,
39 logoShadow: isDarkMode
40 ? [
41 t.atoms.shadow_md,
42 {
43 shadowColor: logoFill,
44 shadowOpacity: 0.5,
45 shadowOffset: {
46 width: 0,
47 height: 0,
48 },
49 },
50 ]
51 : [],
52 }
53 }, [t, isDarkMode])
54
55 return (
56 <>
57 <Image
58 accessibilityIgnoresInvertColors
59 source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
60 style={[a.absolute, a.inset_0]}
61 />
62
63 <Animated.View
64 entering={FadeIn.duration(90)}
65 exiting={FadeOut.duration(90)}
66 style={[a.flex_1]}>
67 <View
68 style={[a.justify_center, a.align_center, {gap: 6, paddingTop: 46}]}>
69 <Logo width={76} fill={styles.logoFill} style={styles.logoShadow} />
70 <Logotype
71 width={91}
72 fill={styles.logoFill}
73 style={styles.logoShadow}
74 />
75 </View>
76
77 <View style={[a.flex_1]} />
78
79 <View
80 testID="signinOrCreateAccount"
81 style={[a.px_5xl, a.gap_md, a.pb_sm]}>
82 <View
83 style={[
84 t.atoms.shadow_md,
85 {
86 shadowOpacity: 0.1,
87 shadowOffset: {
88 width: 0,
89 height: 5,
90 },
91 },
92 ]}>
93 <Button
94 testID="createAccountButton"
95 onPress={() => {
96 onPressCreateAccount()
97 playHaptic('Light')
98 }}
99 label={_(msg`Create new account`)}
100 accessibilityHint={_(
101 msg`Opens flow to create a new Bluesky account`,
102 )}
103 size="large"
104 color={isDarkMode ? 'secondary_inverted' : 'secondary'}>
105 <ButtonText>
106 <Trans>Create account</Trans>
107 </ButtonText>
108 </Button>
109 </View>
110
111 <Button
112 testID="signInButton"
113 onPress={() => {
114 onPressSignin()
115 playHaptic('Light')
116 }}
117 label={_(msg`Sign in`)}
118 accessibilityHint={_(
119 msg`Opens flow to sign in to your existing Bluesky account`,
120 )}
121 size="large">
122 <ButtonText style={{color: 'white'}}>
123 <Trans>Sign in</Trans>
124 </ButtonText>
125 </Button>
126 </View>
127 </Animated.View>
128 </>
129 )
130}