EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Native Splash Screen

By Rahul DubeyRahul Dubey

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Native Splash Screen

React Native Splash Screen

Introduction to React Native Splash Screen

Splash Screen can be defined as a graphical control element that consists of a window that consists of the current version of the software, a logo, and an image. A splash screen is majorly seen when a particular program or a game is launching and it is even used when an application or website need essential information before it get started. A splash page can be said as an introduction on an application or a website. The Splash Screen automatically gets hidden after few seconds from the display screen and will appear again when the application will start again. The below images shows where can find splash screens in day to day life. These are the examples of Google Play Music, Google Maps, Gmail, Google Photos.

React Native Splash Screen - 1

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

React Native Splash Screen - 2

Syntax of Installing

Below is the syntax to install:

Using Yarn

yarn add react-native-splash-screen

Using NPM

npm install react-native-splash-screen

Syntax of importing components

import { StyleSheet, Platform, TouchableOpacity, Image, View, Text, Alert } from 'react-native';

How to create Splash Screen in React Native?

Below are still learn to create Splash Screen with examples:

1. Simple Splash Screen with React Native logo image in iOS platform

Code:

import React, { Component } from 'react';
import { StyleSheet, Platform, TouchableOpacity, Image, View, Text, Alert
} from 'react-native';
export default class Myapp extends Component<{}>
{
constructor(){ super(); this.state={ isVisible : true,
}
}
Hide_Splash_Screen=()=>{ this.setState({
isVisible : false
});
}
componentDidMount(){ var that = this;
setTimeout(function(){ that.Hide_Splash_Screen();
}, 5000);
}
render()
{
let Splash_Screen = (
<View style={styles.SplashScreen_RootView}>
<View style={styles.SplashScreen_ChildView}>
<Image source={{uri:'https://static.javatpoint.com/tutorial/react- native/images/react-native-tutorial.png'}}
style={{width:'100%', height: '100%', resizeMode:
'contain'}} />
</View>
</View> )
return(
<View style = { styles.MainContainer }>
<Text style={{textAlign: 'center',width: '100%'
,backgroundColor: '#fc8bef'}}> Example of Simple Splash Screen</Text>
{
(this.state.isVisible === true) ? Splash_Screen : null
}
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0
},
SplashScreen_RootView:
{
justifyContent: 'center',
flex:1,
margin: 10,
position: 'absolute', width: '100%',
height: '100%',
},
SplashScreen_ChildView:
{
justifyContent: 'center', alignItems: 'center', backgroundColor: '#fcf52b', flex:1,
},
});

Output:

Logo splashes a new page

Explanation: Here in Image 1 and Image 2 we can see the output of the above code and how Splash Screen works in React Native. The React Native Logo splashes a new page. This is the most simple example to understand Splash Screen, i.e. text appears.

2. Animated Splash Screen in React Native

Code:

import React, { Component } from 'react';
import {View, Image, Text } from 'react-native';
export default class App extends Component { constructor() {
super(); this.state = {
animating: false, align: 'center', alignsecond: false,
};
setTimeout( () =>
this.setState({ align: 'flex-start' }, function() { this.setState({
alignsecond: true,
});
}), 3000
);
}
render() { return (
<View
style={{ flex: 1,
alignItems: 'center', flexDirection: 'row', justifyContent: this.state.align, marginHorizontal: 40,
}}>
<Image
source={{ uri:
'https://raw.githubusercontent.com/AboutReact/sampleresource/master/react_l ogo.png',
}}
style={{ width: 100, height: 100 }}
/>
{!this.state.alignsecond ? null : (
<View style={{ margin: 10 }}>
<Text
style={{ color: '#092c96', fontSize: 25, fontWeight: 'bold'
}}>
Welcome to React Native Mobile Application
</Text>
</View>
)}
</View>
);
}
}

Output:

logo comes first and then comes the text

Explanation: Here in Image 1 and Image 2 we can see a slight animation in which the logo comes first and then comes the text.

3. Splash screen of app uploading

Code:

import React from 'react';
import { View, Text } from 'react-native';
class SplashScreen extends React.Component { performTimeConsumingTask = async() => {
return new Promise((resolve) => setTimeout(
() => { resolve('result') }, 2000
)
)
}
async componentDidMount() {
const data = await this.performTimeConsumingTask();
if (data !== null) { this.props.navigation.navigate('App');
}
}
render() { return (
<View style={styles.viewStyles}>
<Text style={styles.textStyles}> Welcome to the application
</Text>
</View>
);
}
}
const styles = { viewStyles: {
flex: 1,
alignItems: 'center', justifyContent: 'center', backgroundColor: '#79ff26'
},
textStyles: {
color: '#ff4824', fontSize: 50, fontWeight: 'italic'
}
}
export default SplashScreen;

Outputs:

React Native Splash Screen - 5

React Native Splash Screen - 6

React Native Splash Screen - 7

disappear in the particular mobile

Explanation: All the 7 four images below shows how splash screen arrives and disappear in the particular mobile application.

 4. Simple Splash Screen with a Simple image in Android platform.

 Code:

import React, { Component } from 'react';
import { StyleSheet, Platform, TouchableOpacity, Image, View, Text, Alert
} from 'react-native';
export default class Myapp extends Component<{}>
{
constructor(){ super(); this.state={ isVisible : true,
}
}
Hide_Splash_Screen=()=>{
this.setState({ isVisible : false
});
}
componentDidMount(){ var that = this;
setTimeout(function(){ that.Hide_Splash_Screen();
}, 5000);
}
render()
{
let Splash_Screen = (
<View style={styles.SplashScreen_RootView}>
<View style={styles.SplashScreen_ChildView}>
<Image source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/m aster/react_logo.png'}}
style={{width:'100%', height: '100%', resizeMode:
'contain'}} />
</View>
</View> )
return(
<View style = { styles.MainContainer }>
<Text style={{textAlign: 'center',width: '100%'
,backgroundColor: '#36fffc'}}> The screen came earlier shows a Splash Screen</Text>
{
(this.state.isVisible === true) ? Splash_Screen : null
}
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: 'center', alignItems: 'center',
paddingTop: ( Platform.OS === 'android' ) ? 10 : 0
},
SplashScreen_RootView:
{
justifyContent: 'center', flex:1,
margin: 20,
position: 'absolute', width: '100%',
height: '100%',
},
SplashScreen_ChildView:
{
ustifyContent: 'center', alignItems: 'center', backgroundColor: '#c2ff29',
flex:1,
},
});

Output:

before actual content

Explanation: Both Image 1 and Image 2 below show how splash screen arrives before actual content in the particular android mobile application.

Conclusion

In our daily life, we open multiple applications day in day out. We see some information, some picture or some commands displayed when we open up an application and in this article we have explained you how it works and how to create them according to our requirements. These are called Splash Screen and it is also very much important for every application, so that the application can have a good interaction with the user. In this article, we came across different examples of Splash Screen like Simple Splash Screen in logo image, Animated Splash Screen in React Native, Splash Screen on Application Uploading, Splash Screen on android Mobile Application which can give you some good idea about Splash Screen in React Native.

Recommended Articles

This is a guide to React Native Splash Screen. Here we discuss an introduction, and examples to implement with codes and outputs. You can also go through our other related articles to learn more –

  1. React Native Progress Bar
  2. React Native Animation
  3. react native dropdown
  4. React Native Search Bar

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Component Lifecycle
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native Element
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React State Management
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Linking
    • React Native DatePicker
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native Fonts
    • React Native Overlay
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Dispatcher
    • React Native Redux
    • React JSX
    • React native keyboardavoidingview
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native UUID
    • React Native Geolocation
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Native TypeScript
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) Learn More