Home / Questions / 414155
Accepted
Valentina
Asked: 2021-12-13 17:59:36 +0800 CST 2021-12-13 17:59:36 +0800 CST

How to create a screen splash based on background color plus logo when opening the application?

  • 772

I have the following structure, which allows me to create a loading before displaying the content of the App:

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Splash from './Splash';

export default class App extends React.Component {
    
    state = {
        loaded: false
    }
    constructor() {
        super();
        Splash.load(v => this.setState({loaded: true}));
    }

    render() {
        return(
        <View style={styles.container}>
            {this.state.loaded ? <Text>Welcome!</Text> : <Text>Loading...</Text>}
        </View>
        )
    }
}

Splash.js

export default class Splash {
    static load(cb){
        setTimeout(cb, 3000);
    }
}

What I want is to show a background color plus the logo when opening the application and after a few x seconds the content is displayed.

This is what I want to achieve:

When opening the app: enter image description here

After show content/information:

enter image description here

Based on the approach of my code that changes I must use, I am sure that they are some small changes that unfortunately I cannot find an example on the web to be able to achieve it.

react-native

1 Answers

  1. Best Answer

    The best way to implement a Splash Screen is using React-Navigation since by using this we can manage which view we can put first and then in the same way in all the respective navigation of the app

    First, if you don't have React navigation, install it as follows

    npm install @react-navigation/native

    Y

    expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

    Finally for the example we are going to use the Stack type navigation for which we need to install the following library as well

    npm install @react-navigation/stack

    We are going to start to approach it by creating 2 views, Splash.js and Menu.js and then in the App.js import them and show them

    in Splash you put this

    import React from 'react';
import { StyleSheet,Image, View } from 'react-native';


export default class Splash extends React.Component {
  
goToScreen(routeName){
  this.props.navigation.navigate(routeName)
}

componentDidMount(){

  setTimeout( () => {
    this.goToScreen('Menu')
  }, 2000, this)//2000 hace referencia al tiempo, eso lo puedes cambiar a tu gusto
}

  render(){
  return (  
    <View style={styles.container}>
      <Image source = { require('./RutaDeLaImagen' ) }/>
    </View>
    
  );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#33B747',
    alignItems:"center",
    justifyContent:"center",
  
  }
});

    Then in the Menu view

    import React from 'react';
import { StyleSheet,View,Text } from 'react-native';


export default class Menu extends React.Component {


render(){
return (  
    <View style={styles.container}>
        <Text>Menu</Text>
    </View>
    
);
}
}
const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#FFF',
    alignItems:"center",
    justifyContent:"center",

}
});

    Finally in App.js we would have to import Splash and Menu, create the navigation

    import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet, Text, View, TouchableOpacity, Button } from 'react-native';
import Splash from './screens/Splash';
import Menu from './screens/Menu';

const Stack = createStackNavigator();
export default class App extends React.Component{

    render(){
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Splash" component={Splash} options={{headerShown:false}}/>
                    <Stack.Screen name="Menu" component={Menu}/>
        </Stack.Navigator>
            </NavigationContainer>
        );      
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    }
});

    If you notice within <Stack.Navigator>I put the Splash first, this is done so that it is the first view in renders

    That would be it, you should keep in mind to change the paths of the image and the app.js imports depending on the file structure of your project

    If I miss any mistake I apologize, I did it without trying

    Cheer up, keep learning and filling yourself with new things

    • 1