-
-
Notifications
You must be signed in to change notification settings - Fork 529
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: do not force set translucent
nav bar (until it's explicitly specified)
#2301
fix: do not force set translucent
nav bar (until it's explicitly specified)
#2301
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kirillzyusko Thanks for the PR. I could not achieve the grey stripe at the bottom of the screen while trying to reproduce it, but I believe I can understand the problem.
I have following concerns:
-
With the proposed solution edge-to-edge content mode in a native stack won't change until we encounter a screen with this option set to
false
and then it won't change until we encounter a screen with this option set totrue
. The screens in between would then have different layout depending on the navigation history, which is undesired. -
The JS stack navigator does not enable this option and with proposed solution we are able to change it by setting it in the nested native stack.
I think we should seek another approach to fixing your problem as we want the navigationBarTranslucent
to be false
by default. The example below demonstrates how setting the options only in Nested Second
screen affects other screens and the root JS stack.
navigationBarTranslucent: true,
navigationBarColor: 'transparent',
Screen.Recording.2024-08-19.at.11.24.43.mov
Okay @alduzy I see Well, the problem actually comes from the fact, that before I used But starting from But what if I enable edge-to-edge mode globally in my app and I don't want to disable it when I go to nested stack navigator?.. (but just want to change |
@kirillzyusko prior to #2152 it was impossible to draw behind the navigation bar (for some time at least, more info in the PR's description). You probably shouldn't use Btw.
|
It doesn't work, because That was the idea behind my fix - if it's
This is what I don't understand fully yet, but:
Based on your words I assume the correct behavior would be to specify
Ignore that, I found it: if (didSetNavigationBarAppearance) {
setNavigationBarColor(screen, activity)
setNavigationBarTranslucent(screen, activity)
setNavigationBarHidden(screen, activity)
} So it looks like if we set any of three properties: Curious to know what is the correct fix in this case then 🤔
Many packages moves the app to edge-to-edge mode globally, for example In my case I simply mount |
@kirillzyusko Ok I see I'm trying to think of a solution that doesn't introduce the problems I mentioned earlier. I've just now discovered, that the Thus I'm starting to lose my objection to your proposal, as it's kind of consistent to have it this way 😄 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Despite my initial concerns about the proposal, it now appears consistent with the other options. I think we can proceed.
## 📜 Description Update RN to latest release to get rid off patches & workarounds. ## 💡 Motivation and Context Simply bumped RN version: - removed unused patch for RN; - removed patch for `react-navigation`; - added patch for RNS software-mansion/react-native-screens#2301 ## 📢 Changelog <!-- High level overview of important changes --> <!-- For example: fixed status bar manipulation; added new types declarations; --> <!-- If your changes don't affect one of platform/language below - then remove this platform/language --> ### JS - updated RN to latest version; - removed patches; - removed unnecessary `navigationBarTranslucent` option; ### E2E - update RN KeyboardAvoidingView assets 🤷♂️ ## 🤔 How Has This Been Tested? Tested on CI ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
@@ -225,7 +225,11 @@ object ScreenWindowTraits { | |||
val window = activity.window | |||
|
|||
val screenForNavBarTranslucent = findScreenForTrait(screen, WindowTraits.NAVIGATION_BAR_TRANSLUCENT) | |||
val translucent = screenForNavBarTranslucent?.isNavigationBarTranslucent ?: false | |||
val translucent = screenForNavBarTranslucent?.isNavigationBarTranslucent |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually it can be collapsed into one line:
val translucent = screenForNavBarTranslucent?.isNavigationBarTranslucent ?: return
Let me know if you are okay with these changes and I'll rework the code
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wouldn't it return when translucent
is false
too then?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think safe-operator + elvis operator will execute "else" only if predicate is null (not false)
At least Android studio offers such refacoring + according to the docs it looks like it's indeed truth: https://kotlinlang.org/docs/null-safety.html#elvis-operator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok so if you could check if it really works that way (seems counterintuitive to me 😅 ) than I'm okay with it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@WoLewicki I double checked and it works as expected - false/trues passed down, but null
is filtered out 👍
Below is the image from Android Studio that offered refactoring 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If it works as we would want it to work then I'm OK with it
Are we waiting for a review from @tboba ? 👀 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nah, let's proceed 😄
Does anything prevent this from being merged? 👀 |
@kirillzyusko Nah, I thought you could do that and I was waiting if you could have anything more to commit here 😄 |
…ecified) (software-mansion#2301) ## Description I have next navigator structure: - JS - native-stack `native-stack` navigator customizes options as: ```ts { headerShown: false, statusBarTranslucent: true, navigationBarColor: "#FFFFFF", navigationBarTranslucent: true, }, ``` When I go to `native-stack` - everything works well: the nav bar changes color. However, when I go back, then I'm getting a gray space in the bottom of my screen. It happens because we disable mode `edge-to-edge` by calling `WindowCompat.setDecorFitsSystemWindows(window, true)` (the gray space appears because before we were already in edge-to-edge mode, because I had `KeyboardProvider` mounted in `App.tsx`). So to fix this problem I decided explicitly check for boolean value for `navigationBarTranslucent` and set `decorFitsSystemWindows` only when we have an actual boolean value. If you think that it's a problem in my project, then, please, let me know the way to fix it 😊 ## Changes - call `WindowCompat.setDecorFitsSystemWindows(window, true)` only if `isNavigationBarTranslucent` has a boolean value; ## Screenshots / GIFs ### Before ![telegram-cloud-photo-size-2-5321328488650760881-y](https://github.com/user-attachments/assets/4c1ef654-3146-44bd-aa00-6a810c2aa0aa) ### After ![telegram-cloud-photo-size-2-5321328488650760882-y](https://github.com/user-attachments/assets/7920cf2c-e5b7-46e9-bb75-a581ce2dab2a) ## Test code and steps to reproduce I tested in `react-native-keyboard-controller` example app, but if you need to test it in your code - let me know, and I'll try to prepare a reproduction code. ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation: <!-- For adding new props to native-stack --> - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes
…ecified) (#2301) ## Description I have next navigator structure: - JS - native-stack `native-stack` navigator customizes options as: ```ts { headerShown: false, statusBarTranslucent: true, navigationBarColor: "#FFFFFF", navigationBarTranslucent: true, }, ``` When I go to `native-stack` - everything works well: the nav bar changes color. However, when I go back, then I'm getting a gray space in the bottom of my screen. It happens because we disable mode `edge-to-edge` by calling `WindowCompat.setDecorFitsSystemWindows(window, true)` (the gray space appears because before we were already in edge-to-edge mode, because I had `KeyboardProvider` mounted in `App.tsx`). So to fix this problem I decided explicitly check for boolean value for `navigationBarTranslucent` and set `decorFitsSystemWindows` only when we have an actual boolean value. If you think that it's a problem in my project, then, please, let me know the way to fix it 😊 ## Changes - call `WindowCompat.setDecorFitsSystemWindows(window, true)` only if `isNavigationBarTranslucent` has a boolean value; ## Screenshots / GIFs ### Before ![telegram-cloud-photo-size-2-5321328488650760881-y](https://github.com/user-attachments/assets/4c1ef654-3146-44bd-aa00-6a810c2aa0aa) ### After ![telegram-cloud-photo-size-2-5321328488650760882-y](https://github.com/user-attachments/assets/7920cf2c-e5b7-46e9-bb75-a581ce2dab2a) ## Test code and steps to reproduce I tested in `react-native-keyboard-controller` example app, but if you need to test it in your code - let me know, and I'll try to prepare a reproduction code. ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation: <!-- For adding new props to native-stack --> - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes (cherry picked from commit ee7915f)
Description
I have next navigator structure:
native-stack
navigator customizes options as:When I go to
native-stack
- everything works well: the nav bar changes color. However, when I go back, then I'm getting a gray space in the bottom of my screen.It happens because we disable mode
edge-to-edge
by callingWindowCompat.setDecorFitsSystemWindows(window, true)
(the gray space appears because before we were already in edge-to-edge mode, because I hadKeyboardProvider
mounted inApp.tsx
).So to fix this problem I decided explicitly check for boolean value for
navigationBarTranslucent
and setdecorFitsSystemWindows
only when we have an actual boolean value.If you think that it's a problem in my project, then, please, let me know the way to fix it 😊
Changes
WindowCompat.setDecorFitsSystemWindows(window, true)
only ifisNavigationBarTranslucent
has a boolean value;Screenshots / GIFs
Before
After
Test code and steps to reproduce
I tested in
react-native-keyboard-controller
example app, but if you need to test it in your code - let me know, and I'll try to prepare a reproduction code.Checklist