zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Remove splashscreen blink (#2378)

Browse source 
* chore: remove unused react-native-splash-screen package

* Fix splashscreen white blink
This commit is contained in:
Mathieu Acthernoene 2024-01-03 07:21:17 +01:00 • committed by GitHub
parent 2f6f27c4fb
commit db3bf784fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -158,7 +158,6 @@
"react-native-root-siblings": "^4.1.1", "react-native-root-siblings": "^4.1.1",
"react-native-safe-area-context": "4.7.4", "react-native-safe-area-context": "4.7.4",
"react-native-screens": "~3.27.0", "react-native-screens": "~3.27.0",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "14.0.0", "react-native-svg": "14.0.0",
"react-native-url-polyfill": "^1.3.0", "react-native-url-polyfill": "^1.3.0",
"react-native-uuid": "^2.0.1", "react-native-uuid": "^2.0.1",

18
src/Splash.tsx
View file

@ -51,7 +51,8 @@ export function Splash(props: React.PropsWithChildren<Props>) {
const outroAppOpacity = useSharedValue(0) const outroAppOpacity = useSharedValue(0)
const [isAnimationComplete, setIsAnimationComplete] = React.useState(false) const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
const [isImageLoaded, setIsImageLoaded] = React.useState(false) const [isImageLoaded, setIsImageLoaded] = React.useState(false)
const isReady = props.isReady && isImageLoaded const [isLayoutReady, setIsLayoutReady] = React.useState(false)
const isReady = props.isReady && isImageLoaded && isLayoutReady
const logoAnimations = useAnimatedStyle(() => { const logoAnimations = useAnimatedStyle(() => {
return { return {
@ -89,12 +90,13 @@ export function Splash(props: React.PropsWithChildren<Props>) {
}) })
const onFinish = useCallback(() => setIsAnimationComplete(true), []) const onFinish = useCallback(() => setIsAnimationComplete(true), [])
const onLayout = useCallback(() => setIsLayoutReady(true), [])
const onLoadEnd = useCallback(() => setIsImageLoaded(true), [])
useEffect(() => { useEffect(() => {
if (isReady) { if (isReady) {
// hide on mount SplashScreen.hideAsync()
SplashScreen.hideAsync().catch(() => {}) .then(() => {
intro.value = withTiming( intro.value = withTiming(
1, 1,
{duration: 400, easing: Easing.out(Easing.cubic)}, {duration: 400, easing: Easing.out(Easing.cubic)},
@ -119,15 +121,13 @@ export function Splash(props: React.PropsWithChildren<Props>) {
}) })
}, },
) )
})
.catch(() => {})
} }
}, [onFinish, intro, outroLogo, outroApp, outroAppOpacity, isReady]) }, [onFinish, intro, outroLogo, outroApp, outroAppOpacity, isReady])
const onLoadEnd = useCallback(() => {
setIsImageLoaded(true)
}, [setIsImageLoaded])
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}} onLayout={onLayout}>
{!isAnimationComplete && ( {!isAnimationComplete && (
<Image <Image
accessibilityIgnoresInvertColors accessibilityIgnoresInvertColors

5
yarn.lock
View file

@ -18198,11 +18198,6 @@ react-native-screens@~3.27.0:
react-freeze "^1.0.0" react-freeze "^1.0.0"
warn-once "^0.1.0" warn-once "^0.1.0"
react-native-splash-screen@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz#3af71ed17afe50fee69590a45aec399d071ead02"
integrity sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA==
react-native-svg@14.0.0: react-native-svg@14.0.0:
version "14.0.0" version "14.0.0"
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.0.0.tgz#ea1974dec9a91a09c6a38b7bf58d85e857c291f5" resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.0.0.tgz#ea1974dec9a91a09c6a38b7bf58d85e857c291f5"