quilling.dev
An ATproto social media client -- with an independent Appview.
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
import Svg, {Path, SvgProps} from 'react-native-svg'
22
23
import {isAndroid} from '#/platform/detection'
24
-
import {useColorMode} from 'state/shell'
25
-
import {colors} from '#/lib/styles'
26
27
// @ts-ignore
28
import splashImagePointer from '../assets/splash.png'
···
95
),
96
},
97
],
98
opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
99
}
100
})
···
183
return (
184
<View style={{flex: 1}} onLayout={onLayout}>
185
{!isAnimationComplete && (
186
-
<Image
187
-
accessibilityIgnoresInvertColors
188
-
onLoadEnd={onLoadEnd}
189
-
source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
190
-
style={StyleSheet.absoluteFillObject}
191
-
/>
192
)}
193
194
{isReady &&
···
212
},
213
]}>
214
<AnimatedLogo
215
-
fill={isDarkMode ? colors.blue3 : '#fff'}
216
style={[{opacity: 0}, logoAnimations]}
217
/>
218
</Animated.View>
···
233
transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
234
},
235
]}>
236
-
<AnimatedLogo
237
-
fill={isDarkMode ? colors.blue3 : '#fff'}
238
-
style={[logoAnimations]}
239
-
/>
240
</Animated.View>
241
}>
242
{!isAnimationComplete && (
243
<View
244
style={[
245
StyleSheet.absoluteFillObject,
246
-
{backgroundColor: isDarkMode ? colors.blue3 : '#fff'},
247
]}
248
/>
249
)}
···
21
import Svg, {Path, SvgProps} from 'react-native-svg'
22
23
import {isAndroid} from '#/platform/detection'
24
+
import {useColorMode} from '#/state/shell'
25
+
import {Logotype} from '#/view/icons/Logotype'
26
27
// @ts-ignore
28
import splashImagePointer from '../assets/splash.png'
···
95
),
96
},
97
],
98
+
opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
99
+
}
100
+
})
101
+
const bottomLogoAnimation = useAnimatedStyle(() => {
102
+
return {
103
opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
104
}
105
})
···
188
return (
189
<View style={{flex: 1}} onLayout={onLayout}>
190
{!isAnimationComplete && (
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>
215
)}
216
217
{isReady &&
···
235
},
236
]}>
237
<AnimatedLogo
238
+
fill="#fff"
239
style={[{opacity: 0}, logoAnimations]}
240
/>
241
</Animated.View>
···
256
transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
257
},
258
]}>
259
+
<AnimatedLogo fill="#fff" style={[logoAnimations]} />
260
</Animated.View>
261
}>
262
{!isAnimationComplete && (
263
<View
264
style={[
265
StyleSheet.absoluteFillObject,
266
+
{backgroundColor: '#fff'},
267
]}
268
/>
269
)}