splash screen react native

Question

I'm starting an app and I have two views at the moment, one called Splash and the other called Home. It happens that when the splash is over it leads me to the Home view, but in this view the user presses the button backwards, the app shows me the splash again. Is there a way to avoid this? the idea is that being in the Home view there is no way to roll back the application.

MainStackNavigator.js

import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import Splash from '../views/Splash/Splash';
import Home from '../views/Home/Home';

const Stack = createStackNavigator()

function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Splash' component={Splash} options={{ headerShown: false}} />
        <Stack.Screen name='Home' component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default MainStackNavigator

Splash.js

import React, { Component } from 'react'
import { View, ImageBackground, Image } from 'react-native'

// import SplashContext from '../../state/splashContext'

var bg = require('../../../assets/img/bg.png');
var logo = require('../../../assets/img/logo.png')

export default class Splash extends Component {  
 
    constructor(props) {
        super(props);
        setTimeout(() => {
            this.props.navigation.navigate("Home");    
        }, 500)    
    }    
    render() {
        return (
            <ImageBackground
                source={bg}
                style={{ height: '100%', width: '100%' }}>
                <View
                    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={logo}
                        style={{ height: 100, width: 100 }}
                    >
                    </Image>
                </View>
            </ImageBackground>    
        );
    }    
}

Home.js

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

export default class Splash extends Component {
    render() {
        return (
            <View
                style={{ flex: 1, padding: 10, alignItems: 'center', justifyContent: 'center' }}
            >
                <Text
                    style={{ fontSize: 30 }}
                >Homse</Text>
            </View>    
        );
    }    
}

App.js

import React from 'react';
import MainStackNavigator from './src/navigation/MainStackNavigator'
const App: () => React$Node = () => {
  return (
   <MainStackNavigator></MainStackNavigator>
  );
};

export default App;

Answer 1

Using "navigate" will go to the next page adding it to the stack navigator. Instead you want to replace the current page (splash screen) with the home page. This can be done using the replace function

this.props.navigation.replace("Home");  

See https://reactnavigation.org/docs/navigation-prop/

Answer 2

You could use a modal to show the splash on the same screen while the information is loading instead of having two different views. Have a "loading" variable in the state of the view initialized to "true". This variable will be the "visibility" boolean for your modal. After everything loads, change the "loading" variable to "false".

Here's an example with "useState" hook:

const [isLoading, setIsLoading] = useState(true);
const loadInfo = async () => {
   /*do your stuff*/
   /*after stuff's done*/
   setIsLoading(false);
};
if (isLoading) {
    return (
        <MySplashScreenModal/>
    );
} else {
    return (
        <MyHomeScreen/>
    );
}

The main reason for using the modal is because you can cover the entire screen with it, including the status bar.