Question 34375 in React native Question posted in
The official React Native documentation can be found here.

add validation on Press Tab Bar back button i-e: navigation.goBack() event in react native

as per requirement I need to stop the user to go back on some of the validation, through the device back now I stopped but how can I stop when the user clicks on the status bar back icon…
plz guide me thanks…
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    enter image description here

    This is my stack, in this specific stack I need to add handle back action


  2. 0

    Are you using un stack navigator to declare all your stack screens ?
    Below, an example of a stack screen with options

    <Stack.Screen
        name="EditProfile"
        component={EditProfileScreen}
        options={{
          headerTitle: 'Profile',
          headerTitleAlign: 'center',
          headerStyle: {
            backgroundColor: '#fff',
            shadowColor: '#fff',
            elevation: 0,
          },
          headerLeft: () => {
            return (
              <TouchableOpacity onPress={() => console.log('click')}>
                <View
                  style={{
                    width: 30,
                    height: 30,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <FontAwesomeIcon color={'red'} icon={faArrowLeft} />
                </View>
              </TouchableOpacity>
            );
          },
        }}
      />

    Login screen with Login as name and options. You can navigate to LoginScreen with navigation.navigate("Login"). This screen has a header with a title and a back button handled automatically.

    EDIT
    Just add a headerLeft which contains a touchableopacity with an arrow left icon.
    You will handle the back press on touchableopacity onpress props.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search