From ee7915f2c92157368029187c16fc313a6f6ab28b Mon Sep 17 00:00:00 2001
From: Kirill Zyusko <zyusko.kirik@gmail.com>
Date: Mon, 2 Sep 2024 10:28:12 +0200
Subject: [PATCH] fix: do not force set `translucent` nav bar (until it's
 explicitly specified) (#2301)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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
---
 .../src/main/java/com/swmansion/rnscreens/ScreenWindowTraits.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenWindowTraits.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenWindowTraits.kt
index cbdb5478df..37aefe87b5 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenWindowTraits.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenWindowTraits.kt
@@ -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)