react-native-edge-to-edge 0.1.1 → 0.2.0

package/README.md

@@ -25,7 +25,9 @@ It is supporting the **latest version**, and the **two previous minor series**.
 
 ### Android 15
 
-With the upcoming release of Android 15, Google is introducing a significant change: apps targeting SDK 35 [will have edge-to-edge enforcement](https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge). Currently, the latest version of React Native targets SDK 34, so this isn't an issue **yet**, but it will be in a future release.
+With the upcoming release of Android 15, Google is introducing a significant change: apps targeting SDK 35 [will have edge-to-edge enforcement](https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge). Google is _likely_ to mandate that app updates on the Play Store target SDK 35 starting on August 31, 2025. This assumption is based on the [previous years' requirements following a similar timeline](https://support.google.com/googleplay/android-developer/answer/11926878?sjid=11853000253346477363-EU#zippy=%2Care-there-any-exceptions-for-existing-apps-targeting-api-or-below:~:text=App%20update%20requirements).
+
+Currently, new React Native projects target SDK 34.
 
 ### Immersive mode
 

package/android/src/main/java/com/zoontek/rnedgetoedge/RNEdgeToEdgeModuleImpl.kt

@@ -1,10 +1,10 @@
 package com.zoontek.rnedgetoedge
 
-import android.app.Activity
 import android.content.res.Configuration
 import android.graphics.Color
 import android.os.Build
-import android.util.TypedValue
+import android.os.Handler
+import android.os.Looper
 import android.view.WindowManager
 
 import androidx.core.content.ContextCompat
@@ -13,36 +13,33 @@ import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.WindowInsetsControllerCompat
 
 import com.facebook.common.logging.FLog
+import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.ReactConstants
 
 object RNEdgeToEdgeModuleImpl {
   const val NAME = "RNEdgeToEdge"
-  private var isInitialHostResume = true
 
-  fun onHostResume(activity: Activity?) {
-    if (activity == null) {
-      return FLog.w(ReactConstants.TAG, "$NAME: Ignored, current activity is null.")
-    }
+  private fun applyEdgeToEdge(reactContext: ReactApplicationContext) {
+    val activity = reactContext.currentActivity
+      ?: return FLog.w(ReactConstants.TAG, "$NAME: Ignored, current activity is null.")
 
     activity.runOnUiThread {
       val window = activity.window
       val view = window.decorView
       val context = view.context
 
-      val isDarkMode =
-        view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
-          Configuration.UI_MODE_NIGHT_YES
-
       WindowCompat.setDecorFitsSystemWindows(window, false)
 
       window.statusBarColor = Color.TRANSPARENT
+      window.navigationBarColor = ContextCompat.getColor(context, R.color.navigationBarColor)
 
-      window.navigationBarColor = when {
-        Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q -> Color.TRANSPARENT
-        Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && !isDarkMode ->
-          ContextCompat.getColor(context, R.color.systemBarLightScrim)
-        else -> ContextCompat.getColor(context, R.color.systemBarDarkScrim)
+      val isDarkMode =
+        view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK ==
+          Configuration.UI_MODE_NIGHT_YES
+
+      WindowInsetsControllerCompat(window, view).run {
+        isAppearanceLightNavigationBars = !isDarkMode
       }
 
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
@@ -50,38 +47,26 @@ object RNEdgeToEdgeModuleImpl {
         window.isNavigationBarContrastEnforced = true
       }
 
-      WindowInsetsControllerCompat(window, view).run {
-        if (isInitialHostResume) {
-          val typedValue = TypedValue()
-
-          isAppearanceLightStatusBars = activity
-            .theme
-            .resolveAttribute(android.R.attr.windowLightStatusBar, typedValue, true) &&
-            typedValue.data != 0
-        }
-
-        isInitialHostResume = false
-        isAppearanceLightNavigationBars = !isDarkMode
-      }
-
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
         window.attributes.layoutInDisplayCutoutMode = when {
-          Build.VERSION.SDK_INT >= Build.VERSION_CODES.R ->
-            WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
+          Build.VERSION.SDK_INT >= Build.VERSION_CODES.R -> WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
           else -> WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
         }
       }
     }
   }
 
-  fun onHostDestroy() {
-    isInitialHostResume = true
+  fun onHostResume(reactContext: ReactApplicationContext) {
+    applyEdgeToEdge(reactContext)
   }
 
-  fun setSystemBarsConfig(activity: Activity?, config: ReadableMap) {
-    if (activity == null) {
-      return FLog.w(ReactConstants.TAG, "$NAME: Ignored, current activity is null.")
-    }
+  fun onConfigChange(reactContext: ReactApplicationContext) {
+    Handler(Looper.getMainLooper()).postDelayed({ applyEdgeToEdge(reactContext) }, 100)
+  }
+
+  fun setSystemBarsConfig(reactContext: ReactApplicationContext, config: ReadableMap) {
+    val activity = reactContext.currentActivity
+      ?: return FLog.w(ReactConstants.TAG, "$NAME: Ignored, current activity is null.")
 
     val statusBarHidden =
       config.takeIf { it.hasKey("statusBarHidden") }?.getBoolean("statusBarHidden")

package/android/src/main/res/values/colors.xml

@@ -2,7 +2,5 @@
 <resources>
     <!-- https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/res/remote_color_resources_res/values/colors.xml;l=67 -->
     <!-- https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/res/res/color/system_bar_background_semi_transparent.xml -->
-    <color name="systemBarDarkScrim">#801b1b1b</color>
-    <!-- https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/com/android/internal/policy/DecorView.java;l=142 -->
-    <color name="systemBarLightScrim">#e6ffffff</color>
+    <color name="navigationBarColor">#801b1b1b</color>
 </resources>

package/android/src/main/res/values/styles.xml

@@ -8,9 +8,9 @@
         <item name="android:fitsSystemWindows">false</item>
         <item name="android:windowDrawsSystemBarBackgrounds">true</item>
         <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@color/navigationBarColor</item>
     </style>
 
     <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
-        <item name="android:navigationBarColor">@color/systemBarDarkScrim</item>
     </style>
 </resources>

package/android/src/main/res/values-night-v27/styles.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="Theme.EdgeToEdge.Base" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="android:windowLightStatusBar">false</item>
+        <item name="android:windowLightNavigationBar">false</item>
+    </style>
+</resources>

package/android/src/main/res/values-v27/colors.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/com/android/internal/policy/DecorView.java;l=142 -->
+    <color name="navigationBarColor">#e6ffffff</color>
+</resources>

package/android/src/main/res/values-v27/styles.xml

@@ -1,8 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <style name="Theme.EdgeToEdge.Base" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:windowLightNavigationBar">true</item>
+    </style>
+
     <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
-        <item name="android:navigationBarColor">@color/systemBarLightScrim</item>
-        <item name="android:windowLightNavigationBar">true</item>
     </style>
 </resources>

package/android/src/main/res/values-v29/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="navigationBarColor">@android:color/transparent</color>
+</resources>

package/android/src/main/res/values-v29/styles.xml

@@ -4,6 +4,5 @@
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
         <item name="android:enforceStatusBarContrast">false</item>
         <item name="android:enforceNavigationBarContrast">true</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
     </style>
 </resources>

package/android/src/main/res/values-v30/styles.xml

@@ -4,6 +4,5 @@
         <item name="android:windowLayoutInDisplayCutoutMode">always</item>
         <item name="android:enforceStatusBarContrast">false</item>
         <item name="android:enforceNavigationBarContrast">true</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
     </style>
 </resources>

package/android/src/newarch/com/zoontek/rnedgetoedge/RNEdgeToEdgeModule.kt

@@ -1,19 +1,32 @@
 package com.zoontek.rnedgetoedge
 
+import android.content.BroadcastReceiver
+import android.content.Context
+import android.content.Intent
+import android.content.IntentFilter
+
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
 
 @ReactModule(name = RNEdgeToEdgeModuleImpl.NAME)
-class RNEdgeToEdgeModule(reactContext: ReactApplicationContext?) :
+class RNEdgeToEdgeModule(reactContext: ReactApplicationContext) :
   NativeRNEdgeToEdgeSpec(reactContext), LifecycleEventListener {
 
+  private val configChangeReceiver = object : BroadcastReceiver() {
+    override fun onReceive(context: Context, intent: Intent) {
+      RNEdgeToEdgeModuleImpl.onConfigChange(reactContext)
+    }
+  }
+
   init {
+    reactApplicationContext.registerReceiver(configChangeReceiver, IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED))
     reactApplicationContext.addLifecycleEventListener(this)
   }
 
   override fun invalidate() {
+    reactApplicationContext.unregisterReceiver(configChangeReceiver)
     reactApplicationContext.removeLifecycleEventListener(this)
   }
 
@@ -22,16 +35,14 @@ class RNEdgeToEdgeModule(reactContext: ReactApplicationContext?) :
   }
 
   override fun onHostResume() {
-    RNEdgeToEdgeModuleImpl.onHostResume(currentActivity)
+    RNEdgeToEdgeModuleImpl.onHostResume(reactApplicationContext)
   }
 
   override fun onHostPause() {}
 
-  override fun onHostDestroy() {
-    RNEdgeToEdgeModuleImpl.onHostDestroy()
-  }
+  override fun onHostDestroy() {}
 
   override fun setSystemBarsConfig(config: ReadableMap) {
-    RNEdgeToEdgeModuleImpl.setSystemBarsConfig(currentActivity, config)
+    RNEdgeToEdgeModuleImpl.setSystemBarsConfig(reactApplicationContext, config)
   }
 }

package/android/src/oldarch/com/zoontek/rnedgetoedge/RNBarsModule.kt

@@ -1,5 +1,10 @@
 package com.zoontek.rnedgetoedge
 
+import android.content.BroadcastReceiver
+import android.content.Context
+import android.content.Intent
+import android.content.IntentFilter
+
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
@@ -8,14 +13,22 @@ import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
 
 @ReactModule(name = RNEdgeToEdgeModuleImpl.NAME)
-class RNEdgeToEdgeModule(reactContext: ReactApplicationContext?) :
+class RNEdgeToEdgeModule(reactContext: ReactApplicationContext) :
   ReactContextBaseJavaModule(reactContext), LifecycleEventListener {
 
+  private val configChangeReceiver = object : BroadcastReceiver() {
+    override fun onReceive(context: Context, intent: Intent) {
+      RNEdgeToEdgeModuleImpl.onConfigChange(reactContext)
+    }
+  }
+
   init {
+    reactApplicationContext.registerReceiver(configChangeReceiver, IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED))
     reactApplicationContext.addLifecycleEventListener(this)
   }
 
   override fun invalidate() {
+    reactApplicationContext.unregisterReceiver(configChangeReceiver)
     reactApplicationContext.removeLifecycleEventListener(this)
   }
 
@@ -24,17 +37,15 @@ class RNEdgeToEdgeModule(reactContext: ReactApplicationContext?) :
   }
 
   override fun onHostResume() {
-    RNEdgeToEdgeModuleImpl.onHostResume(currentActivity)
+    RNEdgeToEdgeModuleImpl.onHostResume(reactApplicationContext)
   }
 
   override fun onHostPause() {}
 
-  override fun onHostDestroy() {
-    RNEdgeToEdgeModuleImpl.onHostDestroy()
-  }
+  override fun onHostDestroy() {}
 
   @ReactMethod
   fun setSystemBarsConfig(config: ReadableMap) {
-    RNEdgeToEdgeModuleImpl.setSystemBarsConfig(currentActivity, config)
+    RNEdgeToEdgeModuleImpl.setSystemBarsConfig(reactApplicationContext, config)
   }
 }

package/dist/commonjs/NativeRNEdgeToEdge.web.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  setSystemBarsConfig() {}
+};
+//# sourceMappingURL=NativeRNEdgeToEdge.web.js.map

package/dist/commonjs/NativeRNEdgeToEdge.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["setSystemBarsConfig"],"sourceRoot":"../../src","sources":["NativeRNEdgeToEdge.web.ts"],"mappings":";;;;;;iCAEe;EACbA,mBAAmBA,CAAA,EAAG,CAAC;AACzB,CAAC","ignoreList":[]}

package/dist/module/NativeRNEdgeToEdge.web.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export default {
+  setSystemBarsConfig() {}
+};
+//# sourceMappingURL=NativeRNEdgeToEdge.web.js.map

package/dist/module/NativeRNEdgeToEdge.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["setSystemBarsConfig"],"sourceRoot":"../../src","sources":["NativeRNEdgeToEdge.web.ts"],"mappings":";;AAEA,eAAe;EACbA,mBAAmBA,CAAA,EAAG,CAAC;AACzB,CAAC","ignoreList":[]}

package/dist/typescript/NativeRNEdgeToEdge.web.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    setSystemBarsConfig(): void;
+};
+export default _default;
+//# sourceMappingURL=NativeRNEdgeToEdge.web.d.ts.map

package/dist/typescript/NativeRNEdgeToEdge.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeRNEdgeToEdge.web.d.ts","sourceRoot":"","sources":["../../src/NativeRNEdgeToEdge.web.ts"],"names":[],"mappings":";;;AAEA,wBAEiB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-edge-to-edge",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "description": "Effortlessly enable edge-to-edge display in React Native",
   "author": "Mathieu Acthernoene <zoontek@gmail.com>",

package/src/NativeRNEdgeToEdge.web.ts

@@ -0,0 +1,5 @@
+import type { Spec } from "./NativeRNEdgeToEdge";
+
+export default {
+  setSystemBarsConfig() {},
+} satisfies Spec;

package/android/src/main/res/values-v26/styles.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <style name="Theme.EdgeToEdge" parent="Theme.EdgeToEdge.Common">
-        <item name="android:navigationBarColor">@color/systemBarLightScrim</item>
-    </style>
-</resources>