How to animate Fire TV splash screens with React Native & Lottie
Tags: howto, tutorial, reactnative, lottie
Published: 2023-09-11 04:24:09


> _**Author's Note:** In my [previous Lottie article](https://dev.to/amazonappdev/develop-animated-splash-screens-on-fire-tv-with-lottie-5emp), we covered how to create animated custom splash screens on Fire TV using Kotlin for Android and [Lottie](https://github.com/airbnb/lottie-android). 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](https://airbnb.io/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](https://source.android.com/) 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:

```sh
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](https://reactnative.dev/docs/environment-setup) 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](https://lottiefiles.com/animations/tv-watching-g5Lr55wxgp) animation by [Alan Murphy](https://lottiefiles.com/wovencontent) available as a sample from [LottieFiles](https://lottiefiles.com/). 


![Lottie animation from LottieFiles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvitz7foralsqe9gmbwe.png)

### **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](https://lottiefiles.com/animations/tv-watching-g5Lr55wxgp)" 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:
```sh
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:

```ts
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:  
```ts
const SplashScreen = ({ onAnimationFinish }) => (
 
);

const MainContent = () => (
 
);

const App = () => {
 
};
```

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

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:
```ts
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:

```ts
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:

```ts
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:

```ts
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](https://developer.amazon.com/docs/fire-tv/connecting-adb-to-device.html) or [starting an Android TV emulator](https://developer.android.com/training/tv/start/start#run-on-a-virtual-device). 

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.

![Animated Splash screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyxq87fbnnwiylijvikd.gif)

Using [Lottie for React Native](https://github.com/lottie-react-native/lottie-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](https://github.com/giolaq/splash-screen-tv-app-react-native).


**Stay updated** 

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

📣 Follow [@AmazonAppDev](https://twitter.com/AmazonAppDev) and [our team](https://twitter.com/i/lists/1580293569897984000/members) on Twitter

📺 Subscribe to our [Youtube channel](https://www.youtube.com/amazonappstoredevelopers)

📧 Sign up for the [Developer Newsletter](https://m.amazonappservices.com/devto-newsletter-subscribe)

### 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](https://twitter.com/giolaq), [Linkedin](https://www.linkedin.com/in/glaquidara/), and [giolaq.dev](https://giolaq.dev)._