In this React Native Example we will cover how to add a splash screen to react native application for android and ios. Let's implement simple Splash screen in React Native component. For React Native splash example i have added below dependencies

 

react-native-linear-gradient : To create Gradient View with different shades

react-native-animatable : To apply animation for view

react-native-vector-icons/MaterialIcons : To add vector icons

 

Let's get started

Step 1: Open your IDE terminal and run below command

react-native init SplashScreen

 

This will create a ReactNative application, It will install all necessary react node modules for the project, As we mentioned above we need to add dependencies with below commands

 

$ npm install react-native-linear-gradient --save

$ npm install react-native-vector-icons --save

 

Then we can try to link the project automatically:

$ react-native link react-native-linear-gradient

$ react-native link react-native-vector-icons

 

We can also link these decencies manually, please refer this link   Let's add below code inside SplashScreen.js file

 

import React, {Component} from 'react';

import {

  View,

  StyleSheet,

  Text,

  Image,

  Dimensions,

  TouchableOpacity,

} from 'react-native';

import LinearGradient from 'react-native-linear-gradient';

 

import * as Animatable from 'react-native-animatable';

import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

export default class SplashScreen extends Component {

  render() {

    return (

      

<View style={ss.container}>

        <View style={ss.header}>

          <Image style={ss.logo} source={require('../images/logo.png')} />

        </View>

        <Animatable.View style={ss.footer} animation="fadeInUpBig">

          <Text style={ss.title}>Stay Connected with us</Text>

 

          <Text style={ss.text}>Sign in with account</Text>

          <TouchableOpacity

            onPress={() => {

              alert('click');

            }}>

            <LinearGradient colors={['#08d4c4', '#01ab9d']} style={ss.signIn}>

              <Text style={ss.textSign}>Get Started</Text>

              <MaterialIcons name="navigate-next" color="white" size={20} />

            </LinearGradient>

          </TouchableOpacity>

        </Animatable.View>

      </View>

    );

  }

}

const {height} = Dimensions.get('screen');

const height_logo = height * 0.28;

const ss = StyleSheet.create({

  container: {

    backgroundColor: '#009387',

    flex: 1,

  },

  header: {

    flex: 2,

    justifyContent: 'center',

    alignItems: 'center',

  },

  footer: {

    flex: 1,

    backgroundColor: 'white',

    borderTopLeftRadius: 30,

    borderTopRightRadius: 30,

    paddingVertical: 50,

    paddingHorizontal: 30,

  },

  logo: {

    width: height_logo,

    height: height_logo,

  },

  title: {

    color: '#05375a',

    fontSize: 20,

    fontWeight: 'bold',

  },

  text: {

    color: 'grey',

    marginTop: 5,

  },

  signIn: {

    width: 150,

    height: 40,

    marginTop: 20,

    justifyContent: 'center',

    alignItems: 'center',

    alignSelf: 'flex-end',

    borderRadius: 50,

    flexDirection: 'row',

  },

  textSign: {

    color: 'white',

    fontWeight: 'bold',

  },

});

 

 

Output

React Native SplashScreen

 

FAQs?

 

How to divide screen to two parts in react-native?

With flex box we can divide screen into different parts.

If we want to divide screen in two part we can use below code

 

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>

   <View style={{flex:1, backgroundColor:"green",width:"100%" }}>

   <Text>Welcome</Text>

    </View>

      <View style={{flex:1, backgroundColor:"yellow",width:"100%" }}>

   

    </View>

  </View>

 

 

How to get Screen height and width in React Native?

With Dimensions class we can get device width and height

const deviceWidth = Dimensions.get('window').width;

const deviceHeight = Dimensions.get('window').height;

 

Conclusion: In this React example we learn how to add a splash screen to react native android application.

Tags : react native make a splash screen, splash screen, react native splash screen, react native splash screen android

 


Subscribe For Daily Updates