React Native Animated Splash Screen | Transform Your App's First Impression Tutorial 2023 | Code with Beto

Learn how to build an animated splash screen for React Native apps using Lottie animations. You'll learn selecting free animations from LottieFiles, integrating them with the react-native-lottie library, and adding smooth fade transitions with react-native-reanimated.

If you want to improve your app's first impression with engaging animations that work on both iOS and Android, this tutorial is for you. It also includes troubleshooting common React Native setup issues and organizing your project structure for splash screens.

What's inside

Introduction to LottieFiles and free animations
Setting up a new React Native project with TypeScript
Installing and configuring react-native-lottie and react-native-reanimated
Handling CocoaPods and iOS build issues
Creating a splash screen component with LottieView
Using JSON animation files from LottieFiles
Adding fade transitions after the splash animation finishes
Organizing screens and assets in the project

Introduction to LottieFiles and free animations

LottieFiles is a platform offering free and custom animations in JSON format that you can use in your apps. You can create an account and browse ready-to-use animations, including splash screens, loading indicators, and success animations.

I highlight the importance of crediting animation creators, like Travis Gregory for a success animation example. To use an animation, you copy its JSON URL from LottieFiles, open it in a new tab, and save the JSON file locally.

This approach lets you easily add high-quality animations without designing them yourself, enhancing your app’s user experience.

Setting up a new React Native project with TypeScript

The tutorial starts by creating a fresh React Native project using the command:

The project uses TypeScript by default in recent React Native versions. After initialization, you can run the app on iOS and Android simulators using and .

I also covers common setup errors, like CocoaPods version mismatches on macOS, and how to fix them by running inside the iOS folder.

Installing and configuring react-native-lottie and react-native-reanimated

To integrate Lottie animations, install the main dependencies:

The reanimated library is used to create smooth fade transitions after the splash animation completes.

You must configure Reanimated by adding its Babel plugin in :

module.exports = {
  plugins: ['react-native-reanimated/plugin'],
};

After this, restart the Metro bundler to apply changes.

For iOS, run again to link native dependencies properly.

Handling CocoaPods and iOS build issues

I demonstrate troubleshooting iOS build errors, which often require running inside the iOS directory to update CocoaPods dependencies.

If running the app via CLI fails, opening the file in Xcode and running the app from there can help identify and fix issues.

This ensures the native modules for Lottie and Reanimated are correctly linked and the app builds successfully on iOS simulators or devices.

Creating a splash screen component with LottieView

The splash screen is implemented as a React component returning a containing a component from .

Key props for include:

: the local JSON animation file (e.g., )
: to start the animation automatically
: whether the animation repeats (often false for splash)
: usually set to to fill the screen

The container view uses styles like and to center the animation and fill the screen.

Using JSON animation files from LottieFiles

After selecting an animation on LottieFiles, copy its JSON content and save it in your project under an folder.

In the splash screen component, import the JSON using and pass it to as the prop.

This method keeps animations local, avoids network delays, and allows you to customize or swap animations easily.

Adding fade transitions after the splash animation finishes

I explain how to listen for the event from to trigger a fade-out transition.

Using , you can animate the opacity of the splash screen to smoothly transition to the app’s main content.

This improves user experience by avoiding abrupt changes and making the splash screen feel polished.

Organizing screens and assets in the project

To keep the project clean, create a folder with a subfolder.

Place the splash screen component in and assets like JSON files in .

This structure scales well as your app grows and helps maintain separation of concerns between UI components and resources.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro Membership

Access premium tutorials and templates including advanced animations.

Let's connect!