iOS Development

javascript – Transient Flash of Splash Picture After Lottie Animation Splash with Expo

Spread the love


I am dealing with a problem in my React Native Expo undertaking the place a brief flash of the splash picture happens after the completion of a Lottie animation through the app launch. I’ve tried numerous approaches to synchronize the hiding of the native splash display with the Lottie animation’s completion, however the situation persists.

To offer extra context, the launch display shows the identical content material as the primary body of the animated launch display, and the transition initially is functioning accurately. The issue solely arises after the Lottie animation finishes.

Here is an outline of my present implementation:

App.tsx:

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

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

  useEffect(() => {
    async perform put together() {
      strive {
        // Pre-load fonts, make any API calls it's essential do right here
      } catch (e) {
        console.warn(e);
      } lastly {
        // Inform the appliance to render

        setAppIsReady(true);
      }
    }

    put together();
  }, []);

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

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

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

LottieAnimation.tsx:

import { FC } from "react";
import { StyleSheet, View } from "react-native";
import LottieView from "lottie-react-native";
import colours from "@utils/colours";
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 fashion={types.animationContainer} exiting={FadeOut}>
      <AnimatedLottieView
        //exiting={ZoomOut}
        autoPlay
        onAnimationFinish={onAnimationFinish}
        loop={false}
        fashion={{
          width: "80%",
          peak: "100%",
        }}
        supply={require("@belongings/LogoAnimation.json")}
      />
    </Animated.View>
  );
};

const types = StyleSheet.create({
  animationContainer: {
    flex: 1,
    alignItems: "heart",
    justifyContent: "heart",
    backgroundColor: colours.PRIMARY,
  },
});

export default LottieAnimation;

Leave a Reply

Your email address will not be published. Required fields are marked *