ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
New splash screen (#2714)
* New splash screen
* Add logotype to splash
* Adjust spacing
authored by
Eric Bailey
and committed by
GitHub
1720eef5
10cd4adc
assets/splash-dark.png
assets/splash-dark.png
This is a binary file and will not be displayed.
assets/splash.png
assets/splash.png
This is a binary file and will not be displayed.
+34
-14
src/Splash.tsx
+34
-14
src/Splash.tsx
···
21
21
import Svg, {Path, SvgProps} from 'react-native-svg'
22
22
23
23
import {isAndroid} from '#/platform/detection'
24
-
import {useColorMode} from 'state/shell'
25
-
import {colors} from '#/lib/styles'
24
+
import {useColorMode} from '#/state/shell'
25
+
import {Logotype} from '#/view/icons/Logotype'
26
26
27
27
// @ts-ignore
28
28
import splashImagePointer from '../assets/splash.png'
···
95
95
),
96
96
},
97
97
],
98
+
opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
99
+
}
100
+
})
101
+
const bottomLogoAnimation = useAnimatedStyle(() => {
102
+
return {
98
103
opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
99
104
}
100
105
})
···
183
188
return (
184
189
<View style={{flex: 1}} onLayout={onLayout}>
185
190
{!isAnimationComplete && (
186
-
<Image
187
-
accessibilityIgnoresInvertColors
188
-
onLoadEnd={onLoadEnd}
189
-
source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
190
-
style={StyleSheet.absoluteFillObject}
191
-
/>
191
+
<View style={StyleSheet.absoluteFillObject}>
192
+
<Image
193
+
accessibilityIgnoresInvertColors
194
+
onLoadEnd={onLoadEnd}
195
+
source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
196
+
style={StyleSheet.absoluteFillObject}
197
+
/>
198
+
199
+
<Animated.View
200
+
style={[
201
+
bottomLogoAnimation,
202
+
{
203
+
position: 'absolute',
204
+
bottom: insets.bottom + 40,
205
+
left: 0,
206
+
right: 0,
207
+
alignItems: 'center',
208
+
justifyContent: 'center',
209
+
opacity: 0,
210
+
},
211
+
]}>
212
+
<Logotype fill="#fff" width={90} />
213
+
</Animated.View>
214
+
</View>
192
215
)}
193
216
194
217
{isReady &&
···
212
235
},
213
236
]}>
214
237
<AnimatedLogo
215
-
fill={isDarkMode ? colors.blue3 : '#fff'}
238
+
fill="#fff"
216
239
style={[{opacity: 0}, logoAnimations]}
217
240
/>
218
241
</Animated.View>
···
233
256
transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
234
257
},
235
258
]}>
236
-
<AnimatedLogo
237
-
fill={isDarkMode ? colors.blue3 : '#fff'}
238
-
style={[logoAnimations]}
239
-
/>
259
+
<AnimatedLogo fill="#fff" style={[logoAnimations]} />
240
260
</Animated.View>
241
261
}>
242
262
{!isAnimationComplete && (
243
263
<View
244
264
style={[
245
265
StyleSheet.absoluteFillObject,
246
-
{backgroundColor: isDarkMode ? colors.blue3 : '#fff'},
266
+
{backgroundColor: '#fff'},
247
267
]}
248
268
/>
249
269
)}