How to restart all Navigation screens?

Question

I am making a mobile React Native TypeScript Android and IOS application. I have 5 different screens that have different functionalities according to the user logged in. In the 5th screen, the user can login or logout, and whenever that happens, I want all the screens (including the user screen) to be restarted. How to trigger the @react-navigation/bottom-tabs to restart all their screens?

I'm currently using the react-native-restart package but it has delayed behaviour and it freezes the app for some time in IOS.

Navigation Bar:

import {
    BottomTabNavigationOptions, BottomTabScreenProps, createBottomTabNavigator
} from "@react-navigation/bottom-tabs";
import { NavigationContainer, ParamListBase } from "@react-navigation/native";
import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack";

...

render(): ReactNode {
    const Tab = createBottomTabNavigator<Stacks>(),
            Stack = createNativeStackNavigator<UserScreenStack>();

    return <>
        <NavigationContainer>
            <Tab.Navigator
                initialRouteName="HOME" backBehavior="history"
                screenOptions = {...}
            >

                <Tab.Screen
                    name="HOME"
                    children={(props: BottomTabScreenProps<ParamListBase>): ReactNode => {
                        return <HomePage navigation={props.navigation} />;
                    }}
                />

                <Tab.Screen
                    name="SEARCH"
                    children={(props: BottomTabScreenProps<ParamListBase>): ReactNode => {
                        return <SearchPage navigation={props.navigation} />;
                    }}
                />

                <Tab.Screen
                    name="PRODUCTION"
                    children={(props: BottomTabScreenProps<ParamListBase>): ReactNode => {
                        return <ProductionPage navigation={props.navigation} />;
                    }}
                />

                <Tab.Screen
                    name="SPOTLIGHT"
                    children={(props: BottomTabScreenProps<ParamListBase>): ReactNode => {
                        return <SpotlightPage navigation={props.navigation} />;
                    }}
                />

                <Tab.Screen
                    name="USER"
                    children={(): ReactNode => {
                        return <>
                            <Stack.Navigator initialRouteName="USER.LOGIN" screenOptions={{ headerShown: false }}>
                                <Stack.Screen
                                    name="USER.LOGIN"
                                    children={(props: NativeStackScreenProps<ParamListBase>): ReactNode => {
                                        return <LoginPage navigation={props.navigation} />;
                                    }}
                                />
                                <Stack.Screen
                                    name="USER.PROFILE"
                                    children={(props: NativeStackScreenProps<ParamListBase>): ReactNode => {
                                        return <UserPage navigation={props.navigation} />;
                                    }}
                                />
                            </Stack.Navigator>
                        </>;
                    }}
                />

            </Tab.Navigator>
        </NavigationContainer>
    </>;
}

score 1 · Accepted Answer · answered Jun 27 '23 at 04:23

1

props.navigation.reset({
 index: 0,
 routes: [{ name: 'HOME' }]})

Reset your navigation on logout.

answered Jun 27 '23 at 04:23

Krushita Bhanderi

34
3

How to restart all Navigation screens?

1 Answers1