feat(Android): added navigationBarTranslucent option

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

@@ -8,9 +8,11 @@ import android.app.Activity
 import android.content.pm.ActivityInfo
 import android.graphics.Color
 import android.os.Build
+import android.util.Log
 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 +187,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 +237,7 @@ object ScreenWindowTraits {
         }
         if (didSetNavigationBarAppearance) {
             setNavigationBarColor(screen, activity)
+            setNavigationBarTranslucent(screen, activity)
             setNavigationBarHidden(screen, activity)
         }
     }
@@ -281,6 +298,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`.
    *