fix: improve when back button is shown in nested native stacks #10761
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
Currently when a Native Stack is nested in another Stack, it doesn't respect the parent navigation's back stack. This change makes a few adjustments so that if the parent has a back stack: - If the user specifies a custom back button, the `canGoBack` and `label` parameters will now receive the proper data so they can render a back button in nested stack. - If JS stack is nested inside a Native stack, it'll now respect the parent's back stack and show a back button. - On Web, Native stack nested inside or Native or JS stack will show a back button. - On Android, Native Stack nested inside Native stack will show a back button - since the back button is handled natively, we can't make it show when Native Stack is nested inside JS Stack - On iOS, JS stack nested inside Native stack will show a back button - since the back button is handled natively, we can't make it show when Native Stack is nested inside JS or Native Stack (see software-mansion/react-native-screens#1460) starting # with '#' will be ignored, and an empty message aborts the commit.
❌ Deploy Preview for react-navigation-example failed.
|
|
The Expo app for the example from this branch is ready! expo.dev/@react-navigation/react-navigation-example?release-channel=pr-10761 |
kacperkapusciak
approved these changes
Aug 18, 2022
DrOverbuild
added a commit
to DrOverbuild/react-navigation
that referenced
this pull request
Sep 15, 2022
Unfortunately the changes from react-navigation#10761 caused an issue I reported on the react-native-screens repo. (See software-mansion/react-native-screens#1589) Essentially, the documentation states that per native behavior, the back button on iOS will automatically use the title of the previous screen or "Back" if there's not enough space. However, with the latest version of react-navigation, the back button was the title of the previous screen no matter what. In some cases, this caused the title of the current screen to be completely pushed off the screen. In UIKit this happens when the title of the back button is deliberately set, or when a custom UIBarButtonItem is set as the back button. `react-native-screens` creates a custom UIBarButtonItem when the header config component has a value defined for `headerBackTitle`. So by leaving headerBackTitle undefined here, we let the system automatically determine what to set as the back button title. In my testing, system will choose the correct value even if the previous screen's `title` or `headerTitle` is set differently from the route name.
satya164
pushed a commit
that referenced
this pull request
Sep 15, 2022
Unfortunately the changes from #10761 caused an issue I reported on the react-native-screens repo. (See software-mansion/react-native-screens#1589) Essentially, the documentation states that per native behavior, the back button on iOS will automatically use the title of the previous screen or "Back" if there's not enough space. However, with the latest version of react-navigation, the back button was the title of the previous screen no matter what. In some cases, this caused the title of the current screen to be completely pushed off the screen. In UIKit this happens when the title of the back button is deliberately set, or when a custom UIBarButtonItem is set as the back button. `react-native-screens` creates a custom UIBarButtonItem when the header config component has a value defined for `headerBackTitle`. So by leaving headerBackTitle undefined here, we let the system automatically determine what to set as the back button title. In my testing, system will choose the correct value even if the previous screen's `title` or `headerTitle` is set differently from the route name.
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.
Currently when a Native Stack is nested in another Stack, it doesn't respect the
parent navigation's back stack. This change makes a few adjustments so that if
the parent has a back stack:
canGoBackandlabelparameters will now receive the proper data so they can render a back button in
nested stack.
back stack and show a back button.
button.
since the back button is handled natively, we can't make it show when Native
Stack is nested inside JS Stack
back button is handled natively, we can't make it show when Native Stack is
nested inside JS or Native Stack (see
Header back button missing when navigating from root to a nested stack where root-stack has
headerShownset to false software-mansion/react-native-screens#1460)Before
Screen.Recording.2022-08-17.at.03.29.14.mov
After
Screen.Recording.2022-08-17.at.03.30.20.mov