How to animate Fire TV splash screens with React Native & Lottie

Author's Note: In my previous Lottie article, we covered how to create animated custom splash screens on Fire TV using Kotlin for Android and Lottie. For this article, we'll focus on those of you building Android apps using React Native. Since Lottie supports React Native, we'll cover the essentials to get you up and running quickly. Let's dive in!

Quick recap for Lottie
Lottie is an open-source animation library created by Airbnb to render complex animations on mobile devices in real time. It's an excellent choice for creating interactive animations for both Android and iOS. Since Fire OS is based on the Android Open source Project AOSP we can use Lottie to render complex animated splash screens on Fire TV apps with React Native.

Let's now walk through how to create an animated splash screen for a React Native app running on Fire TV!

Prerequisite: Create a React Native project

You can use your own existing React Native project or create a new one using the command line:

npx react-native@latest init SplashScreenApp

💡 Note: If you're new to React Native and want to learn how to setup your development environment and command line tools, head over to the React Native official docs to get up and running.

Step 1: Prepare the Lottie animation

To integrate Lottie animations into our TV splash screen, we need to first build an animation to match our app's branding and theme. For this example, we'll use the TV Watching animation by Alan Murphy available as a sample from LottieFiles.

Step 2: Place the Lottie animation into the React Native app project

Create a directory assets in your React Native project and download the "TV Watching Animation" in Lottie JSON format from the step above. Place the JSON file in the new assets folder and make sure to rename the JSON file splashscreen.json.

Step 3: Include Lottie as a package dependency

From the command line, inside the root directory of your React Native app execute the command to add Lottie as a dependency:

yarn add lottie-react-native

Step 4: Define the main components for your splash screen

For this sample app, we'll declare all required components inside App.tsx.

The 3 components are:

1. App, which represents the main app component
2. SplashScreen for initiating the splash screen
3. MainContent for the view that is shown after the splash screen disappears

Let's open the file App.tsx and remove all the content generated by the React Native command line.

Then at the top of the file, add the required imports for the components we need:

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

Next up you will declare the 3 components:

const SplashScreen = ({ onAnimationFinish }) => (

);

const MainContent = () => (

);

const App = () => {

};

and in addition set the styles we will apply for each of them:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  splashContainer: {
    width: 200,
    height: 200,
  },
  splash: {
    flex: 1,
  },
  mainContainer: {
    marginTop: 100,
  },
  text: {
    fontWeight: 'bold',
  },
});

Remember to export the App component at the end of the file:

export default App;

Step 5: Implement the SplashScreen component

Implement the SplashScreen component by declaring its components. For this we will have a View containing a LottieView with the previous json animation file assigned to the source property of the LottieView.

We also define the autoPlay property in the LottieView in order to automatically start the animation and set the loop property as false so that we only show the animation one time:

const SplashScreen = ({ onAnimationFinish }) => (
<View style={styles.splashContainer}>
    <LottieView
      style={styles.splash}
      source={require('./assets/splashscreen.json')}
      autoPlay
      loop={false}
      onAnimationFinish={onAnimationFinish}
    />
  </View>
  );

Step 6: Implement the MainContent component

To start, this step will just show Text and then you choose when to display your app's home screen after the Splash Screen animation ends:

const MainContent = () => (
  <View style={styles.mainContainer}>
    <Text style={styles.text}>Your Awesome App Home Screen!</Text>
  </View>
);

Step 7: Implement the App component

The App component handles the logic to display and hide the Splash screen.

Declare a loaded state and set it to false. This allows the the animation to load prior to the Splash Screen being rendered on screen. Once the animation resource is ready, a callback will flip the loaded state to true to then make the MainContent component visible on the Fire TV:

const App = () => {
  const [loaded, setLoaded] = useState(false);

  const handleAnimationFinish = () => {
    setLoaded(true);
  };

  return (
    <View style={styles.container}>
      {loaded ? <MainContent /> : <SplashScreen onAnimationFinish={handleAnimationFinish} />}
    </View>
  );
};

Wrap Up: Load up and test our animated splash screen!

Now we can test either by using Fire TV via adb or starting an Android TV emulator.

Either approach will let us see the sample in action by running this command from the project directory:

npm start

Remember to press a to run the Android version.

Using Lottie for React Native is an easy way to enrich your app with beautiful animations and make your user happy.

Thanks for reading this guide and make sure to check out the sample project source code on Github.

Stay updated

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter

About the author

Giovanni ("Gio") Laquidara is a Senior Dev Advocate at Amazon, where he works on supporting developers around the world using the Amazon Appstore across many devices.

Previously, Gio worked as a software engineer building mobile apps, real-time defence systems, and VR/AR experiences. For fun, Gio enjoys low level programming, IoT hacking, and command line apps ⌨️✨.

You can connect with Gio on Twitter, Linkedin, and giolaq.dev.