question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React Navigation preventDefault() does not work with beforeRemove listener when using createNativeStackNavigator

See original GitHub issue

Description

preventDefault() does not work with beforeRemove listener when using createNativeStackNavigator when header back button is pressed. However, it works properly using the Android back button. Not sure if this is a react-navigation or react-native-screens bug since it works in some cases.

React Navigation Issue

Steps To Reproduce

I have used the “Preventing going back” React Navigation code example and modified it to use createNativeStackNavigator. This causes the Alert to appear after the navigation is complete when clicking the back button in the header.

Snack

Expected behavior

preventDefault() prevents the navigation for all methods of navigating.

Actual behavior

preventDefault() does not prevent navigation when pressing the header back button.

Package versions

  • React: 16.13.1
  • React Native: 0.63.3
  • React Native Screens: 2.15.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:18 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
darron1217commented, Feb 5, 2021

@WoLewicki Wow that’s great work. I really appreciate your efforts. I’ll check it 😃

0reactions
WoLewickicommented, Apr 12, 2022

@CanRau there is a PR in react-navigation concerning this: https://github.com/react-navigation/react-navigation/pull/10354.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preventing going back - React Navigation
You can achieve it by using the beforeRemove event. The event listener receives the action that triggered it. You can dispatch this action...
Read more >
Remove screen which prevented by `beforeRemove` listener ...
action will provided when beforeRemove triggered. I googled a lot subjects but got nothing, even on official React Navigation 6.x documentation.
Read more >
React Native Navigation: Tutorial with examples
In this React Native Navigation tutorial, we'll show you some examples of navigation patterns you can implement with React Navigation.
Read more >
createMaterialTopTabNavigator - React Navigation - Netlify
API Definition. To use this tab navigator, import it from @react-navigation/material-top-tabs :.
Read more >
How to navigate to a screen on back button press in React ...
How do I use React Navigation to navigate to a new screen outside of the render function, and not using JSX? How to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found