diff --git a/src/Splash.tsx b/src/Splash.tsx index 4b480b7a..d3b21dd6 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -2,7 +2,6 @@ import React, {useCallback, useEffect} from 'react' import {View, StyleSheet, Image as RNImage} from 'react-native' import * as SplashScreen from 'expo-splash-screen' import {Image} from 'expo-image' -import {platformApiLevel} from 'expo-device' import Animated, { interpolate, runOnJS, @@ -15,6 +14,8 @@ import MaskedView from '@react-native-masked-view/masked-view' import {useSafeAreaInsets} from 'react-native-safe-area-context' import Svg, {Path, SvgProps} from 'react-native-svg' +import {isAndroid} from '#/platform/detection' + // @ts-ignore import splashImagePointer from '../assets/splash.png' const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri @@ -54,7 +55,7 @@ export function Splash(props: React.PropsWithChildren) { const [isLayoutReady, setIsLayoutReady] = React.useState(false) const isReady = props.isReady && isImageLoaded && isLayoutReady - const logoAnimations = useAnimatedStyle(() => { + const logoAnimation = useAnimatedStyle(() => { return { transform: [ { @@ -64,7 +65,7 @@ export function Splash(props: React.PropsWithChildren) { scale: interpolate( outroLogo.value, [0, 0.08, 1], - [1, 0.8, 400], + [1, 0.8, 500], 'clamp', ), }, @@ -72,6 +73,16 @@ export function Splash(props: React.PropsWithChildren) { opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'), } }) + const logoWrapperAnimation = useAnimatedStyle(() => { + return { + opacity: interpolate( + outroAppOpacity.value, + [0, 0.1, 0.2, 1], + [1, 1, 0, 0], + 'clamp', + ), + } + }) const appAnimation = useAnimatedStyle(() => { return { @@ -82,7 +93,7 @@ export function Splash(props: React.PropsWithChildren) { ], opacity: interpolate( outroAppOpacity.value, - [0, 0.08, 0.15, 1], + [0, 0.1, 0.2, 1], [0, 0, 1, 1], 'clamp', ), @@ -137,16 +148,31 @@ export function Splash(props: React.PropsWithChildren) { /> )} - {platformApiLevel && platformApiLevel <= 25 ? ( + {isAndroid ? ( // Use a simple fade on older versions of android (work around a bug) <> {props.children} + + {!isAnimationComplete && ( + + + + )} ) : ( ) { transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px }, ]}> - + }> {!isAnimationComplete && (