feat(Android): added navigationBarTranslucent option (software-mansion#2152)

## Description

Once upon a time there was an
[issue](software-mansion#1719)
regarding navigation bar. The problem was that the background color set
to the navigation bar covered the content behind, see examples:

<table>
<tr>
<th>navigationBarColor: 'transparent'</th>
<th>navigationBarColor: 'yellow'</th>
</tr>
<tr>
<td>

![Screenshot 2024-05-22 at 10 33
28](https://github.com/software-mansion/react-native-screens/assets/91994767/eb3ea5a5-4617-4547-a052-ab0612872697)

</td>
<td>

![Screenshot 2024-05-22 at 10 34
08](https://github.com/software-mansion/react-native-screens/assets/91994767/805fa199-b90c-40aa-9ef5-b5ab8abef71a)

</td>
</tr>
</table>

Then [PR
1988](software-mansion#1988)
solved the issue, but introduced another problem: sometimes it may be
intended to have content behind the navigation bar.

<table>
<tr>
<th>navigationBarColor: 'transparent' after PR 1988</th>
<th>navigationBarColor: 'transparent' before PR 1988</th>
</tr>
<tr>
<td>

![Screenshot 2024-05-21 at 13 00
23](https://github.com/software-mansion/react-native-screens/assets/91994767/76ec2fa1-e212-4725-a1da-32bcf8c5eb84)

</td>
<td>

![Screenshot 2024-05-21 at 13 07
19](https://github.com/software-mansion/react-native-screens/assets/91994767/8fa15e57-7168-4fec-b8e7-3cce29eeebdc)

</td>
</tr>
</table>

This PR intents to add a new screen option, enabling navigation bar
translucency control, so that the developers can decide if they want to
show content behind the navigation bar independently.

Fixes software-mansion#2122 software-mansion#1719

## Changes

- added navigationBarTranslucent option

## Test code and steps to reproduce

<!--
Please include code that can be used to test this change and short
description how this example should work.
This snippet should be as minimal as possible and ready to be pasted
into editor (don't exclude exports or remove "not important" parts of
reproduction example)
-->

## Checklist

- [ ] Included code example that can be used to test this change
- [ ] Updated TS types
- [ ] Updated documentation: <!-- For adding new props to native-stack
-->
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes

Author: alduzy

android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -216,6 +216,20 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
             fragmentWrapper?.let { ScreenWindowTraits.setNavigationBarColor(this, it.tryGetActivity()) }
         }
 
+    var isNavigationBarTranslucent: Boolean? = null
+        set(navigationBarTranslucent) {
+            if (navigationBarTranslucent != null) {
+                ScreenWindowTraits.applyDidSetNavigationBarAppearance()
+            }
+            field = navigationBarTranslucent
+            fragmentWrapper?.let {
+                ScreenWindowTraits.setNavigationBarTranslucent(
+                    this,
+                    it.tryGetActivity(),
+                )
+            }
+        }
+
     var isNavigationBarHidden: Boolean? = null
         set(navigationBarHidden) {
             if (navigationBarHidden != null) {
@@ -276,6 +290,6 @@ class Screen(context: ReactContext?) : FabricEnabledViewGroup(context) {
     }
 
     enum class WindowTraits {
-        ORIENTATION, COLOR, STYLE, TRANSLUCENT, HIDDEN, ANIMATED, NAVIGATION_BAR_COLOR, NAVIGATION_BAR_HIDDEN
+        ORIENTATION, COLOR, STYLE, TRANSLUCENT, HIDDEN, ANIMATED, NAVIGATION_BAR_COLOR, NAVIGATION_BAR_TRANSLUCENT, NAVIGATION_BAR_HIDDEN
     }
 }

android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt

@@ -142,6 +142,11 @@ open class ScreenViewManager : ViewGroupManager<Screen>(), RNSScreenManagerInter
         view.navigationBarColor = navigationBarColor
     }
 
+    @ReactProp(name = "navigationBarTranslucent")
+    override fun setNavigationBarTranslucent(view: Screen, navigationBarTranslucent: Boolean) {
+        view.isNavigationBarTranslucent = navigationBarTranslucent
+    }
+
     @ReactProp(name = "navigationBarHidden")
     override fun setNavigationBarHidden(view: Screen, navigationBarHidden: Boolean) {
         view.isNavigationBarHidden = navigationBarHidden

android/src/main/java/com/swmansion/rnscreens/ScreenWindowTraits.kt

@@ -11,6 +11,7 @@ import android.os.Build
 import android.view.ViewParent
 import androidx.core.graphics.Insets
 import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.WindowInsetsControllerCompat
 import com.facebook.react.bridge.GuardedRunnable
@@ -185,6 +186,20 @@ object ScreenWindowTraits {
         window.navigationBarColor = color
     }
 
+    internal fun setNavigationBarTranslucent(screen: Screen, activity: Activity?) {
+        if (activity == null) {
+            return
+        }
+
+        val window = activity.window
+
+        val screenForNavBarTranslucent = findScreenForTrait(screen, WindowTraits.NAVIGATION_BAR_TRANSLUCENT)
+        val translucent = screenForNavBarTranslucent?.isNavigationBarTranslucent ?: false
+
+        // Following method controls whether to display edge-to-edge content that draws behind the navigation bar
+        WindowCompat.setDecorFitsSystemWindows(window, !translucent)
+    }
+
     internal fun setNavigationBarHidden(screen: Screen, activity: Activity?) {
         if (activity == null) {
             return
@@ -221,6 +236,7 @@ object ScreenWindowTraits {
         }
         if (didSetNavigationBarAppearance) {
             setNavigationBarColor(screen, activity)
+            setNavigationBarTranslucent(screen, activity)
             setNavigationBarHidden(screen, activity)
         }
     }
@@ -281,6 +297,7 @@ object ScreenWindowTraits {
             WindowTraits.HIDDEN -> screen.isStatusBarHidden != null
             WindowTraits.ANIMATED -> screen.isStatusBarAnimated != null
             WindowTraits.NAVIGATION_BAR_COLOR -> screen.navigationBarColor != null
+            WindowTraits.NAVIGATION_BAR_TRANSLUCENT -> screen.isNavigationBarTranslucent != null
             WindowTraits.NAVIGATION_BAR_HIDDEN -> screen.isNavigationBarHidden != null
         }
     }

android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java

@@ -98,6 +98,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "navigationBarColor":
         mViewManager.setNavigationBarColor(view, ColorPropConverter.getColor(value, view.getContext()));
         break;
+      case "navigationBarTranslucent":
+        mViewManager.setNavigationBarTranslucent(view, value == null ? false : (boolean) value);
+        break;
       case "navigationBarHidden":
         mViewManager.setNavigationBarHidden(view, value == null ? false : (boolean) value);
         break;

android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerInterface.java

@@ -39,6 +39,7 @@ public interface RNSScreenManagerInterface<T extends View> {
   void setHideKeyboardOnSwipe(T view, boolean value);
   void setActivityState(T view, float value);
   void setNavigationBarColor(T view, @Nullable Integer value);
+  void setNavigationBarTranslucent(T view, boolean value);
   void setNavigationBarHidden(T view, boolean value);
   void setNativeBackButtonDismissalEnabled(T view, boolean value);
 }

src/fabric/ModalScreenNativeComponent.ts

@@ -95,6 +95,7 @@ export interface NativeProps extends ViewProps {
   hideKeyboardOnSwipe?: boolean;
   activityState?: WithDefault<Float, -1.0>;
   navigationBarColor?: ColorValue;
+  navigationBarTranslucent?: boolean;
   navigationBarHidden?: boolean;
   nativeBackButtonDismissalEnabled?: boolean;
 }

src/fabric/ScreenNativeComponent.ts

@@ -95,6 +95,7 @@ export interface NativeProps extends ViewProps {
   hideKeyboardOnSwipe?: boolean;
   activityState?: WithDefault<Float, -1.0>;
   navigationBarColor?: ColorValue;
+  navigationBarTranslucent?: boolean;
   navigationBarHidden?: boolean;
   nativeBackButtonDismissalEnabled?: boolean;
 }

src/native-stack/types.tsx

@@ -305,6 +305,12 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   navigationBarColor?: ColorValue;
+  /**
+   * Boolean indicating whether the content should be visible behind the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarTranslucent?: boolean;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *

src/native-stack/views/NativeStackView.tsx

@@ -185,6 +185,7 @@ const RouteView = ({
     sheetExpandsWhenScrolledToEdge = true,
     nativeBackButtonDismissalEnabled = false,
     navigationBarColor,
+    navigationBarTranslucent,
     navigationBarHidden,
     replaceAnimation = 'pop',
     screenOrientation,
@@ -299,6 +300,7 @@ const RouteView = ({
       gestureResponseDistance={gestureResponseDistance}
       nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
       navigationBarColor={navigationBarColor}
+      navigationBarTranslucent={navigationBarTranslucent}
       navigationBarHidden={navigationBarHidden}
       replaceAnimation={replaceAnimation}
       screenOrientation={screenOrientation}

src/types.tsx

@@ -171,6 +171,12 @@ export interface ScreenProps extends ViewProps {
    * @platform android
    */
   navigationBarColor?: ColorValue;
+  /**
+   * Boolean indicating whether the content should be visible behind the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarTranslucent?: boolean;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *