@amazon-devices/expo-system-ui 2.0.1758683737

package/plugin/build/withAndroidUserInterfaceStyle.d.ts

@@ -0,0 +1,8 @@
+import { ExpoConfig } from 'expo/config';
+import { AndroidConfig, ConfigPlugin } from 'expo/config-plugins';
+export type Props = {
+    userInterfaceStyle?: ExpoConfig['userInterfaceStyle'];
+};
+export declare const withAndroidUserInterfaceStyle: ConfigPlugin<void>;
+export declare function resolveProps(config: Pick<ExpoConfig, 'userInterfaceStyle' | 'android'>): Props;
+export declare function setStrings(strings: AndroidConfig.Resources.ResourceXML, { userInterfaceStyle }: Props): AndroidConfig.Resources.ResourceXML;

package/plugin/build/withAndroidUserInterfaceStyle.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAndroidUserInterfaceStyle = void 0;
+exports.resolveProps = resolveProps;
+exports.setStrings = setStrings;
+const assert_1 = __importDefault(require("assert"));
+const config_plugins_1 = require("expo/config-plugins");
+// strings.xml keys, this should not change.
+const USER_INTERFACE_STYLE_KEY = 'expo_system_ui_user_interface_style';
+const withAndroidUserInterfaceStyle = (config) => {
+    return (0, config_plugins_1.withStringsXml)(config, (config) => {
+        config.modResults = setStrings(config.modResults, resolveProps(config));
+        return config;
+    });
+};
+exports.withAndroidUserInterfaceStyle = withAndroidUserInterfaceStyle;
+function resolveProps(config) {
+    const userInterfaceStyle = config.android?.userInterfaceStyle ?? config.userInterfaceStyle;
+    (0, assert_1.default)(!userInterfaceStyle || ['automatic', 'light', 'dark'].includes(userInterfaceStyle), `expo-system-ui: Invalid userInterfaceStyle: "${userInterfaceStyle}"`);
+    return { userInterfaceStyle };
+}
+function setStrings(strings, { userInterfaceStyle }) {
+    const pairs = [[USER_INTERFACE_STYLE_KEY, userInterfaceStyle]];
+    const stringItems = [];
+    for (const [key, value] of pairs) {
+        if (value == null) {
+            // Since we're using custom strings, we can remove them for convenience between prebuilds.
+            strings = config_plugins_1.AndroidConfig.Strings.removeStringItem(key, strings);
+        }
+        else {
+            stringItems.push(config_plugins_1.AndroidConfig.Resources.buildResourceItem({
+                name: key,
+                value: String(value),
+                translatable: false,
+            }));
+        }
+    }
+    return config_plugins_1.AndroidConfig.Strings.setStringItem(stringItems, strings);
+}

package/plugin/build/withIosRootViewBackgroundColor.d.ts

@@ -0,0 +1,5 @@
+import { ExpoConfig } from 'expo/config';
+import { ConfigPlugin, InfoPlist } from 'expo/config-plugins';
+export declare const withIosRootViewBackgroundColor: ConfigPlugin;
+export declare function setRootViewBackgroundColor(config: Pick<ExpoConfig, 'backgroundColor' | 'ios'>, infoPlist: InfoPlist): InfoPlist;
+export declare function getRootViewBackgroundColor(config: Pick<ExpoConfig, 'ios' | 'backgroundColor'>): string | null;

package/plugin/build/withIosRootViewBackgroundColor.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withIosRootViewBackgroundColor = void 0;
+exports.setRootViewBackgroundColor = setRootViewBackgroundColor;
+exports.getRootViewBackgroundColor = getRootViewBackgroundColor;
+// @ts-ignore: uses flow
+const normalize_color_1 = __importDefault(require("@react-native/normalize-color"));
+const config_plugins_1 = require("expo/config-plugins");
+// Maps to the template AppDelegate.m
+const BACKGROUND_COLOR_KEY = 'RCTRootViewBackgroundColor';
+const debug = require('debug')('expo:system-ui:plugin:ios');
+const withIosRootViewBackgroundColor = (config) => {
+    config = (0, config_plugins_1.withInfoPlist)(config, (config) => {
+        config.modResults = setRootViewBackgroundColor(config, config.modResults);
+        return config;
+    });
+    return config;
+};
+exports.withIosRootViewBackgroundColor = withIosRootViewBackgroundColor;
+function setRootViewBackgroundColor(config, infoPlist) {
+    const backgroundColor = getRootViewBackgroundColor(config);
+    if (!backgroundColor) {
+        delete infoPlist[BACKGROUND_COLOR_KEY];
+    }
+    else {
+        let color = (0, normalize_color_1.default)(backgroundColor);
+        if (!color) {
+            throw new Error('Invalid background color on iOS');
+        }
+        color = ((color << 24) | (color >>> 8)) >>> 0;
+        infoPlist[BACKGROUND_COLOR_KEY] = color;
+        debug(`Convert color: ${backgroundColor} -> ${color}`);
+    }
+    return infoPlist;
+}
+function getRootViewBackgroundColor(config) {
+    return config.ios?.backgroundColor || config.backgroundColor || null;
+}

package/plugin/build/withIosUserInterfaceStyle.d.ts

@@ -0,0 +1,5 @@
+import { ExpoConfig } from 'expo/config';
+import { InfoPlist, ConfigPlugin } from 'expo/config-plugins';
+export declare const withIosUserInterfaceStyle: ConfigPlugin;
+export declare function getUserInterfaceStyle(config: Pick<ExpoConfig, 'ios' | 'userInterfaceStyle'>): string;
+export declare function setUserInterfaceStyle(config: Pick<ExpoConfig, 'ios' | 'userInterfaceStyle'>, { UIUserInterfaceStyle, ...infoPlist }: InfoPlist): InfoPlist;

package/plugin/build/withIosUserInterfaceStyle.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withIosUserInterfaceStyle = void 0;
+exports.getUserInterfaceStyle = getUserInterfaceStyle;
+exports.setUserInterfaceStyle = setUserInterfaceStyle;
+const config_plugins_1 = require("expo/config-plugins");
+const withIosUserInterfaceStyle = (config) => {
+    return (0, config_plugins_1.withInfoPlist)(config, (config) => {
+        config.modResults = setUserInterfaceStyle(config, config.modResults);
+        return config;
+    });
+};
+exports.withIosUserInterfaceStyle = withIosUserInterfaceStyle;
+function getUserInterfaceStyle(config) {
+    return config.ios?.userInterfaceStyle ?? config.userInterfaceStyle ?? 'light';
+}
+function setUserInterfaceStyle(config, { UIUserInterfaceStyle, ...infoPlist }) {
+    const userInterfaceStyle = getUserInterfaceStyle(config);
+    const style = mapUserInterfaceStyleForInfoPlist(userInterfaceStyle);
+    if (!style) {
+        return infoPlist;
+    }
+    return {
+        ...infoPlist,
+        UIUserInterfaceStyle: style,
+    };
+}
+function mapUserInterfaceStyleForInfoPlist(userInterfaceStyle) {
+    switch (userInterfaceStyle) {
+        case 'light':
+            return 'Light';
+        case 'dark':
+            return 'Dark';
+        case 'automatic':
+            return 'Automatic';
+    }
+    return null;
+}

package/plugin/build/withSystemUI.d.ts

@@ -0,0 +1,3 @@
+import { ConfigPlugin } from 'expo/config-plugins';
+declare const _default: ConfigPlugin<void>;
+export default _default;

package/plugin/build/withSystemUI.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_plugins_1 = require("expo/config-plugins");
+const withAndroidRootViewBackgroundColor_1 = require("./withAndroidRootViewBackgroundColor");
+const withAndroidUserInterfaceStyle_1 = require("./withAndroidUserInterfaceStyle");
+const withIosRootViewBackgroundColor_1 = require("./withIosRootViewBackgroundColor");
+const withIosUserInterfaceStyle_1 = require("./withIosUserInterfaceStyle");
+const pkg = require('expo-system-ui/package.json');
+const withSystemUI = (config) => {
+    return (0, config_plugins_1.withPlugins)(config, [
+        withAndroidRootViewBackgroundColor_1.withAndroidRootViewBackgroundColor,
+        withIosRootViewBackgroundColor_1.withIosRootViewBackgroundColor,
+        withAndroidUserInterfaceStyle_1.withAndroidUserInterfaceStyle,
+        withIosUserInterfaceStyle_1.withIosUserInterfaceStyle,
+    ]);
+};
+exports.default = (0, config_plugins_1.createRunOncePlugin)(withSystemUI, pkg.name, pkg.version);

package/plugin/src/withAndroidRootViewBackgroundColor.ts

@@ -0,0 +1,47 @@
+import { ExpoConfig } from 'expo/config';
+import {
+  AndroidConfig,
+  ConfigPlugin,
+  withAndroidColors,
+  withAndroidStyles,
+} from 'expo/config-plugins';
+
+const { assignColorValue } = AndroidConfig.Colors;
+const { assignStylesValue, getAppThemeLightNoActionBarGroup } = AndroidConfig.Styles;
+
+const ANDROID_WINDOW_BACKGROUND = 'android:windowBackground';
+const WINDOW_BACKGROUND_COLOR = 'activityBackground';
+
+export const withAndroidRootViewBackgroundColor: ConfigPlugin = (config) => {
+  config = withRootViewBackgroundColorColors(config);
+  config = withRootViewBackgroundColorStyles(config);
+  return config;
+};
+
+export const withRootViewBackgroundColorColors: ConfigPlugin = (config) => {
+  return withAndroidColors(config, async (config) => {
+    config.modResults = assignColorValue(config.modResults, {
+      value: getRootViewBackgroundColor(config),
+      name: WINDOW_BACKGROUND_COLOR,
+    });
+    return config;
+  });
+};
+
+export const withRootViewBackgroundColorStyles: ConfigPlugin = (config) => {
+  return withAndroidStyles(config, async (config) => {
+    config.modResults = assignStylesValue(config.modResults, {
+      add: !!getRootViewBackgroundColor(config),
+      parent: getAppThemeLightNoActionBarGroup(),
+      name: ANDROID_WINDOW_BACKGROUND,
+      value: `@color/${WINDOW_BACKGROUND_COLOR}`,
+    });
+    return config;
+  });
+};
+
+export function getRootViewBackgroundColor(
+  config: Pick<ExpoConfig, 'android' | 'backgroundColor'>
+) {
+  return config.android?.backgroundColor || config.backgroundColor || null;
+}

package/plugin/src/withAndroidUserInterfaceStyle.ts

@@ -0,0 +1,53 @@
+import assert from 'assert';
+import { ExpoConfig } from 'expo/config';
+import { AndroidConfig, ConfigPlugin, withStringsXml } from 'expo/config-plugins';
+
+export type Props = {
+  userInterfaceStyle?: ExpoConfig['userInterfaceStyle'];
+};
+
+// strings.xml keys, this should not change.
+const USER_INTERFACE_STYLE_KEY = 'expo_system_ui_user_interface_style';
+
+export const withAndroidUserInterfaceStyle: ConfigPlugin<void> = (config) => {
+  return withStringsXml(config, (config) => {
+    config.modResults = setStrings(config.modResults, resolveProps(config));
+    return config;
+  });
+};
+
+export function resolveProps(config: Pick<ExpoConfig, 'userInterfaceStyle' | 'android'>): Props {
+  const userInterfaceStyle = config.android?.userInterfaceStyle ?? config.userInterfaceStyle;
+
+  assert(
+    !userInterfaceStyle || ['automatic', 'light', 'dark'].includes(userInterfaceStyle),
+    `expo-system-ui: Invalid userInterfaceStyle: "${userInterfaceStyle}"`
+  );
+
+  return { userInterfaceStyle };
+}
+
+export function setStrings(
+  strings: AndroidConfig.Resources.ResourceXML,
+  { userInterfaceStyle }: Props
+): AndroidConfig.Resources.ResourceXML {
+  const pairs = [[USER_INTERFACE_STYLE_KEY, userInterfaceStyle]] as [string, any][];
+
+  const stringItems: AndroidConfig.Resources.ResourceItemXML[] = [];
+  for (const [key, value] of pairs) {
+    if (value == null) {
+      // Since we're using custom strings, we can remove them for convenience between prebuilds.
+      strings = AndroidConfig.Strings.removeStringItem(key, strings);
+    } else {
+      stringItems.push(
+        AndroidConfig.Resources.buildResourceItem({
+          name: key,
+          value: String(value),
+          translatable: false,
+        })
+      );
+    }
+  }
+
+  return AndroidConfig.Strings.setStringItem(stringItems, strings);
+}

package/plugin/src/withIosRootViewBackgroundColor.ts

@@ -0,0 +1,41 @@
+// @ts-ignore: uses flow
+import normalizeColor from '@react-native/normalize-color';
+import { ExpoConfig } from 'expo/config';
+import { ConfigPlugin, InfoPlist, withInfoPlist } from 'expo/config-plugins';
+
+// Maps to the template AppDelegate.m
+const BACKGROUND_COLOR_KEY = 'RCTRootViewBackgroundColor';
+
+const debug = require('debug')('expo:system-ui:plugin:ios');
+
+export const withIosRootViewBackgroundColor: ConfigPlugin = (config) => {
+  config = withInfoPlist(config, (config) => {
+    config.modResults = setRootViewBackgroundColor(config, config.modResults);
+    return config;
+  });
+  return config;
+};
+
+export function setRootViewBackgroundColor(
+  config: Pick<ExpoConfig, 'backgroundColor' | 'ios'>,
+  infoPlist: InfoPlist
+): InfoPlist {
+  const backgroundColor = getRootViewBackgroundColor(config);
+  if (!backgroundColor) {
+    delete infoPlist[BACKGROUND_COLOR_KEY];
+  } else {
+    let color = normalizeColor(backgroundColor);
+    if (!color) {
+      throw new Error('Invalid background color on iOS');
+    }
+    color = ((color << 24) | (color >>> 8)) >>> 0;
+    infoPlist[BACKGROUND_COLOR_KEY] = color;
+
+    debug(`Convert color: ${backgroundColor} -> ${color}`);
+  }
+  return infoPlist;
+}
+
+export function getRootViewBackgroundColor(config: Pick<ExpoConfig, 'ios' | 'backgroundColor'>) {
+  return config.ios?.backgroundColor || config.backgroundColor || null;
+}

package/plugin/src/withIosUserInterfaceStyle.ts

@@ -0,0 +1,47 @@
+import { ExpoConfig } from 'expo/config';
+import { InfoPlist, ConfigPlugin, withInfoPlist } from 'expo/config-plugins';
+
+export const withIosUserInterfaceStyle: ConfigPlugin = (config) => {
+  return withInfoPlist(config, (config) => {
+    config.modResults = setUserInterfaceStyle(config, config.modResults);
+    return config;
+  });
+};
+
+export function getUserInterfaceStyle(
+  config: Pick<ExpoConfig, 'ios' | 'userInterfaceStyle'>
+): string {
+  return config.ios?.userInterfaceStyle ?? config.userInterfaceStyle ?? 'light';
+}
+
+export function setUserInterfaceStyle(
+  config: Pick<ExpoConfig, 'ios' | 'userInterfaceStyle'>,
+  { UIUserInterfaceStyle, ...infoPlist }: InfoPlist
+): InfoPlist {
+  const userInterfaceStyle = getUserInterfaceStyle(config);
+  const style = mapUserInterfaceStyleForInfoPlist(userInterfaceStyle);
+
+  if (!style) {
+    return infoPlist;
+  }
+
+  return {
+    ...infoPlist,
+    UIUserInterfaceStyle: style,
+  };
+}
+
+function mapUserInterfaceStyleForInfoPlist(
+  userInterfaceStyle: string
+): NonNullable<InfoPlist['UIUserInterfaceStyle']> | null {
+  switch (userInterfaceStyle) {
+    case 'light':
+      return 'Light';
+    case 'dark':
+      return 'Dark';
+    case 'automatic':
+      return 'Automatic';
+  }
+
+  return null;
+}

package/plugin/src/withSystemUI.ts

@@ -0,0 +1,19 @@
+import { ConfigPlugin, createRunOncePlugin, withPlugins } from 'expo/config-plugins';
+
+import { withAndroidRootViewBackgroundColor } from './withAndroidRootViewBackgroundColor';
+import { withAndroidUserInterfaceStyle } from './withAndroidUserInterfaceStyle';
+import { withIosRootViewBackgroundColor } from './withIosRootViewBackgroundColor';
+import { withIosUserInterfaceStyle } from './withIosUserInterfaceStyle';
+
+const pkg = require('expo-system-ui/package.json');
+
+const withSystemUI: ConfigPlugin = (config) => {
+  return withPlugins(config, [
+    withAndroidRootViewBackgroundColor,
+    withIosRootViewBackgroundColor,
+    withAndroidUserInterfaceStyle,
+    withIosUserInterfaceStyle,
+  ]);
+};
+
+export default createRunOncePlugin(withSystemUI, pkg.name, pkg.version);

package/plugin/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "expo-module-scripts/tsconfig.plugin",
+  "compilerOptions": {
+    "outDir": "build",
+    "rootDir": "src"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+}

package/plugin/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/withAndroidRootViewBackgroundColor.ts","./src/withAndroidUserInterfaceStyle.ts","./src/withIosRootViewBackgroundColor.ts","./src/withIosUserInterfaceStyle.ts","./src/withSystemUI.ts"],"version":"5.7.2"}

package/react-native.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    dependencies: {
+        '@amazon-devices/react-native-kepler': {
+            platforms: {
+                kepler: null,  // do not use platform definition from @react-native-kepler
+            },
+        },
+    },
+    dependency: {
+        platforms: {
+            kepler: {
+                autolink: {
+                    ExpoSystemUILib: {
+                        provider: 'system',
+                        turbomodules: ['ExpoSystemUI'],
+                    },
+                },
+            },
+        },
+    },
+};

package/src/ExpoSystemUI.kepler.ts

@@ -0,0 +1,27 @@
+import { KeplerTurboModule, TurboModuleRegistry } from '@amazon-devices/keplerscript-turbomodule-api';
+
+interface Spec extends KeplerTurboModule {
+  readonly getBackgroundColorAsync: () => Promise<string>;
+  readonly resetBackgroundColorAsync: () => Promise<void>;
+  readonly setBackgroundColorAsync: (color: number) => Promise<void>;
+}
+
+const nativeModule = TurboModuleRegistry.getEnforcing<Spec>('ExpoSystemUI') as Spec;
+
+interface KeplerSystemUI {
+  readonly getBackgroundColorAsync: () => Promise<string | null>;
+  readonly setBackgroundColorAsync: (color: number | null) => Promise<void | null>;
+}
+
+const module: KeplerSystemUI = {
+  async getBackgroundColorAsync() {
+    return nativeModule.getBackgroundColorAsync();
+  },
+  async setBackgroundColorAsync(color: number | null) {
+    return color
+      ? nativeModule.setBackgroundColorAsync(color)
+      : nativeModule.resetBackgroundColorAsync();
+  },
+};
+
+export default module;

package/src/ExpoSystemUI.ts

@@ -0,0 +1,2 @@
+import { requireNativeModule } from 'expo-modules-core';
+export default requireNativeModule('ExpoSystemUI');

package/src/ExpoSystemUI.web.ts

@@ -0,0 +1,21 @@
+import { Platform } from 'expo-modules-core';
+// @ts-ignore: untyped
+import normalizeColor from 'react-native-web/dist/cjs/modules/normalizeColor';
+
+export default {
+  get name(): string {
+    return 'ExpoSystemUI';
+  },
+  getBackgroundColorAsync() {
+    if (Platform.isDOMAvailable) {
+      return normalizeColor(document.body.style.backgroundColor);
+    } else {
+      return null;
+    }
+  },
+  setBackgroundColorAsync(color: string | null) {
+    if (Platform.isDOMAvailable) {
+      document.body.style.backgroundColor = color ?? 'white';
+    }
+  },
+};

package/src/SystemUI.ts

@@ -0,0 +1,35 @@
+import { ColorValue, 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("black");
+ * ```
+ * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
+ */
+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);
+  }
+}
+
+/**
+ * Gets the root view background color.
+ *
+ * @example
+ * ```ts
+ * const color = await SystemUI.getBackgroundColorAsync();
+ * ```
+ * @returns Current root view background color in hex format. Returns `null` if the background color is not set.
+ */
+export async function getBackgroundColorAsync(): Promise<ColorValue | null> {
+  return await ExpoSystemUI.getBackgroundColorAsync();
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+}