react-native-edge-to-edge 0.0.0 → 0.1.1

package/package.json

@@ -1,11 +1,78 @@
 {
   "name": "react-native-edge-to-edge",
-  "version": "0.0.0",
-  "main": "index.js",
+  "version": "0.1.1",
+  "license": "MIT",
+  "description": "Effortlessly enable edge-to-edge display in React Native",
+  "author": "Mathieu Acthernoene <zoontek@gmail.com>",
+  "homepage": "https://github.com/zoontek/react-native-edge-to-edge",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/module/index.js",
+  "types": "dist/typescript/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "app.plugin.js",
+    "android",
+    "!android/build",
+    "!android/.cxx",
+    "!android/.gradle"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zoontek/react-native-edge-to-edge.git"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "edge-to-edge",
+    "status-bar",
+    "navigation-bar",
+    "system-bar",
+    "system-bars"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "clean": "rm -rf dist",
+    "format": "prettier '**/*' -u -w",
+    "typecheck": "tsc --noEmit",
+    "build": "yarn clean && bob build && rm -rf dist/commonjs/package.json",
+    "prepack": "prettier '**/*' -u -c && yarn typecheck && yarn build"
   },
-  "author": "",
-  "license": "MIT",
-  "description": ""
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-organize-imports"
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.73.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@expo/config-plugins": "^7.0.0 || ^8.0.0",
+    "@types/react": "^18.2.6",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "react": "18.3.1",
+    "react-native": "0.75.4",
+    "react-native-builder-bob": "^0.30.2",
+    "typescript": "^5.6.3"
+  },
+  "codegenConfig": {
+    "name": "RNEdgeToEdgeSpec",
+    "type": "modules",
+    "jsSrcsDir": "./src",
+    "android": {
+      "javaPackageName": "com.zoontek.rnedgetoedge"
+    }
+  }
 }

package/src/NativeRNEdgeToEdge.ts

@@ -0,0 +1,14 @@
+import type { TurboModule } from "react-native";
+import { TurboModuleRegistry } from "react-native";
+
+type SystemBarsConfig = {
+  statusBarHidden: boolean | undefined;
+  statusBarStyle: string | undefined;
+  navigationBarHidden: boolean | undefined;
+};
+
+export interface Spec extends TurboModule {
+  setSystemBarsConfig(config: SystemBarsConfig): void;
+}
+
+export default TurboModuleRegistry.get<Spec>("RNEdgeToEdge");

package/src/SystemBars.ts

@@ -0,0 +1,222 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Appearance, Platform, StatusBar, useColorScheme } from "react-native";
+import NativeModule from "./NativeRNEdgeToEdge";
+import { SystemBarsEntry, SystemBarsProps } from "./types";
+
+function getColorScheme(): "light" | "dark" {
+  return Appearance?.getColorScheme() ?? "light";
+}
+
+/**
+ * Merges the entries stack.
+ */
+function mergeEntriesStack(
+  entriesStack: SystemBarsEntry[],
+): SystemBarsEntry | null {
+  const mergedEntry = entriesStack.reduce<SystemBarsEntry>(
+    (prev, cur) => {
+      for (const prop in cur) {
+        if (cur[prop as keyof SystemBarsEntry] != null) {
+          // @ts-expect-error
+          prev[prop] = cur[prop];
+        }
+      }
+      return prev;
+    },
+    {
+      statusBarStyle: undefined,
+      statusBarHidden: undefined,
+      navigationBarHidden: undefined,
+    },
+  );
+
+  if (
+    mergedEntry.statusBarStyle == null &&
+    mergedEntry.statusBarHidden == null &&
+    mergedEntry.navigationBarHidden == null
+  ) {
+    return null;
+  } else {
+    return mergedEntry;
+  }
+}
+
+/**
+ * Returns an object to insert in the props stack from the props.
+ */
+function createStackEntry(props: SystemBarsProps): SystemBarsEntry {
+  return {
+    statusBarStyle: props.style,
+    statusBarHidden:
+      typeof props.hidden === "boolean"
+        ? props.hidden
+        : props.hidden?.statusBar,
+    navigationBarHidden:
+      typeof props.hidden === "boolean"
+        ? props.hidden
+        : props.hidden?.navigationBar,
+  };
+}
+
+const entriesStack: SystemBarsEntry[] = [];
+
+// Timer for updating the native module values at the end of the frame.
+let updateImmediate: NodeJS.Immediate | null = null;
+
+// The current merged values from the entries stack.
+let currentMergedEntries: {
+  statusBarStyle: "light" | "dark" | undefined;
+  statusBarHidden: boolean | undefined;
+  navigationBarHidden: boolean | undefined;
+} | null = null;
+
+/**
+ * Updates the native system bars with the entries from the stack.
+ */
+function updateEntriesStack() {
+  if (updateImmediate != null) {
+    clearImmediate(updateImmediate);
+  }
+
+  updateImmediate = setImmediate(() => {
+    const mergedEntries = mergeEntriesStack(entriesStack);
+
+    if (mergedEntries != null) {
+      const { statusBarHidden, navigationBarHidden } = mergedEntries;
+
+      const statusBarStyle: "light" | "dark" | undefined =
+        mergedEntries.statusBarStyle === "auto"
+          ? getColorScheme() === "light"
+            ? "dark"
+            : "light"
+          : mergedEntries.statusBarStyle;
+
+      if (
+        currentMergedEntries?.statusBarStyle !== statusBarStyle ||
+        currentMergedEntries?.statusBarHidden !== statusBarHidden ||
+        currentMergedEntries?.navigationBarHidden !== navigationBarHidden
+      ) {
+        if (Platform.OS === "android") {
+          NativeModule?.setSystemBarsConfig({
+            statusBarStyle,
+            statusBarHidden,
+            navigationBarHidden,
+          });
+        } else if (Platform.OS === "ios") {
+          // Emulate android behavior with react-native StatusBar
+          if (statusBarStyle != null) {
+            StatusBar.setBarStyle(`${statusBarStyle}-content`, true);
+          }
+          if (statusBarHidden != null) {
+            StatusBar.setHidden(statusBarHidden, "fade"); // 'slide' doesn't work in this context
+          }
+        }
+      }
+
+      currentMergedEntries = {
+        statusBarStyle,
+        statusBarHidden,
+        navigationBarHidden,
+      };
+    } else {
+      currentMergedEntries = null;
+    }
+  });
+}
+
+/**
+ * Push a SystemBars entry onto the stack.
+ * The return value should be passed to `popStackEntry` when complete.
+ *
+ * @param props Object containing the SystemBars props to use in the stack entry.
+ */
+function pushStackEntry(props: SystemBarsProps): SystemBarsEntry {
+  const entry = createStackEntry(props);
+  entriesStack.push(entry);
+  updateEntriesStack();
+  return entry;
+}
+
+/**
+ * Pop a SystemBars entry from the stack.
+ *
+ * @param entry Entry returned from `pushStackEntry`.
+ */
+function popStackEntry(entry: SystemBarsEntry): void {
+  const index = entriesStack.indexOf(entry);
+  if (index !== -1) {
+    entriesStack.splice(index, 1);
+  }
+  updateEntriesStack();
+}
+
+/**
+ * Replace an existing SystemBars stack entry with new props.
+ *
+ * @param entry Entry returned from `pushStackEntry` to replace.
+ * @param props Object containing the SystemBars props to use in the replacement stack entry.
+ */
+function replaceStackEntry(
+  entry: SystemBarsEntry,
+  props: SystemBarsProps,
+): SystemBarsEntry {
+  const newEntry = createStackEntry(props);
+  const index = entriesStack.indexOf(entry);
+  if (index !== -1) {
+    entriesStack[index] = newEntry;
+  }
+  updateEntriesStack();
+  return newEntry;
+}
+
+export function SystemBars({ hidden, style }: SystemBarsProps) {
+  const statusBarHidden =
+    typeof hidden === "boolean" ? hidden : hidden?.statusBar;
+  const navigationBarHidden =
+    typeof hidden === "boolean" ? hidden : hidden?.navigationBar;
+
+  const stableProps = useMemo<SystemBarsProps>(
+    () => ({
+      hidden:
+        statusBarHidden === navigationBarHidden
+          ? statusBarHidden
+          : { statusBar: statusBarHidden, navigationBar: navigationBarHidden },
+      style,
+    }),
+    [style, statusBarHidden, navigationBarHidden],
+  );
+
+  const colorScheme = useColorScheme();
+  const stackEntryRef = useRef<SystemBarsEntry | null>(null);
+
+  useEffect(() => {
+    // Every time a SystemBars component is mounted, we push it's prop to a stack
+    // and always update the native system bars with the props from the top of then
+    // stack. This allows having multiple SystemBars components and the one that is
+    // added last or is deeper in the view hierarchy will have priority.
+    stackEntryRef.current = pushStackEntry(stableProps);
+
+    return () => {
+      // When a SystemBars is unmounted, remove itself from the stack and update
+      // the native bars with the next props.
+      if (stackEntryRef.current) {
+        popStackEntry(stackEntryRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (stackEntryRef.current) {
+      stackEntryRef.current = replaceStackEntry(
+        stackEntryRef.current,
+        stableProps,
+      );
+    }
+  }, [colorScheme, stableProps]);
+
+  return null;
+}
+
+SystemBars.pushStackEntry = pushStackEntry;
+SystemBars.popStackEntry = popStackEntry;
+SystemBars.replaceStackEntry = replaceStackEntry;

package/src/expo.ts

@@ -0,0 +1,55 @@
+import {
+  ConfigPlugin,
+  createRunOncePlugin,
+  withAndroidStyles,
+} from "@expo/config-plugins";
+
+const withAndroidEdgeToEdgeTheme: ConfigPlugin = (config) => {
+  const ignoreList = new Set([
+    "android:enforceNavigationBarContrast",
+    "android:enforceStatusBarContrast",
+    "android:fitsSystemWindows",
+    "android:navigationBarColor",
+    "android:statusBarColor",
+    "android:windowDrawsSystemBarBackgrounds",
+    "android:windowLayoutInDisplayCutoutMode",
+    "android:windowLightNavigationBar",
+    "android:windowLightStatusBar",
+    "android:windowTranslucentNavigation",
+    "android:windowTranslucentStatus",
+  ]);
+
+  return withAndroidStyles(config, (config) => {
+    const { userInterfaceStyle = "light" } = config;
+
+    config.modResults.resources.style = config.modResults.resources.style?.map(
+      (style): typeof style => {
+        if (style.$.name === "AppTheme") {
+          style.$.parent = "Theme.EdgeToEdge";
+
+          if (style.item != null) {
+            style.item = style.item.filter(
+              (item) => !ignoreList.has(item.$.name),
+            );
+          }
+
+          if (userInterfaceStyle !== "automatic") {
+            style.item.push({
+              $: { name: "android:windowLightStatusBar" },
+              _: String(userInterfaceStyle === "light"),
+            });
+          }
+        }
+
+        return style;
+      },
+    );
+
+    return config;
+  });
+};
+
+export default createRunOncePlugin(
+  withAndroidEdgeToEdgeTheme,
+  "react-native-edge-to-edge",
+);

package/src/index.ts

@@ -0,0 +1,2 @@
+export { SystemBars } from "./SystemBars";
+export { SystemBarStyle, SystemBarsEntry, SystemBarsProps } from "./types";

package/src/types.ts

@@ -0,0 +1,12 @@
+export type SystemBarStyle = "auto" | "light" | "dark";
+
+export type SystemBarsEntry = {
+  statusBarHidden: boolean | undefined;
+  statusBarStyle: SystemBarStyle | undefined;
+  navigationBarHidden: boolean | undefined;
+};
+
+export type SystemBarsProps = {
+  style?: SystemBarStyle;
+  hidden?: boolean | { statusBar?: boolean; navigationBar?: boolean };
+};