Search code examples
androidreact-nativebuttonbacknavigator

how to set up Back button for Switch Navigator


I am developing a react native program I am using Switch Navigator inside it. but I want to know how to set up a back button for Switch Navigator. I don't want to use a stack navigator. here is my navigation page code

            import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
            import {createAppContainer } from 'react-navigation';
            import { Transition } from 'react-native-reanimated';
            import React from 'react';

            import Login   from "./Login/Login";
            import SignUp  from './SignUp/SignUp';


            //====================================================

            //====================================================
            const Navigate = createAnimatedSwitchNavigator({


            Login:         {screen:Login},
            SignUp:        {screen:SignUp},

            },
            {
                transition: (
                <Transition.Together>
                    <Transition.Out
                    type="slide-left"
                    durationMs={200}
                    interpolation="easeIn"
                    />
                    <Transition.In type="fade" durationMs={300} />
                    </Transition.Together>
                ),
            }
            )

            export const AppContainer = createAppContainer(Navigate)

Solution

  • "The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away. This is the exact behavior that we want from the authentication flow."

    From React Navigation documentation: https://reactnavigation.org/docs/en/switch-navigator.html

    SwitchNavigator was designed to handle authentication (login, logout and signup). After navigating away from an authentication screen you do not want the user to jump back to that screen. So SwitchNavigator removes that feature. If you want a back button or function use any navigator except for the SwitchNavigator.

    "createAnimatedSwitchNavigator" is identical to createSwitchNavigator except for the animations. So it also does not have a back function.