0

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

farooq alam96
  • 55
  • 1
  • 6

2 Answers2

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.

13KZ
  • 1,295
  • 5
  • 24
  • 43
  • Yes, I am using it like this..... I know if add headerBackTitleVisible: false, then back arrow will remove, but my requirement is that when I click on back arrow need some action then go Back – farooq alam96 Oct 06 '22 at 14:42
0

enter image description here

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

farooq alam96
  • 55
  • 1
  • 6