Im trying to add a multiple lines of texts with different time delayes to fade in. Im new to Reanimated and React Native and made a splash screen which seems like working well, but when the animation finishes and user gets redirected to the next screen I noticed that the Lottie animation sometimes doesnt start. After doing some testing I realised that infact the problem is in the first screen as without it the SignIn (the second) screen is working just fine. My question is what did I do wrong with the following code that result in this outcome? I feel like there must be a lot more elegant way to do this. Here is a little video showing what Im try to achieve and the unintended outcome. Im on "react-native-reanimated": "^2.14.4".
import React from 'react';
import { Text, ImageBackground } from 'react-native';
import Animated, { FadeIn } from 'react-native-reanimated';
import Lottie from 'lottie-react-native';
export default function SplashScreen({ navigation }) {
setTimeout(() => {
this.anim.play()
}, 1000);
setTimeout(() => {
navigation.navigate("signIn")
}, 2100);
return (
<ImageBackground
source={require('../../assets/signin.jpg')}
resizeMode={'cover'}
style={{ flex: 1, justifyContent: "center", alignItems: "center", padding: 30 }}>
<Animated.View
entering={FadeIn.duration(500).delay(100)}
>
<Text style={{ fontSize: 35, color: 'white', letterSpacing: 5 }}>Welcome</Text>
</Animated.View>
<Animated.View
entering={FadeIn.duration(500).delay(250)}
>
<Text style={{ fontSize: 25, marginTop: 68, color: "black", padding: 55 }}>to</Text>
</Animated.View>
<Lottie style={{ paddingTop: 70 }} source={require('../../assets/splash.json')} autoPlay={false} loop={false} speed={0.7} ref={animation => { this.anim = animation }}
/>
<Animated.View
entering={FadeIn.duration(600).delay(800)}
>
<Text style={{ letterSpacing: 2.5, fontSize: 75, paddingTop: 25, color: "#fff" }}>us</Text>
</Animated.View>
</ImageBackground>
);
}