javascript – Brief Flash of Splash Image After Lottie Animation Splash with Expo

I’m facing an issue in my React Native Expo project where a short flash of the splash image occurs after the completion of a Lottie animation during the app launch. I’ve attempted various approaches to synchronize the hiding of the native splash screen with the Lottie animation’s completion, but the issue persists.

To provide more context, the launch screen displays the same content as the first frame of the animated launch screen, and the transition at the start is functioning correctly. The problem only arises after the Lottie animation finishes.

Here’s an overview of my current implementation:

App.tsx:

import SignUp from "@views/auth/SignUp";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { useEffect, useState } from "react";
import LottieAnimation from "@components/LottieAnimation";
import Animated from "react-native-reanimated";
import * as SplashScreen from "expo-splash-screen";

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);
  const [splashAnimationFinished, setSplashAnimationFinished] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Pre-load fonts, make any API calls you need to do here
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render

        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  if (!appIsReady || !splashAnimationFinished) {
    return (
      <LottieAnimation
        onAnimationFinish={(isCancelled) => {
          if (!isCancelled) {
            setSplashAnimationFinished(true);
          }
        }}
      />
    );
  }

  return (
    <Animated.View style={styles.container}>
      <SignUp />
      <StatusBar style="auto" />
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

LottieAnimation.tsx:

import { FC } from "react";
import { StyleSheet, View } from "react-native";
import LottieView from "lottie-react-native";
import colors from "@utils/colors";
import Animated, { FadeOut, ZoomOut } from "react-native-reanimated";

interface Props {
  onAnimationFinish?: (isCancelled: boolean) => void;
}

const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);

const LottieAnimation: FC<Props> = ({ onAnimationFinish }) => {
  return (
    <Animated.View style={styles.animationContainer} exiting={FadeOut}>
      <AnimatedLottieView
        //exiting={ZoomOut}
        autoPlay
        onAnimationFinish={onAnimationFinish}
        loop={false}
        style={{
          width: "80%",
          height: "100%",
        }}
        source={require("@assets/LogoAnimation.json")}
      />
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  animationContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.PRIMARY,
  },
});

export default LottieAnimation;