How to create a captivating animated splash screen in React Native Expo Router with Lottie

In the world of mobile app development, a well-designed splash screen can make a lasting impression on users and it is for that exact reason I have created one for Translate buddy. In this article, we will explore how to create a stunning splash screen using Lottie file, adding a touch of animation and excitement to your React Native projects.

1. Understanding Lottie : Before we dive into creating our splash screen, what is Lottie if you may ask? Lottie is an animation library that renders animations in real-time and allows creators (like you and me :)) to create vector animations to add to their applications with minimal effort.
2. Preparing Your Lottie Animation : The first step is to create an account and start designing your animation. You can create custom animations or browse through their extensive library of pre-made animations. The interface is quite easy to use even for a beginner.

3. Now that we have created our animation we need to export our file in .json format. Lottie files are lightweight and you do not have to worry about slowing down your application. Another plus!

4. Setting Up Your React Native Project. Create a new expo project or open an existing one where you want to add the splash screen. First we will need to install the dependencies in order for it to work. We need to install (`lottie-react-native`) and (`expo-splash-screen`).

5. Create a file, you can name it splashscreen.tsx at the root or in your components folder of your app and inside that file add your imports as follows.

Be sure to import * as ExploSplashScreen from expo-splash-screen as above because we have named our component Splashscreen and therefore importing the same keyword will give you errors. To add, you cannot style your LottieView with TailwindCss and therefore you have to use native styling. Another sidenote you cannot wrap the LottieView component with another component. Now that we are clear, we can proceed to import the Splashscreen component to the root file of our project. In our case it will be the main layout file.

6

You can wrap your Splashscreen in a view component and give it a full-screen height and a background to match your app's branding. You can ensure that the splash screen remains visible for a set duration before transitioning to the main screen by using a setTimeout function.

And that is it! Happy hacking!

#ReactNative #mobiledevelopment #expo #TranslateBuddy #Lottie #SoftwareEngineer