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