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
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
Ruby program to add two integer numbers
how to create an array with Array.[](*args) in Ruby ?
What are the various Ruby runtimes, and how are they different?
Ruby program to check whether the given number is prime or not
Ruby program to reverse a string
Ruby program to check whether the given number is palindrome
Ruby program to print Fibonacci series
How to Replace array elements in Ruby?
Ruby program to print an array
Ruby program to check whether the given number is Armstrong
Program to Print Triangle of Numbers in Ruby
How to add/remove elements to Array in Ruby?
How to shuffle an array in Ruby?
Creating Array with Array.new(size, obj) in Ruby
Ruby program to generate random numbers
Ruby program to Calculate the factorial of given number
What are #method_missing and #send? Why are they useful?
How to Sort Array in Ruby?
How to get index of array element in Ruby
How to Get Input with Gets in Ruby
How to create two dimensional array in ruby?
Reat Native Google Maps integration