11. How can I use my Lottie animation as a splash screen?

Showing a Lottie animation on an app startup is a nice user experience that is becoming more and more popular as mobile apps become more sophisticated. A common approach is to load the animation as the main screen, have a state variable that changes once the animation is finished, and change to the real main screen immediately after most of the initial data has been loaded:

import React, { useState } from 'react';

const App = () => {

  const [animationFinished, setAnimationFinished] = useState(false);

  useEffect(() => {

    loadAppData(); // load initial data

  }, []);

  if (animationFinished === false) {

    return(

      <View style={styles.splash}>

        <LottieView source={require('./assets/animations/ ...