forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Remove splashscreen blink (#2378)
* chore: remove unused react-native-splash-screen package
* Fix splashscreen white blink
authored by
Mathieu Acthernoene
and committed by
GitHub
db3bf784
2f6f27c4
+30
-36
-1
package.json
-1
package.json
···
158
158
"react-native-root-siblings": "^4.1.1",
159
159
"react-native-safe-area-context": "4.7.4",
160
160
"react-native-screens": "~3.27.0",
161
-
"react-native-splash-screen": "^3.3.0",
162
161
"react-native-svg": "14.0.0",
163
162
"react-native-url-polyfill": "^1.3.0",
164
163
"react-native-uuid": "^2.0.1",
+30
-30
src/Splash.tsx
+30
-30
src/Splash.tsx
···
51
51
const outroAppOpacity = useSharedValue(0)
52
52
const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
53
53
const [isImageLoaded, setIsImageLoaded] = React.useState(false)
54
-
const isReady = props.isReady && isImageLoaded
54
+
const [isLayoutReady, setIsLayoutReady] = React.useState(false)
55
+
const isReady = props.isReady && isImageLoaded && isLayoutReady
55
56
56
57
const logoAnimations = useAnimatedStyle(() => {
57
58
return {
···
89
90
})
90
91
91
92
const onFinish = useCallback(() => setIsAnimationComplete(true), [])
93
+
const onLayout = useCallback(() => setIsLayoutReady(true), [])
94
+
const onLoadEnd = useCallback(() => setIsImageLoaded(true), [])
92
95
93
96
useEffect(() => {
94
97
if (isReady) {
95
-
// hide on mount
96
-
SplashScreen.hideAsync().catch(() => {})
97
-
98
-
intro.value = withTiming(
99
-
1,
100
-
{duration: 400, easing: Easing.out(Easing.cubic)},
101
-
async () => {
102
-
// set these values to check animation at specific point
103
-
// outroLogo.value = 0.1
104
-
// outroApp.value = 0.1
105
-
outroLogo.value = withTiming(
98
+
SplashScreen.hideAsync()
99
+
.then(() => {
100
+
intro.value = withTiming(
106
101
1,
107
-
{duration: 1200, easing: Easing.in(Easing.cubic)},
108
-
() => {
109
-
runOnJS(onFinish)()
102
+
{duration: 400, easing: Easing.out(Easing.cubic)},
103
+
async () => {
104
+
// set these values to check animation at specific point
105
+
// outroLogo.value = 0.1
106
+
// outroApp.value = 0.1
107
+
outroLogo.value = withTiming(
108
+
1,
109
+
{duration: 1200, easing: Easing.in(Easing.cubic)},
110
+
() => {
111
+
runOnJS(onFinish)()
112
+
},
113
+
)
114
+
outroApp.value = withTiming(1, {
115
+
duration: 1200,
116
+
easing: Easing.inOut(Easing.cubic),
117
+
})
118
+
outroAppOpacity.value = withTiming(1, {
119
+
duration: 1200,
120
+
easing: Easing.in(Easing.cubic),
121
+
})
110
122
},
111
123
)
112
-
outroApp.value = withTiming(1, {
113
-
duration: 1200,
114
-
easing: Easing.inOut(Easing.cubic),
115
-
})
116
-
outroAppOpacity.value = withTiming(1, {
117
-
duration: 1200,
118
-
easing: Easing.in(Easing.cubic),
119
-
})
120
-
},
121
-
)
124
+
})
125
+
.catch(() => {})
122
126
}
123
127
}, [onFinish, intro, outroLogo, outroApp, outroAppOpacity, isReady])
124
128
125
-
const onLoadEnd = useCallback(() => {
126
-
setIsImageLoaded(true)
127
-
}, [setIsImageLoaded])
128
-
129
129
return (
130
-
<View style={{flex: 1}}>
130
+
<View style={{flex: 1}} onLayout={onLayout}>
131
131
{!isAnimationComplete && (
132
132
<Image
133
133
accessibilityIgnoresInvertColors
-5
yarn.lock
-5
yarn.lock
···
18198
18198
react-freeze "^1.0.0"
18199
18199
warn-once "^0.1.0"
18200
18200
18201
-
react-native-splash-screen@^3.3.0:
18202
-
version "3.3.0"
18203
-
resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz#3af71ed17afe50fee69590a45aec399d071ead02"
18204
-
integrity sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA==
18205
-
18206
18201
react-native-svg@14.0.0:
18207
18202
version "14.0.0"
18208
18203
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.0.0.tgz#ea1974dec9a91a09c6a38b7bf58d85e857c291f5"