Skip to content

Commit

Permalink
fix: do not force set translucent nav bar (until it's explicitly sp…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
kirillzyusko authored and ja1ns committed Oct 9, 2024
1 parent babd9ef commit 9e7abfa
Showing 1 changed file with 1 addition and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ object ScreenWindowTraits {
val window = activity.window

val screenForNavBarTranslucent = findScreenForTrait(screen, WindowTraits.NAVIGATION_BAR_TRANSLUCENT)
val translucent = screenForNavBarTranslucent?.isNavigationBarTranslucent ?: false
val translucent = screenForNavBarTranslucent?.isNavigationBarTranslucent ?: return

// Following method controls whether to display edge-to-edge content that draws behind the navigation bar
WindowCompat.setDecorFitsSystemWindows(window, !translucent)
Expand Down

0 comments on commit 9e7abfa

Please sign in to comment.