Resetting the navigation stack for the home screen (React Navigation and React Native)

Question

I\'ve got a problem with the navigation of React Navigation and React Native. It is about resetting navigation and returning to the home screen.

I\'ve build a StackN

Answer 1

In React Navigation Versions 5.x

You can use StackActions.replace in this version

import { StackActions } from '@react-navigation/native';


navigation.dispatch(
    StackActions.replace('Home', { test: 'Test Params' })
)

‌

Full Example: (Available in Snack)

import * as React from 'react';
import { View, Button, Text } from 'react-native';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function SplashScreen({ navigation }) {
  return (
    
      SPLASH SCREEN!
      
          navigation.dispatch(
            StackActions.replace('Home', { test: 'Test Params' })
          )
        }
      />
      
      
          navigation.dispatch(StackActions.push('Home', { test: 'Test Params' }))
        }
      />
    
  );
}

function HomeScreen({ navigation, route }) {
  return (
    
      Home Screen!

      {route.params.test}

       navigation.dispatch(StackActions.pop(1))} 
      /> 
      
      
          navigation.dispatch(StackActions.push('Home', { test: 'Test Params' }))
        }
      />
      
       navigation.dispatch(StackActions.popToTop())}
      />
    
  );
}

const Stack = createStackNavigator();

export default function App() { 
  return (
    
      
        
        
      
    
  );
}