1

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>
  );
}
Andras
  • 67
  • 8

0 Answers0