expo-system-ui 2.2.1 → 2.4.0

package/CHANGELOG.md

@@ -10,6 +10,22 @@
 
 ### 💡 Others
 
+## 2.4.0 — 2023-06-21
+
+### 🎉 New features
+
+- Persist user selected background color and restore automatically on iOS. Added `restoreBackgroundColorAsync` to restore it on Android. ([#22773](https://github.com/expo/expo/pull/22773) by [@alanhughes](https://github.com/alanjhughes))
+
+### 🐛 Bug fixes
+
+- Fixed Android build warnings for Gradle version 8. ([#22537](https://github.com/expo/expo/pull/22537), [#22609](https://github.com/expo/expo/pull/22609) by [@kudo](https://github.com/kudo))
+
+## 2.3.0 — 2023-05-08
+
+### 💡 Others
+
+- Android: Switch from deprecated `toLowerCase` to `lowercase` function ([#22225](https://github.com/expo/expo/pull/22225) by [@hbiede](https://github.com/hbiede))
+
 ## 2.2.1 — 2023-02-09
 
 _This version does not introduce any user-facing changes._

package/README.md

@@ -10,7 +10,7 @@
 ### Installation
 
 ```
-expo install expo-system-ui
+npx expo install expo-system-ui
 ```
 
 ### Extra Setup

package/android/build.gradle

@@ -3,7 +3,7 @@ apply plugin: 'kotlin-android'
 apply plugin: 'maven-publish'
 
 group = 'host.exp.exponent'
-version = '2.2.1'
+version = '2.4.0'
 
 buildscript {
   def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
@@ -35,19 +35,11 @@ buildscript {
   }
 }
 
-// Creating sources with comments
-task androidSourcesJar(type: Jar) {
-  classifier = 'sources'
-  from android.sourceSets.main.java.srcDirs
-}
-
 afterEvaluate {
   publishing {
     publications {
       release(MavenPublication) {
         from components.release
-        // Add additional sourcesJar to artifacts
-        artifact(androidSourcesJar)
       }
     }
     repositories {
@@ -70,15 +62,21 @@ android {
     jvmTarget = JavaVersion.VERSION_11.majorVersion
   }
 
+  namespace "expo.modules.systemui"
   defaultConfig {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 1
-    versionName '2.2.1'
+    versionName '2.4.0'
   }
   lintOptions {
     abortOnError false
   }
+  publishing {
+    singleVariant("release") {
+      withSourcesJar()
+    }
+  }
 }
 
 dependencies {

package/android/src/main/AndroidManifest.xml

@@ -1,2 +1,2 @@
-<manifest package="expo.modules.systemui">
+<manifest>
 </manifest>

package/android/src/main/java/expo/modules/systemui/SystemUIModule.kt

@@ -1,23 +1,53 @@
 package expo.modules.systemui
 
+import android.content.Context
+import android.content.SharedPreferences
+import android.content.res.Configuration
 import android.graphics.Color
 import android.graphics.drawable.ColorDrawable
+import androidx.appcompat.app.AppCompatDelegate
 import expo.modules.kotlin.exception.Exceptions
 import expo.modules.kotlin.functions.Queues
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
 
+const val PREFERENCE_KEY = "expoRootBackgroundColor"
+
 class SystemUIModule : Module() {
   private val currentActivity
     get() = appContext.currentActivity ?: throw Exceptions.MissingActivity()
+  private val context: Context
+    get() = appContext.reactContext ?: throw Exceptions.ReactContextLost()
+  private val prefs: SharedPreferences
+    get() = context.getSharedPreferences("expo_ui_preferences", Context.MODE_PRIVATE)
+      ?: throw Exceptions.ReactContextLost()
+
+  private val systemBackgroundColor
+    get() = when (AppCompatDelegate.getDefaultNightMode()) {
+      AppCompatDelegate.MODE_NIGHT_YES -> Color.BLACK
+      AppCompatDelegate.MODE_NIGHT_NO -> Color.WHITE
+      AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM -> {
+        when (context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
+          Configuration.UI_MODE_NIGHT_YES -> Color.BLACK
+          Configuration.UI_MODE_NIGHT_NO -> Color.WHITE
+          else -> Color.WHITE
+        }
+      }
+      else -> Color.WHITE
+    }
 
   override fun definition() = ModuleDefinition {
     Name("ExpoSystemUI")
 
-    AsyncFunction("setBackgroundColorAsync") { color: Int ->
-      val rootView = currentActivity.window.decorView
-      val colorInt = Color.parseColor(colorToHex(color))
-      rootView.setBackgroundColor(colorInt)
+    AsyncFunction("setBackgroundColorAsync") { color: Int? ->
+      color?.let {
+        prefs.edit()
+          .putInt(PREFERENCE_KEY, it)
+          .apply()
+      } ?: prefs.edit()
+        .remove(PREFERENCE_KEY)
+        .apply()
+      setBackgroundColor(color ?: systemBackgroundColor)
     }.runOnQueue(Queues.MAIN)
 
     AsyncFunction("getBackgroundColorAsync") {
@@ -30,6 +60,12 @@ class SystemUIModule : Module() {
     }
   }
 
+  private fun setBackgroundColor(color: Int) {
+    val rootView = currentActivity.window?.decorView
+    val colorInt = Color.parseColor(colorToHex(color))
+    rootView?.setBackgroundColor(colorInt)
+  }
+
   companion object {
     fun colorToHex(color: Int): String {
       return String.format("#%02x%02x%02x", Color.red(color), Color.green(color), Color.blue(color))

package/android/src/main/java/expo/modules/systemui/SystemUIReactActivityLifecycleListener.kt

@@ -14,5 +14,5 @@ class SystemUIReactActivityLifecycleListener(activityContext: Context) : ReactAc
   }
 
   private fun getUserInterfaceStyle(context: Context): String =
-    context.getString(R.string.expo_system_ui_user_interface_style).toLowerCase()
+    context.getString(R.string.expo_system_ui_user_interface_style).lowercase()
 }

package/android/src/main/java/expo/modules/systemui/singletons/SystemUI.kt

@@ -7,14 +7,14 @@ import androidx.appcompat.app.AppCompatDelegate
 object SystemUI {
   private const val TAG = "SystemUI"
 
-  fun setUserInterfaceStyle(
-    style: String,
+  private fun setUserInterfaceStyle(
+    style: String?,
     successCallback: () -> Unit,
     failureCallback: (reason: String) -> Unit
   ) {
 
     val mode = if (style == null) {
-      AppCompatDelegate.MODE_NIGHT_NO
+      AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM
     } else when (style) {
       "automatic" -> {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.P) {

package/build/ExpoSystemUI.web.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
     readonly name: string;
     getBackgroundColorAsync(): any;
-    setBackgroundColorAsync(color: string): void;
+    setBackgroundColorAsync(color: string | null): void;
 };
 export default _default;
 //# sourceMappingURL=ExpoSystemUI.web.d.ts.map

package/build/ExpoSystemUI.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoSystemUI.web.d.ts","sourceRoot":"","sources":["../src/ExpoSystemUI.web.ts"],"names":[],"mappings":";;;mCAeiC,MAAM;;AAXvC,wBAgBE"}
+{"version":3,"file":"ExpoSystemUI.web.d.ts","sourceRoot":"","sources":["../src/ExpoSystemUI.web.ts"],"names":[],"mappings":";;;mCAeiC,MAAM,GAAG,IAAI;;AAX9C,wBAgBE"}

package/build/ExpoSystemUI.web.js

@@ -15,7 +15,7 @@ export default {
     },
     setBackgroundColorAsync(color) {
         if (Platform.isDOMAvailable) {
-            document.body.style.backgroundColor = color;
+            document.body.style.backgroundColor = color ?? 'white';
         }
     },
 };

package/build/ExpoSystemUI.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoSystemUI.web.js","sourceRoot":"","sources":["../src/ExpoSystemUI.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,sBAAsB;AACtB,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAE9E,eAAe;IACb,IAAI,IAAI;QACN,OAAO,cAAc,CAAC;IACxB,CAAC;IACD,uBAAuB;QACrB,IAAI,QAAQ,CAAC,cAAc,EAAE;YAC3B,OAAO,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;SAC5D;aAAM;YACL,OAAO,IAAI,CAAC;SACb;IACH,CAAC;IACD,uBAAuB,CAAC,KAAa;QACnC,IAAI,QAAQ,CAAC,cAAc,EAAE;YAC3B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;SAC7C;IACH,CAAC;CACF,CAAC","sourcesContent":["import { Platform } from 'expo-modules-core';\n// @ts-ignore: untyped\nimport normalizeColor from 'react-native-web/dist/cjs/modules/normalizeColor';\n\nexport default {\n  get name(): string {\n    return 'ExpoSystemUI';\n  },\n  getBackgroundColorAsync() {\n    if (Platform.isDOMAvailable) {\n      return normalizeColor(document.body.style.backgroundColor);\n    } else {\n      return null;\n    }\n  },\n  setBackgroundColorAsync(color: string) {\n    if (Platform.isDOMAvailable) {\n      document.body.style.backgroundColor = color;\n    }\n  },\n};\n"]}
+{"version":3,"file":"ExpoSystemUI.web.js","sourceRoot":"","sources":["../src/ExpoSystemUI.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,sBAAsB;AACtB,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAE9E,eAAe;IACb,IAAI,IAAI;QACN,OAAO,cAAc,CAAC;IACxB,CAAC;IACD,uBAAuB;QACrB,IAAI,QAAQ,CAAC,cAAc,EAAE;YAC3B,OAAO,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;SAC5D;aAAM;YACL,OAAO,IAAI,CAAC;SACb;IACH,CAAC;IACD,uBAAuB,CAAC,KAAoB;QAC1C,IAAI,QAAQ,CAAC,cAAc,EAAE;YAC3B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,IAAI,OAAO,CAAC;SACxD;IACH,CAAC;CACF,CAAC","sourcesContent":["import { Platform } from 'expo-modules-core';\n// @ts-ignore: untyped\nimport normalizeColor from 'react-native-web/dist/cjs/modules/normalizeColor';\n\nexport default {\n  get name(): string {\n    return 'ExpoSystemUI';\n  },\n  getBackgroundColorAsync() {\n    if (Platform.isDOMAvailable) {\n      return normalizeColor(document.body.style.backgroundColor);\n    } else {\n      return null;\n    }\n  },\n  setBackgroundColorAsync(color: string | null) {\n    if (Platform.isDOMAvailable) {\n      document.body.style.backgroundColor = color ?? 'white';\n    }\n  },\n};\n"]}

package/build/SystemUI.d.ts

@@ -1,14 +1,15 @@
 import { ColorValue } from 'react-native';
 /**
  * Changes the root view background color.
+ * Call this function in the root file outside of you component.
  *
  * @example
  * ```ts
- * SystemUI.setBackgroundColorAsync("white");
+ * SystemUI.setBackgroundColorAsync("black");
  * ```
  * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
  */
-export declare function setBackgroundColorAsync(color: ColorValue): Promise<void>;
+export declare function setBackgroundColorAsync(color: ColorValue | null): Promise<void>;
 /**
  * Gets the root view background color.
  *

package/build/SystemUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemUI.d.ts","sourceRoot":"","sources":["../src/SystemUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,cAAc,CAAC;AAIlE;;;;;;;;GAQG;AACH,wBAAsB,uBAAuB,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAG9E;AAED;;;;;;;;GAQG;AACH,wBAAsB,uBAAuB,IAAI,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAE1E"}
+{"version":3,"file":"SystemUI.d.ts","sourceRoot":"","sources":["../src/SystemUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,cAAc,CAAC;AAIlE;;;;;;;;;GASG;AACH,wBAAsB,uBAAuB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAOrF;AAED;;;;;;;;GAQG;AACH,wBAAsB,uBAAuB,IAAI,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAE1E"}

package/build/SystemUI.js

@@ -2,16 +2,22 @@ import { Platform, processColor } from 'react-native';
 import ExpoSystemUI from './ExpoSystemUI';
 /**
  * Changes the root view background color.
+ * Call this function in the root file outside of you component.
  *
  * @example
  * ```ts
- * SystemUI.setBackgroundColorAsync("white");
+ * SystemUI.setBackgroundColorAsync("black");
  * ```
  * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
  */
 export async function setBackgroundColorAsync(color) {
-    const colorNumber = Platform.OS === 'web' ? color : processColor(color);
-    return await ExpoSystemUI.setBackgroundColorAsync(colorNumber);
+    if (color == null) {
+        return await ExpoSystemUI.setBackgroundColorAsync(null);
+    }
+    else {
+        const colorNumber = Platform.OS === 'web' ? color : processColor(color);
+        return await ExpoSystemUI.setBackgroundColorAsync(colorNumber);
+    }
 }
 /**
  * Gets the root view background color.

package/build/SystemUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemUI.js","sourceRoot":"","sources":["../src/SystemUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C;;;;;;;;GAQG;AACH,MAAM,CAAC,KAAK,UAAU,uBAAuB,CAAC,KAAiB;IAC7D,MAAM,WAAW,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACxE,OAAO,MAAM,YAAY,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC;AACjE,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,KAAK,UAAU,uBAAuB;IAC3C,OAAO,MAAM,YAAY,CAAC,uBAAuB,EAAE,CAAC;AACtD,CAAC","sourcesContent":["import { ColorValue, Platform, processColor } from 'react-native';\n\nimport ExpoSystemUI from './ExpoSystemUI';\n\n/**\n * Changes the root view background color.\n *\n * @example\n * ```ts\n * SystemUI.setBackgroundColorAsync(\"white\");\n * ```\n * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).\n */\nexport async function setBackgroundColorAsync(color: ColorValue): Promise<void> {\n  const colorNumber = Platform.OS === 'web' ? color : processColor(color);\n  return await ExpoSystemUI.setBackgroundColorAsync(colorNumber);\n}\n\n/**\n * Gets the root view background color.\n *\n * @example\n * ```ts\n * const color = await SystemUI.getBackgroundColorAsync();\n * ```\n * @returns Current root view background color in hex format. Returns `null` if the background color is not set.\n */\nexport async function getBackgroundColorAsync(): Promise<ColorValue | null> {\n  return await ExpoSystemUI.getBackgroundColorAsync();\n}\n"]}
+{"version":3,"file":"SystemUI.js","sourceRoot":"","sources":["../src/SystemUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C;;;;;;;;;GASG;AACH,MAAM,CAAC,KAAK,UAAU,uBAAuB,CAAC,KAAwB;IACpE,IAAI,KAAK,IAAI,IAAI,EAAE;QACjB,OAAO,MAAM,YAAY,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;KACzD;SAAM;QACL,MAAM,WAAW,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACxE,OAAO,MAAM,YAAY,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC;KAChE;AACH,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,KAAK,UAAU,uBAAuB;IAC3C,OAAO,MAAM,YAAY,CAAC,uBAAuB,EAAE,CAAC;AACtD,CAAC","sourcesContent":["import { ColorValue, Platform, processColor } from 'react-native';\n\nimport ExpoSystemUI from './ExpoSystemUI';\n\n/**\n * Changes the root view background color.\n * Call this function in the root file outside of you component.\n *\n * @example\n * ```ts\n * SystemUI.setBackgroundColorAsync(\"black\");\n * ```\n * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).\n */\nexport async function setBackgroundColorAsync(color: ColorValue | null): Promise<void> {\n  if (color == null) {\n    return await ExpoSystemUI.setBackgroundColorAsync(null);\n  } else {\n    const colorNumber = Platform.OS === 'web' ? color : processColor(color);\n    return await ExpoSystemUI.setBackgroundColorAsync(colorNumber);\n  }\n}\n\n/**\n * Gets the root view background color.\n *\n * @example\n * ```ts\n * const color = await SystemUI.getBackgroundColorAsync();\n * ```\n * @returns Current root view background color in hex format. Returns `null` if the background color is not set.\n */\nexport async function getBackgroundColorAsync(): Promise<ColorValue | null> {\n  return await ExpoSystemUI.getBackgroundColorAsync();\n}\n"]}

package/ios/ExpoSystemUI/ExpoSystemUIModule.swift

@@ -3,21 +3,27 @@
 import ExpoModulesCore
 
 public class ExpoSystemUIModule: Module {
+  private static let colorKey = "ExpoSystemUI.backgroundColor"
   public func definition() -> ModuleDefinition {
     Name("ExpoSystemUI")
 
     OnCreate {
       // TODO: Maybe read from the app manifest instead of from Info.plist.
       // Set / reset the initial color on reload and app start.
-      let color = Bundle.main.object(forInfoDictionaryKey: "RCTRootViewBackgroundColor") as? Int
-      Self.setBackgroundColorAsync(color: color)
+      let color = UserDefaults.standard.integer(forKey: Self.colorKey)
+
+      if color > 0 {
+        Self.setBackgroundColorAsync(color: color)
+      } else {
+        Self.setBackgroundColorAsync(color: nil)
+      }
     }
 
     AsyncFunction("getBackgroundColorAsync") { () -> String? in
       Self.getBackgroundColor()
     }
 
-    AsyncFunction("setBackgroundColorAsync") { (color: Int) in
+    AsyncFunction("setBackgroundColorAsync") { (color: Int?) in
       Self.setBackgroundColorAsync(color: color)
     }
   }
@@ -37,11 +43,22 @@ public class ExpoSystemUIModule: Module {
     EXUtilities.performSynchronously {
       if color == nil {
         if let window = UIApplication.shared.delegate?.window {
+          UserDefaults.standard.removeObject(forKey: colorKey)
+          let interfaceStyle = window?.traitCollection.userInterfaceStyle
           window?.backgroundColor = nil
-          window?.rootViewController?.view.backgroundColor = UIColor.white
+
+          switch interfaceStyle {
+          case .dark:
+            window?.rootViewController?.view.backgroundColor = .black
+          case .light:
+            window?.rootViewController?.view.backgroundColor = .white
+          default:
+            window?.rootViewController?.view.backgroundColor = .white
+          }
         }
         return
       }
+      UserDefaults.standard.set(color, forKey: colorKey)
       let backgroundColor = EXUtilities.uiColor(color)
       // Set the app-wide window, this could have future issues when running multiple React apps,
       // i.e. dev client can't use expo-system-ui.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-system-ui",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "description": "Interact with system UI elements",
   "main": "build/SystemUI.js",
   "types": "build/SystemUI.d.ts",
@@ -44,5 +44,5 @@
   "peerDependencies": {
     "expo": "*"
   },
-  "gitHead": "1f8a6a09570fd451378565ca34933018ce48454e"
+  "gitHead": "fa5ecca8251986b9f197cc14074eec0ab6dfb6db"
 }

package/src/ExpoSystemUI.web.ts

@@ -13,9 +13,9 @@ export default {
       return null;
     }
   },
-  setBackgroundColorAsync(color: string) {
+  setBackgroundColorAsync(color: string | null) {
     if (Platform.isDOMAvailable) {
-      document.body.style.backgroundColor = color;
+      document.body.style.backgroundColor = color ?? 'white';
     }
   },
 };

package/src/SystemUI.ts

@@ -4,16 +4,21 @@ import ExpoSystemUI from './ExpoSystemUI';
 
 /**
  * Changes the root view background color.
+ * Call this function in the root file outside of you component.
  *
  * @example
  * ```ts
- * SystemUI.setBackgroundColorAsync("white");
+ * SystemUI.setBackgroundColorAsync("black");
  * ```
  * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
  */
-export async function setBackgroundColorAsync(color: ColorValue): Promise<void> {
-  const colorNumber = Platform.OS === 'web' ? color : processColor(color);
-  return await ExpoSystemUI.setBackgroundColorAsync(colorNumber);
+export async function setBackgroundColorAsync(color: ColorValue | null): Promise<void> {
+  if (color == null) {
+    return await ExpoSystemUI.setBackgroundColorAsync(null);
+  } else {
+    const colorNumber = Platform.OS === 'web' ? color : processColor(color);
+    return await ExpoSystemUI.setBackgroundColorAsync(colorNumber);
+  }
 }
 
 /**