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

Merge branch 'haileyok-fix/android-splash-hackfix' into main

zio/stable
Paul Frazee 2024-01-02 11:57:43 -08:00
parent 4e9e92f976 43ac20881f
commit e460b304fc
1 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/Splash.tsx
View File

@ -2,6 +2,7 @@ import React, {useCallback, useEffect} from 'react'
import {View, StyleSheet, Image as RNImage} from 'react-native' import {View, StyleSheet, Image as RNImage} from 'react-native'
import * as SplashScreen from 'expo-splash-screen' import * as SplashScreen from 'expo-splash-screen'
import {Image} from 'expo-image' import {Image} from 'expo-image'
import {platformApiLevel} from 'expo-device'
import Animated, { import Animated, {
interpolate, interpolate,
runOnJS, runOnJS,
@ -136,34 +137,52 @@ export function Splash(props: React.PropsWithChildren<Props>) {
/> />
)} )}
<MaskedView {platformApiLevel && platformApiLevel <= 25 ? (
style={[StyleSheet.absoluteFillObject]} // Use a simple fade on older versions of android (work around a bug)
maskElement={ <>
<Animated.View {!isAnimationComplete && (
style={[ <View
StyleSheet.absoluteFillObject, style={[
{ StyleSheet.absoluteFillObject,
// Transparent background because mask is based off alpha channel. {backgroundColor: 'white'},
backgroundColor: 'transparent', ]}
flex: 1, />
justifyContent: 'center', )}
alignItems: 'center', <Animated.View style={[{flex: 1}, appAnimation]}>
transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px {props.children}
},
]}>
<AnimatedLogo style={[logoAnimations]} />
</Animated.View> </Animated.View>
}> </>
{!isAnimationComplete && ( ) : (
<View <MaskedView
style={[StyleSheet.absoluteFillObject, {backgroundColor: 'white'}]} style={[StyleSheet.absoluteFillObject]}
/> maskElement={
)} <Animated.View
style={[
<Animated.View style={[{flex: 1}, appAnimation]}> {
{props.children} // Transparent background because mask is based off alpha channel.
</Animated.View> backgroundColor: 'transparent',
</MaskedView> flex: 1,
justifyContent: 'center',
alignItems: 'center',
transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
},
]}>
<AnimatedLogo style={[logoAnimations]} />
</Animated.View>
}>
{!isAnimationComplete && (
<View
style={[
StyleSheet.absoluteFillObject,
{backgroundColor: 'white'},
]}
/>
)}
<Animated.View style={[{flex: 1}, appAnimation]}>
{props.children}
</Animated.View>
</MaskedView>
)}
</View> </View>
) )
} }