How to Create Animated Splash Screen in React Native?

Jul 05, 2022

.

Admin

How to Create Animated Splash Screen in React Native?

Hi Guys,

Now, let's see example of how to create animated splash screen in react native. you can understand a concept of how to implement animated splash screen in react native. if you want to see example of how to use animated splash screen in react native then you are a right place. if you want to see example of how to add animated splash screen in react native then you are a right place. Here, Creating a basic example of react native animated splash screen example.

Let's start following example:

Step 1: Download Project


In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

In this step, You will open the App.js file and put the code.

import React, { useEffect, useState } from 'react';

import { View, StyleSheet, Animated, Text } from 'react-native';

const App = () => {

const [isVisible, setisVisible] = useState(true);

const width = new Animated.Value(0);

const height = new Animated.Value(0);

const IMAGE =

'https://tsc-website-production.s3.amazonaws.com/uploads/2018/05/React-Native.png';

useEffect(() => {

Animated.timing(

width,

{

toValue: 360,

duration: 1200,

useNativeDriver: false,

},

).start();

Animated.timing(

height,

{

toValue: 100,

duration: 1200,

useNativeDriver: false,

},

).start();

}, []);

const Hide_Splash_Screen = () => {

setisVisible(false);

}

useEffect(() => {

let myTimeout = setTimeout(() => {

Hide_Splash_Screen();

}, 3000);

return () => clearTimeout(myTimeout);

}, []);

const Splash_Screen = () => {

return (

<View style={styles.container}>

<Animated.Image

source={{ uri: IMAGE }}

style={{

width: width,

height: height,

position: 'absolute',

}}

resizeMode='cover'

/>

</View>

);

}

return (

<>

{

(isVisible === true) ? Splash_Screen() : (

<View style={styles.container}>

<Text style={styles.title}>Animated Splash Screen Example</Text>

</View>

)

}

</>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#FFF',

justifyContent: 'center',

alignItems: 'center',

},

title: {

fontSize:23,

fontWeight:'800',

},

});

export default App;

Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...

#React Native