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 {







} 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')} />


        <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>


            onPress={() => {



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

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

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








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',






React Native SplashScreen




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%" }}>



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






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 screensplash screenreact native splash screen, react native splash screen android


Subscribe For Daily Updates