feat: add setUserInterfaceStyle API with local persistence (#16)

Author: huhuanming

.claude/skills/1k-code-review-pr/SKILL.md

@@ -6,10 +6,10 @@ jobs:
   package-publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: '20.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install Package
         run: corepack enable && yarn install

.github/workflows/package-publish.yml

@@ -1,5 +1,5 @@
 PODS:
-  - BackgroundThread (1.1.15):
+  - BackgroundThread (1.1.17):
     - boost
     - DoubleConversion
     - fast_float
@@ -28,7 +28,7 @@ PODS:
     - SocketRocket
     - Yoga
   - boost (1.84.0)
-  - CloudKitModule (1.1.15):
+  - CloudKitModule (1.1.17):
     - boost
     - DoubleConversion
     - fast_float
@@ -66,7 +66,7 @@ PODS:
   - hermes-engine (0.14.0):
     - hermes-engine/Pre-built (= 0.14.0)
   - hermes-engine/Pre-built (0.14.0)
-  - KeychainModule (1.1.15):
+  - KeychainModule (1.1.17):
     - boost
     - DoubleConversion
     - fast_float
@@ -2653,7 +2653,7 @@ PODS:
     - React-perflogger (= 0.83.0)
     - React-utils (= 0.83.0)
     - SocketRocket
-  - ReactNativeCheckBiometricAuthChanged (1.1.15):
+  - ReactNativeCheckBiometricAuthChanged (1.1.17):
     - boost
     - DoubleConversion
     - fast_float
@@ -2683,7 +2683,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - ReactNativeDeviceUtils (1.1.15):
+  - ReactNativeDeviceUtils (1.1.17):
     - boost
     - DoubleConversion
     - fast_float
@@ -2713,7 +2713,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - ReactNativeGetRandomValues (1.1.15):
+  - ReactNativeGetRandomValues (1.1.17):
     - boost
     - DoubleConversion
     - fast_float
@@ -2743,7 +2743,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - ReactNativeLiteCard (1.1.15):
+  - ReactNativeLiteCard (1.1.17):
     - boost
     - DoubleConversion
     - fast_float
@@ -2771,7 +2771,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - Skeleton (1.1.15):
+  - Skeleton (1.1.17):
     - boost
     - DoubleConversion
     - fast_float
@@ -3077,16 +3077,16 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  BackgroundThread: 8bfdbb6081771366de5e5e2b588aad1beafea9be
+  BackgroundThread: 22875378c238bbb3ae8e61c7aa8d0ebab67fe37c
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
-  CloudKitModule: a7596fae8e1e2d05bd0ba2fa4d4ad90b5e93ea5a
+  CloudKitModule: b2e3a96047478ada6a970ded4effb371ba3fbd99
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
   fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
   FBLazyVector: a293a88992c4c33f0aee184acab0b64a08ff9458
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 70fdc9d0bb0d8532e0411dcb21e53ce5a160960a
-  KeychainModule: 7a82d9b61fbd70183fdb991384e6a99eff8ac502
+  KeychainModule: 4e4e8187e6b2ddbff6e2b6117e530ab5e50c3a5c
   NitroModules: 11bba9d065af151eae51e38a6425e04c3b223ff3
   RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
   RCTDeprecation: 2b70c6e3abe00396cefd8913efbf6a2db01a2b36
@@ -3158,11 +3158,11 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: ebcf3a78dc1bcdf054c9e8d309244bade6b31568
   ReactCodegen: 554b421c45b7df35ac791da1b734335470b55fcc
   ReactCommon: 424cc34cf5055d69a3dcf02f3436481afb8b0f6f
-  ReactNativeCheckBiometricAuthChanged: 5757aec913dee03c7d488eebb6b05a91ff774e61
-  ReactNativeDeviceUtils: 2372c7f86169033f39b524b0bfc28323a2cf6bdc
-  ReactNativeGetRandomValues: 60a36d2a7e0ced4e37bbbc9faa98e11f27655518
-  ReactNativeLiteCard: d59be2b082bc3e7ef452095042c1e6b5483ab210
-  Skeleton: af32eaa6d321cf4f3266cf408dadec752dfb8e1d
+  ReactNativeCheckBiometricAuthChanged: 994b2c696a4c50dce9840c80944872ac3e9b24fd
+  ReactNativeDeviceUtils: b1312bad7e4899541d1cd0b5dc4b7db3ab6038f2
+  ReactNativeGetRandomValues: 84ed71f8e120d8019be1e1b623e4e3c9c78a88d9
+  ReactNativeLiteCard: 790a5dee05a01b83aa130c928645a74477c18279
+  Skeleton: b8a7888e09e33a9772ee87dd68db0dd64f46e832
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 6ca93c8c13f56baeec55eb608577619b17a4d64e
 

example/react-native/ios/Podfile.lock

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { View, Text, StyleSheet, Alert } from 'react-native';
 import { TestPageBase, TestButton, TestInput, TestResult } from './TestPageBase';
 import  { ReactNativeDeviceUtils } from '@onekeyfe/react-native-device-utils';
@@ -20,6 +20,15 @@ export function DeviceUtilsTestPage({ onGoHome, safeAreaInsets }: DeviceUtilsTes
   const [colorA, setColorA] = useState('255');
   const [isSpanning, setIsSpanning] = useState(false);
   const [spanningCallbackActive, setSpanningCallbackActive] = useState(false);
+  const spanningListenerIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (spanningListenerIdRef.current !== null) {
+        deviceUtils.removeSpanningChangedListener(spanningListenerIdRef.current);
+      }
+    };
+  }, []);
 
 
   // Clear previous results
@@ -115,14 +124,15 @@ export function DeviceUtilsTestPage({ onGoHome, safeAreaInsets }: DeviceUtilsTes
     clearResults();
     try {
       if (!spanningCallbackActive) {
-        deviceUtils.addSpanningChangedListener((spanning: boolean) => {
+        const listenerId = deviceUtils.addSpanningChangedListener((spanning: boolean) => {
           setIsSpanning(spanning);
           setResult({ 
             spanningCallbackTriggered: true, 
             isSpanning: spanning,
             timestamp: new Date().toLocaleTimeString()
           });
         });
+        spanningListenerIdRef.current = listenerId;
         setSpanningCallbackActive(true);
         Alert.alert('Success', 'Spanning callback registered! Try rotating your device or connecting/disconnecting external displays.');
       } else {
@@ -178,6 +188,20 @@ export function DeviceUtilsTestPage({ onGoHome, safeAreaInsets }: DeviceUtilsTes
     }
   };
 
+  // Test setUserInterfaceStyle
+  const testSetUserInterfaceStyle = (style: 'light' | 'dark' | 'unspecified') => {
+    clearResults();
+    try {
+      deviceUtils.setUserInterfaceStyle(style);
+      setResult({
+        userInterfaceStyleChanged: true,
+        style: style,
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    }
+  };
+
   // Get all device info at once
   const getAllDeviceInfo = async () => {
     clearResults();
@@ -335,6 +359,29 @@ export function DeviceUtilsTestPage({ onGoHome, safeAreaInsets }: DeviceUtilsTes
         </View>
       </View>
 
+      {/* User Interface Style Tests */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>User Interface Style</Text>
+
+        <View style={styles.colorButtonsContainer}>
+          <TestButton
+            title="Light"
+            onPress={() => testSetUserInterfaceStyle('light')}
+            style={styles.colorButton}
+          />
+          <TestButton
+            title="Dark"
+            onPress={() => testSetUserInterfaceStyle('dark')}
+            style={styles.colorButton}
+          />
+          <TestButton
+            title="System"
+            onPress={() => testSetUserInterfaceStyle('unspecified')}
+            style={styles.colorButton}
+          />
+        </View>
+      </View>
+
       {/* Results */}
       <TestResult result={result} error={error} />
 

example/react-native/pages/DeviceUtilsTestPage.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-background-thread",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "react-native-background-thread",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

native-modules/react-native-background-thread/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-check-biometric-auth-changed",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "react-native-check-biometric-auth-changed",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

native-modules/react-native-check-biometric-auth-changed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-cloud-kit-module",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "react-native-cloud-kit-module",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

native-modules/react-native-cloud-kit-module/package.json

@@ -129,4 +129,8 @@ dependencies {
   // WindowManager library for foldable device detection
   implementation "androidx.window:window:1.5.1"
   implementation "androidx.window:window-java:1.5.1"
+  // AppCompat for night mode support
+  implementation "androidx.appcompat:appcompat:1.7.1"
+  // AndroidX Preference for PreferenceManager
+  implementation "androidx.preference:preference-ktx:1.2.1"
 }

native-modules/react-native-device-utils/android/build.gradle

@@ -6,13 +6,14 @@ import android.content.pm.PackageManager
 import android.graphics.Color
 import android.graphics.Rect
 import android.os.Build
-import android.preference.PreferenceManager
+import androidx.preference.PreferenceManager
 import androidx.core.content.ContextCompat
 import androidx.core.util.Consumer
 import androidx.window.layout.FoldingFeature
 import androidx.window.layout.WindowInfoTracker
 import androidx.window.layout.WindowLayoutInfo
 import androidx.window.java.layout.WindowInfoTrackerCallbackAdapter
+import androidx.appcompat.app.AppCompatDelegate
 import com.facebook.proguard.annotations.DoNotStrip
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactApplicationContext
@@ -35,6 +36,7 @@ class ReactNativeDeviceUtils : HybridReactNativeDeviceUtilsSpec(), LifecycleEven
    */
   companion object {
     private const val PREF_KEY_FOLDABLE = "1k_fold"
+    private const val PREF_KEY_UI_STYLE = "1k_user_interface_style"
 
     // Xiaomi foldable models
     private val XIAOMI_FOLDABLE_MODELS = setOf(
@@ -227,6 +229,29 @@ class ReactNativeDeviceUtils : HybridReactNativeDeviceUtilsSpec(), LifecycleEven
       NitroModules.applicationContext?.let { ctx ->
           ctx.addLifecycleEventListener(this)
       }
+      restoreUserInterfaceStyle()
+  }
+
+  private fun restoreUserInterfaceStyle() {
+    try {
+      val context = NitroModules.applicationContext ?: return
+      val prefs = PreferenceManager.getDefaultSharedPreferences(context)
+      val style = prefs.getString(PREF_KEY_UI_STYLE, null) ?: return
+      applyUserInterfaceStyle(style)
+    } catch (e: Exception) {
+      // Ignore restore errors
+    }
+  }
+
+  private fun applyUserInterfaceStyle(style: String) {
+    val mode = when (style) {
+      "light" -> AppCompatDelegate.MODE_NIGHT_NO
+      "dark" -> AppCompatDelegate.MODE_NIGHT_YES
+      else -> AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM
+    }
+    android.os.Handler(android.os.Looper.getMainLooper()).post {
+      AppCompatDelegate.setDefaultNightMode(mode)
+    }
   }
 
   private fun getCurrentActivity(): Activity? {
@@ -759,6 +784,26 @@ class ReactNativeDeviceUtils : HybridReactNativeDeviceUtilsSpec(), LifecycleEven
     }
   }
 
+  // MARK: - User Interface Style
+
+  override fun setUserInterfaceStyle(style: UserInterfaceStyle) {
+    val styleString = when (style) {
+      UserInterfaceStyle.LIGHT -> "light"
+      UserInterfaceStyle.DARK -> "dark"
+      UserInterfaceStyle.UNSPECIFIED -> "unspecified"
+    }
+    try {
+      val context = NitroModules.applicationContext
+      if (context != null) {
+        val prefs = PreferenceManager.getDefaultSharedPreferences(context)
+        prefs.edit().putString(PREF_KEY_UI_STYLE, styleString).apply()
+      }
+    } catch (e: Exception) {
+      // Ignore save errors
+    }
+    applyUserInterfaceStyle(styleString)
+  }
+
   // MARK: - Background Color
 
   override fun changeBackgroundColor(r: Double, g: Double, b: Double, a: Double) {

native-modules/react-native-device-utils/android/src/main/java/com/margelo/nitro/reactnativedeviceutils/ReactNativeDeviceUtils.kt

@@ -2,7 +2,45 @@ import NitroModules
 import UIKit
 
 class ReactNativeDeviceUtils: HybridReactNativeDeviceUtilsSpec {
-    
+
+    private static let userInterfaceStyleKey = "1k_user_interface_style"
+
+    override init() {
+        super.init()
+        restoreUserInterfaceStyle()
+    }
+
+    private func restoreUserInterfaceStyle() {
+        guard let style = UserDefaults.standard.string(forKey: ReactNativeDeviceUtils.userInterfaceStyleKey) else {
+            return
+        }
+        applyUserInterfaceStyle(style)
+    }
+
+    private func applyUserInterfaceStyle(_ style: String) {
+        DispatchQueue.main.async {
+            var uiStyle: UIUserInterfaceStyle = .unspecified
+            if style == "light" {
+                uiStyle = .light
+            } else if style == "dark" {
+                uiStyle = .dark
+            }
+            if #available(iOS 15.0, *) {
+                for scene in UIApplication.shared.connectedScenes {
+                    if let windowScene = scene as? UIWindowScene {
+                        for window in windowScene.windows {
+                            window.overrideUserInterfaceStyle = uiStyle
+                        }
+                    }
+                }
+            } else {
+                for window in UIApplication.shared.windows {
+                    window.overrideUserInterfaceStyle = uiStyle
+                }
+            }
+        }
+    }
+
     public func isDualScreenDevice() throws -> Bool {
         return false
     }
@@ -31,6 +69,11 @@ class ReactNativeDeviceUtils: HybridReactNativeDeviceUtilsSpec {
     }
 
 
+    public func setUserInterfaceStyle(style: UserInterfaceStyle) throws -> Void {
+        UserDefaults.standard.set(style.stringValue, forKey: ReactNativeDeviceUtils.userInterfaceStyleKey)
+        applyUserInterfaceStyle(style.stringValue)
+    }
+
     public func changeBackgroundColor(r: Double, g: Double, b: Double, a: Double) throws -> Void {
         DispatchQueue.main.async {
             // Clamp color values to valid range [0, 255]