How to add splashscreen? - react-native

Question

I want to add a splashscreen to my code before the HomeScreen comes.
This is my new Splashscreen.js file
import React from 'react';
import { StatusBar, View, Text, ActivityIndicator } from 'react-native';
import HomeScreen from './screens/HomeScreen.js';
export default class SplashScreen extends React.Component {
render() {
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#34495e'}}>
<StatusBar backgroundColor="#2c3e50" barStyle="light-content" />
<Text style={{ color: 'white', fontSize: 18}}>WELCOME</Text>
<ActivityIndicator color={'white'} />
</View>,
);
}
}
This is my new App.js file
import React, {Component} from 'react';
import { Keyboard, Alert } from 'react-native';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import HomeScreen from './screens/HomeScreen.js';
/** Importing navigator */
import AppDrawerNavigator from './drawerNavigator';
/** Redux **/
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import SplashScreen from './screens/SplashScreen.js';
const initialState = {
username: null,
password: null,
};
const reducer = (state=initialState, action) => {
if(action.type) {
console.log('NEW',action.name);
}
return {state, username: action.name, password: action.pass};
}
const store = createStore(reducer);
class App3 extends React.Component {
componentWillMount() {
this.state = {
view: <SplashScreen />
};
setTimeout(() => {
this.setState({
view: <HomeScreen />
})
}, 2000)
}
render() {
return (
// this.state.view,
<Provider store = {store}>
<AppContainer />
</Provider>
);
}
}
export default App3;
const AppStackNavigator = createStackNavigator(
{
Home: {
screen: HomeScreen
},
Welcome: {
screen: AppDrawerNavigator
}
},
{
initialRouteName: 'Home',
headerMode: "none",
}
);
const AppContainer = createAppContainer(AppStackNavigator);
If you want to check my other screens and files you can check this link.
I want to add the splashscreen file I created to my existing code without affecting the exisiting functionality. I want to achieve the following things:
Open application
Show splashscreen for a sec.
Go to login screen if not logged in before otherwise go to Welcomescreen directly from splashscreen

Answer 1

I would recommend you to take a look at Spencer Cali medium article. It covers adding a splash screen for RN apps step by step. How to Add a Splash Screen to a React Native App (iOS and Android)

Answer 2

For react-native you do not need to create file for splash screen.
just follow bellow package for splash screen i suggest you that is very good library with lots of users and yes i'm always prefer this library for splash screen.
you just need to create image for the splash screen whatever you want to show upon user on initial.
react-native-splash-screen
you may find all detail here and follow it step by step it will help you.
it always help for me!

Answer 3

Splash screen and loading screen are different. The splash screen is shown when application is open from termination status.
After that, some applications show loading screens for processing background logics as like checking user signin, get datas and so on.
In you case, you looks to show loading screen for authentication flows.
Use this ways.
React Navigation Auth flows
This flow is as below.
Show loading screen and check the user auth
navigate to another screen according to auth result.
if (loggedIn) { this.props.navigation.navigate('SignUpScreen') }
else { this.props.navigation.navigate('HomeScreen') }
Happy!
And if you want to use splash screen, not loading screen, I recommend to use rn-toolbox.