feat: provide a way to prevent native navigation #801
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
It seems not working now. (I rebased it with latest version) |
|
Yeah, I changed the implementation and added a prop |
|
Then, does this PR compatible with |
|
I haven't yet rebased the PR to the newest master, but it should be compatible with both versions. |
|
It works well on both versions. (It was my problem) react-native-screens+2.18.0.patch |
iOS seems not supporting this feature officially. |
|
Yeah, maybe it is a way to go, but I think it will be left for the users to decide about the custom back button. We expose prop |
WoLewicki
changed the title
|
@WoLewicki wanted to follow up from my comments on the RN discord about this. Do you think this PR will get merged soon? This feature will really improve the UX of forms by asking users if they want to discard unsaved changes. I think it’s totally fair to require a custom back button to implement this behavior. I’m happy to add this to the docs if it would help move the PR along :) If I want to test it, should I just generate a patch from this PR, and then use the thanks! |
|
I added another implementation on |
WoLewicki
commented
Aug 10, 2021
satya164
requested changes
Aug 10, 2021
createNativeStackNavigator/README.md
Outdated
| @@ -85,6 +85,15 @@ String that applies `rtl` or `ltr` form to the stack. On Android, you have to ad | |||
|
|
|||
| Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. Only supported on iOS. | |||
|
|
|||
| #### `enableNativeBackButtonDismissal` (Android only) | |||
There was a problem hiding this comment.
I'd name it nativeBackButtonDismissalEnabled to match the naming patterns of other APIs in React Navigation
satya164
requested changes
Aug 24, 2021
src/native-stack/index.tsx
Outdated
| @@ -11,6 +11,7 @@ export { default as NativeStackView } from './views/NativeStackView'; | |||
| /** | |||
| * Utilities | |||
| */ | |||
| export { default as usePreventDismiss } from './utils/usePreventDismiss'; | |||
There was a problem hiding this comment.
I'd make this part of the screens package
There was a problem hiding this comment.
I’m currently using v5. On web, I use stack navigation, and on ios/android I use native-stack.
Should I use this hook only on native, and then use the typical beforeRemove event listener in an effect on web?
(Once I upgrade to v6 I assume this won’t matter, but it’s going to take me a little bit.)
satya164
reviewed
Aug 25, 2021
satya164
reviewed
Aug 25, 2021
nandorojo
reviewed
Aug 25, 2021
|
Can this be merged in assuming it works? |
trajano
reviewed
Aug 27, 2021
createNativeStackNavigator/README.md
Outdated
| #### `nativeBackButtonDismissalEnabled` (Android only) | ||
|
|
||
| Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it. | ||
| Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there. In order to prevent the dismiss there, you should provide your own back button using `headerLeft`. |
There was a problem hiding this comment.
Is there a Component that we can use to provide the back button with the same stylings as the native one including the chevron and the localized Back text?
trajano
reviewed
Aug 27, 2021
native-stack/README.md
Outdated
| @@ -297,6 +304,58 @@ function Home() { | |||
| } | |||
| ``` | |||
|
|
|||
| #### `usePreventDismiss` (iOS only) | |||
|
|
|||
| A hook to be used in order to prevent the native dismissal options (swipe and default header back button) on iOS. It should be used along with `react-navigation` `beforeRemove` listener to provide the behavior similar to the one in `stack` navigator. Example of usage: | |||
There was a problem hiding this comment.
Should we add a note (assuming it is implemented as follows)
Using this on platforms other than iOS will be a noop.
trajano
reviewed
Aug 27, 2021
native-stack/README.md
Outdated
| @@ -297,6 +304,58 @@ function Home() { | |||
| } | |||
| ``` | |||
|
|
|||
| #### `usePreventDismiss` (iOS only) | |||
There was a problem hiding this comment.
It may be better to use usePreventNativeDismiss since this is specifically to disable native behaviour.
|
A few questions:
What does the behavior look like for gestures here? Does it fully block the ability to swipe? Or does it let you swipe, and then snap the screen back into place if there are unsaved changes? I think the second approach would be ideal, similar to the Native modal.
The docs recommend using What if this PR implemented the
I’m slightly confused by what the option is on the screen. Is that just an added way to prevent Native dismissal? Or do you need to both use the hook and pass the option to each screen? Thanks @WoLewicki @kacperkapusciak! |
|
After consultation with @satya164, we decided to merge only the native part of code for now in order for it to be available in next Expo SDK. The JS part is yet to be decided, probably some generic way to apply navigation preventing via a hook will be exposed. Only part left is the change of default Android back button behavior being now sending an event with dismiss to JS instead of popping the screen natively. |
|
@WoLewicki sounds good, thanks for the update. Let me know if I can help in any way. Will these Native changes also apply to React Navigation v6's Native stack? |
|
After these changes are released, you can use the newest |
kacperkapusciak
approved these changes
Sep 7, 2021
|
Link to @react-navigation issue? |
11 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Updated the behavior of native Android back button to fire an event to JS with
goBack()action instead of triggering navigation on the native side by default. It allows the user to discard the navigation action. Requested in #742.Keep in mind that this can be considered BREAKING CHANGE if you relied on default header back button native dismissal. It can be switched by setting
nativeBackButtonDismissalEnabled: trueon the screen.Unfortunately, there seems to be no way to prevent navigation on iOS default back button clicked.
reverted on the JS side
Instead, the navigation state can be restored after the end of the transition.
Also added the similar abstraction to swipe dismiss and modal dismiss on iOS.
Changes
Added new event
HeaderBackButtonClickedEventwhich is fired when the native Android header back button is clicked andnativeBackButtonDismissalEnabled: false(which is default) is applied (before, clicking this button fired dismiss action on the native side without taking JS navigation into consideration). This event then triggers the same action asdismissevent and can be prevented by user. It makes all the options of navigating back on Android (hw back button, callingnavigation.goBack()and header back button) to behave the same.reverted on the JS side
Added similar abstraction for default native header back button, swipe dismiss and modal dismiss on iOS. It can be cancelled by setting
preventNativeDismiss: truewhich triggersonNativeDismissCancelledcallback. It callsnavigation.popby default and can be overridden by the user.Checklist