Rely on Appearance for nav bar style update

zoontek · Nov 15, 2024 · 372e8b2 · 372e8b2
1 parent c8c1e7f
commit 372e8b2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 41 deletions.
diff --git a/android/src/main/java/com/zoontek/rnedgetoedge/EdgeToEdgeModuleImpl.kt b/android/src/main/java/com/zoontek/rnedgetoedge/EdgeToEdgeModuleImpl.kt
@@ -3,8 +3,6 @@ package com.zoontek.rnedgetoedge
 import android.content.res.Configuration
 import android.graphics.Color
 import android.os.Build
-import android.os.Handler
-import android.os.Looper
 import android.view.WindowManager
 
 import androidx.core.content.ContextCompat
@@ -20,7 +18,7 @@ import com.facebook.react.common.ReactConstants
 object EdgeToEdgeModuleImpl {
   const val NAME = "RNEdgeToEdge"
 
-  private fun applyEdgeToEdge(reactContext: ReactApplicationContext) {
+  fun applyEdgeToEdge(reactContext: ReactApplicationContext) {
     val activity = reactContext.currentActivity
       ?: return FLog.w(ReactConstants.TAG, "$NAME: Ignored, current activity is null.")
 
@@ -56,14 +54,6 @@ object EdgeToEdgeModuleImpl {
     }
   }
 
-  fun onHostResume(reactContext: ReactApplicationContext) {
-    applyEdgeToEdge(reactContext)
-  }
-
-  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.")

diff --git a/android/src/newarch/com/zoontek/rnedgetoedge/EdgeToEdgeModule.kt b/android/src/newarch/com/zoontek/rnedgetoedge/EdgeToEdgeModule.kt
@@ -1,10 +1,5 @@
 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
@@ -14,19 +9,11 @@ import com.facebook.react.module.annotations.ReactModule
 class EdgeToEdgeModule(reactContext: ReactApplicationContext) :
   NativeEdgeToEdgeModuleSpec(reactContext), LifecycleEventListener {
 
-  private val configChangeReceiver = object : BroadcastReceiver() {
-    override fun onReceive(context: Context, intent: Intent) {
-      EdgeToEdgeModuleImpl.onConfigChange(reactContext)
-    }
-  }
-
   init {
-    reactApplicationContext.registerReceiver(configChangeReceiver, IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED))
     reactApplicationContext.addLifecycleEventListener(this)
   }
 
   override fun invalidate() {
-    reactApplicationContext.unregisterReceiver(configChangeReceiver)
     reactApplicationContext.removeLifecycleEventListener(this)
   }
 
@@ -35,13 +22,17 @@ class EdgeToEdgeModule(reactContext: ReactApplicationContext) :
   }
 
   override fun onHostResume() {
-    EdgeToEdgeModuleImpl.onHostResume(reactApplicationContext)
+    EdgeToEdgeModuleImpl.applyEdgeToEdge(reactApplicationContext)
   }
 
   override fun onHostPause() {}
 
   override fun onHostDestroy() {}
 
+  override fun onColorSchemeChange() {
+    EdgeToEdgeModuleImpl.applyEdgeToEdge(reactApplicationContext)
+  }
+
   override fun setSystemBarsConfig(config: ReadableMap) {
     EdgeToEdgeModuleImpl.setSystemBarsConfig(reactApplicationContext, config)
   }

diff --git a/android/src/oldarch/com/zoontek/rnedgetoedge/EdgeToEdgeModule.kt b/android/src/oldarch/com/zoontek/rnedgetoedge/EdgeToEdgeModule.kt
@@ -1,10 +1,5 @@
 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
@@ -16,19 +11,11 @@ import com.facebook.react.module.annotations.ReactModule
 class EdgeToEdgeModule(reactContext: ReactApplicationContext) :
   ReactContextBaseJavaModule(reactContext), LifecycleEventListener {
 
-  private val configChangeReceiver = object : BroadcastReceiver() {
-    override fun onReceive(context: Context, intent: Intent) {
-      EdgeToEdgeModuleImpl.onConfigChange(reactContext)
-    }
-  }
-
   init {
-    reactApplicationContext.registerReceiver(configChangeReceiver, IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED))
     reactApplicationContext.addLifecycleEventListener(this)
   }
 
   override fun invalidate() {
-    reactApplicationContext.unregisterReceiver(configChangeReceiver)
     reactApplicationContext.removeLifecycleEventListener(this)
   }
 
@@ -37,13 +24,18 @@ class EdgeToEdgeModule(reactContext: ReactApplicationContext) :
   }
 
   override fun onHostResume() {
-    EdgeToEdgeModuleImpl.onHostResume(reactApplicationContext)
+    EdgeToEdgeModuleImpl.applyEdgeToEdge(reactApplicationContext)
   }
 
   override fun onHostPause() {}
 
   override fun onHostDestroy() {}
 
+  @ReactMethod
+  fun onColorSchemeChange() {
+    EdgeToEdgeModuleImpl.applyEdgeToEdge(reactApplicationContext)
+  }
+
   @ReactMethod
   fun setSystemBarsConfig(config: ReadableMap) {
     EdgeToEdgeModuleImpl.setSystemBarsConfig(reactApplicationContext, config)

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -189,6 +189,7 @@ export const HomeScreen = ({
       <Title>Theme</Title>
 
       <SegmentedControl
+        appearance={dark ? "dark" : "light"}
         values={SCHEMES}
         selectedIndex={schemeIndex}
         onValueChange={(value) => {
@@ -201,6 +202,7 @@ export const HomeScreen = ({
       <Title>{"<SystemBars />"}</Title>
 
       <SegmentedControl
+        appearance={dark ? "dark" : "light"}
         values={STYLES}
         selectedIndex={styleIndex}
         onValueChange={(value) => {

diff --git a/src/specs/NativeEdgeToEdgeModule.ts b/src/specs/NativeEdgeToEdgeModule.ts
@@ -1,5 +1,5 @@
 import type { TurboModule } from "react-native";
-import { TurboModuleRegistry } from "react-native";
+import { Appearance, TurboModuleRegistry } from "react-native";
 
 type SystemBarsConfig = {
   statusBarHidden: boolean | undefined;
@@ -8,7 +8,16 @@ type SystemBarsConfig = {
 };
 
 export interface Spec extends TurboModule {
+  onColorSchemeChange(): void;
   setSystemBarsConfig(config: SystemBarsConfig): void;
 }
 
-export default TurboModuleRegistry.get<Spec>("RNEdgeToEdge");
+const NativeModule = TurboModuleRegistry.get<Spec>("RNEdgeToEdge");
+
+if (NativeModule != null) {
+  Appearance.addChangeListener(() => {
+    NativeModule.onColorSchemeChange();
+  });
+}
+
+export default NativeModule;
diff --git a/src/specs/NativeEdgeToEdgeModule.web.ts b/src/specs/NativeEdgeToEdgeModule.web.ts
@@ -1,5 +1,6 @@
 import type { Spec } from "./NativeEdgeToEdgeModule";
 
 export default {
+  onColorSchemeChange() {},
   setSystemBarsConfig() {},
 } satisfies Spec;