Add headerTopInsetEnabled prop that defaults to true to account for translucent status bars on Android

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java

@@ -3,6 +3,7 @@
 import android.content.Context;
 import android.graphics.PorterDuff;
 import android.graphics.drawable.Drawable;
+import android.os.Build;
 import android.text.TextUtils;
 import android.util.TypedValue;
 import android.view.Gravity;
@@ -35,6 +36,7 @@ public class ScreenStackHeaderConfig extends ViewGroup {
   private boolean mIsShadowHidden;
   private boolean mDestroyed;
   private boolean mBackButtonInCustomView;
+  private boolean mIsTopInsetEnabled = true;
   private int mTintColor;
   private final Toolbar mToolbar;
 
@@ -153,6 +155,19 @@ public void onUpdate() {
       getScreenFragment().setToolbar(mToolbar);
     }
 
+    if (mIsTopInsetEnabled) {
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+        mToolbar.setPadding(0, getRootWindowInsets().getSystemWindowInsetTop(), 0, 0);
+      } else {
+        // Hacky fallback for old android. Before Marshmallow, the status bar height was always 25
+        mToolbar.setPadding(0, (int) (25 * getResources().getDisplayMetrics().density), 0, 0);
+      }
+    } else {
+      if (mToolbar.getPaddingTop() > 0) {
+        mToolbar.setPadding(0, 0, 0, 0);
+      }
+    }
+
     activity.setSupportActionBar(mToolbar);
     ActionBar actionBar = activity.getSupportActionBar();
 
@@ -322,6 +337,8 @@ public void setTintColor(int color) {
     mTintColor = color;
   }
 
+  public void setTopInsetEnabled(boolean topInsetEnabled) { mIsTopInsetEnabled = topInsetEnabled; }
+
   public void setBackgroundColor(int color) {
     mBackgroundColor = color;
   }

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.java

@@ -104,6 +104,11 @@ public void setHideBackButton(ScreenStackHeaderConfig config, boolean hideBackBu
     config.setHideBackButton(hideBackButton);
   }
 
+  @ReactProp(name = "topInsetEnabled")
+  public void setTopInsetEnabled(ScreenStackHeaderConfig config, boolean topInsetEnabled) {
+    config.setTopInsetEnabled(topInsetEnabled);
+  }
+
   @ReactProp(name = "color", customType = "Color")
   public void setColor(ScreenStackHeaderConfig config, int color) {
     config.setTintColor(color);

native-stack/README.md

@@ -103,6 +103,10 @@ Function which returns a React Element to display in the center of the header.
 
 Boolean indicating whether the navigation bar is translucent. Only supported on iOS.
 
+#### `headerTopInsetEnabled`
+
+A Boolean to that lets you opt out of insetting the header. You may want to * set this to `false` if you use an opaque status bar. Defaults to `true`. Insets are always applied on iOS because the header cannot be opaque. Only supported on Android.
+
 #### `headerLargeTitle`
 
 Boolean used to set a native property to prefer a large title header (like in iOS setting).

src/native-stack/types.tsx

@@ -199,6 +199,15 @@ export type NativeStackNavigationOptions = {
     fontFamily?: string;
     fontSize?: number;
   };
+  /**
+   * A flag to that lets you opt out of insetting the header. You may want to
+   * set this to `false` if you use an opaque status bar. Defaults to `true`.
+   * Only supported on Android. Insets are always applied on iOS because the
+   * header cannot be opaque.
+   *
+   * @platform android
+   */
+  headerTopInsetEnabled?: boolean;
   /**
    * Style object for the scene content.
    */

src/native-stack/views/HeaderConfig.tsx

@@ -29,6 +29,7 @@ export default function HeaderConfig(props: Props) {
     headerHideShadow,
     headerLargeTitleHideShadow,
     headerTintColor,
+    headerTopInsetEnabled = true,
     headerLargeTitle,
     headerTranslucent,
     headerStyle = {},
@@ -64,6 +65,7 @@ export default function HeaderConfig(props: Props) {
           ? headerTintColor
           : colors.text
       }
+      topInsetEnabled={headerTopInsetEnabled}
       backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
       backTitleFontFamily={headerBackTitleStyle.fontFamily}
       backTitleFontSize={headerBackTitleStyle.fontSize}