expo-navigation-bar 4.1.2 → 4.2.0

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.1.2/expo.modules.navigationbar-4.1.2.module → 4.2.0/expo.modules.navigationbar-4.2.0.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "host.exp.exponent",
     "module": "expo.modules.navigationbar",
-    "version": "4.1.2",
+    "version": "4.2.0",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,8 +24,8 @@
       },
       "files": [
         {
-          "name": "expo.modules.navigationbar-4.1.2.aar",
-          "url": "expo.modules.navigationbar-4.1.2.aar",
+          "name": "expo.modules.navigationbar-4.2.0.aar",
+          "url": "expo.modules.navigationbar-4.2.0.aar",
           "size": 50116,
           "sha512": "9002413b7a09b940dda0ec41995b6fb09841f18ac5c64a81a149aa123d438487f1f5aaa072a0de7d54ad1e77712968d76502d4e745ea759defa83bce5edaecad",
           "sha256": "efc2da7015bb42d104de63aaafe098e547b290c00892881177100cff34bb1654",
@@ -67,8 +67,8 @@
       ],
       "files": [
         {
-          "name": "expo.modules.navigationbar-4.1.2.aar",
-          "url": "expo.modules.navigationbar-4.1.2.aar",
+          "name": "expo.modules.navigationbar-4.2.0.aar",
+          "url": "expo.modules.navigationbar-4.2.0.aar",
           "size": 50116,
           "sha512": "9002413b7a09b940dda0ec41995b6fb09841f18ac5c64a81a149aa123d438487f1f5aaa072a0de7d54ad1e77712968d76502d4e745ea759defa83bce5edaecad",
           "sha256": "efc2da7015bb42d104de63aaafe098e547b290c00892881177100cff34bb1654",
@@ -87,8 +87,8 @@
       },
       "files": [
         {
-          "name": "expo.modules.navigationbar-4.1.2-sources.jar",
-          "url": "expo.modules.navigationbar-4.1.2-sources.jar",
+          "name": "expo.modules.navigationbar-4.2.0-sources.jar",
+          "url": "expo.modules.navigationbar-4.2.0-sources.jar",
           "size": 5746,
           "sha512": "b062a1e85ccee489c49a264c5809226a0215ba7b7232895127f45002b605e6d5beb5739a3fee2c3b88420721949d17adfbd9dc15aaadebecd940958c871a8e28",
           "sha256": "c396cf58026bd79f443df5992bd12db17586c7e3702f1ace4c3e3e65a066cf14",

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.module.md5

@@ -0,0 +1 @@
+51059d17cb6824a9f8cc3613637f2842

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.module.sha1

@@ -0,0 +1 @@
+80b97f0612276f3b19d89ec79d3bc70c1bd1d573

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.module.sha256

@@ -0,0 +1 @@
+cc026d254024aa01b3989a6436867e6871e408416c495544e98b521bfbceed22

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.module.sha512

@@ -0,0 +1 @@
+1faf19621a3dfea493786219c0e7d3b4452cfc35bbf39de9ae779fe921774d24fdb564aaa49a4d38871cdaa4541d6f226feb38c1dc76566c5255d2e61ec4162a

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.1.2/expo.modules.navigationbar-4.1.2.pom → 4.2.0/expo.modules.navigationbar-4.2.0.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>host.exp.exponent</groupId>
   <artifactId>expo.modules.navigationbar</artifactId>
-  <version>4.1.2</version>
+  <version>4.2.0</version>
   <packaging>aar</packaging>
   <name>expo.modules.navigationbar</name>
   <url>https://github.com/expo/expo</url>

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.pom.md5

@@ -0,0 +1 @@
+93f262093d9def42874eeef51f179d9c

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.pom.sha1

@@ -0,0 +1 @@
+3889ad600d1a23597b8d6ff3ac95773711983552

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.pom.sha256

@@ -0,0 +1 @@
+a40d811800056e1d146ccd7d734975040f23cd332e5ec490b2c0728f16aba832

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.pom.sha512

@@ -0,0 +1 @@
+6fcef0828efa2b7a49e7659cd414bf4f4670e7e2450563124e8693c1dde1fa77f142be74958ce1d32263ae476fdc66965804e265897f6eacbb48e756372c71e4

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml

@@ -3,11 +3,11 @@
   <groupId>host.exp.exponent</groupId>
   <artifactId>expo.modules.navigationbar</artifactId>
   <versioning>
-    <latest>4.1.2</latest>
-    <release>4.1.2</release>
+    <latest>4.2.0</latest>
+    <release>4.2.0</release>
     <versions>
-      <version>4.1.2</version>
+      <version>4.2.0</version>
     </versions>
-    <lastUpdated>20250409202802</lastUpdated>
+    <lastUpdated>20250421213308</lastUpdated>
   </versioning>
 </metadata>

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml.md5

@@ -1 +1 @@
-3a083bd3c41a139256861de55958c0d7
+bc75226166051fca81a20cd4b391104e

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml.sha1

@@ -1 +1 @@
-dee6fac5deeb66ee15536f555c11485ce42a6e7b
+f242d6e566913c9883f105e05bdd02e2b77e6470

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml.sha256

@@ -1 +1 @@
-d97a354b10b846dfbd0f52e86030924af0eb6c4346bf98863c9d184ce7df6be2
+874b736a29798298d102061509bde4e1c93542da819d31aaffc75889046c24b5

package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml.sha512

@@ -1 +1 @@
-33837522ab36eb3a45629c903bb3f915ce6b27531633be7f4d4651ec1c8d37ddcce80e7a9e5e33a5e9cbfe33a063e95ebe80795d6f1737dd70b9c55f7a8d76ff
+0ec26a66fe23714b30881fa9064e18b252ebbdf6880ec84d5f53939bd960b0cdb38b0526c7ba52855fad1a0a0bdc60bb97b5ee8542faa85e24288fb111619113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-navigation-bar",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "description": "Modify and observe the native navigation bar on Android devices.",
   "main": "build/NavigationBar.js",
   "types": "build/NavigationBar.d.ts",
@@ -34,18 +34,19 @@
   "license": "MIT",
   "homepage": "https://docs.expo.dev/versions/latest/sdk/navigation-bar",
   "dependencies": {
-    "@react-native/normalize-colors": "0.79.0",
+    "@react-native/normalize-colors": "0.79.1",
     "debug": "^4.3.2",
-    "react-native-is-edge-to-edge": "^1.1.6"
+    "react-native-is-edge-to-edge": "^1.1.6",
+    "react-native-edge-to-edge": "1.6.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",
-    "expo-module-scripts": "^4.1.1"
+    "expo-module-scripts": "^4.1.2"
   },
   "peerDependencies": {
     "expo": "*",
     "react": "*",
     "react-native": "*"
   },
-  "gitHead": "1914bb35d23af23078da37e70988261844436505"
+  "gitHead": "f1394f21ff2719a9a3037d7511db170704e5c492"
 }

package/src/NativeNavigationBarWrapper.ts

@@ -0,0 +1,366 @@
+import { type EventSubscription, Platform, UnavailabilityError } from 'expo-modules-core';
+import { useEffect, useState } from 'react';
+import { processColor } from 'react-native';
+import { isEdgeToEdge } from 'react-native-is-edge-to-edge';
+
+import ExpoNavigationBar from './ExpoNavigationBar';
+import {
+  NavigationBarBehavior,
+  NavigationBarButtonStyle,
+  NavigationBarPosition,
+  NavigationBarVisibility,
+  NavigationBarVisibilityEvent,
+} from './NavigationBar.types';
+
+const shouldWarnAboutEdgeToEdge = Platform.OS === 'android' && isEdgeToEdge();
+const defaultMessage =
+  'Using expo-navigation-bar in apps with edge-to-edge layout enabled may cause unexpected behavior. Instead, use the SystemBars component from react-native-edge-to-edge. Learn more: https://expo.fyi/edge-to-edge-system-bars';
+
+function potentiallyWarnAboutEdgeToEdge(message: string = defaultMessage) {
+  if (shouldWarnAboutEdgeToEdge) {
+    console.warn(message);
+  }
+}
+
+/**
+ * Observe changes to the system navigation bar.
+ * Due to platform constraints, this callback will also be triggered when the status bar visibility changes.
+ *
+ * @example
+ * ```ts
+ * NavigationBar.addVisibilityListener(({ visibility }) => {
+ *   // ...
+ * });
+ * ```
+ */
+export function addVisibilityListener(
+  listener: (event: NavigationBarVisibilityEvent) => void
+): EventSubscription {
+  // Assert so the type is non-nullable.
+  if (!ExpoNavigationBar.addListener) {
+    throw new UnavailabilityError('NavigationBar', 'addVisibilityListener');
+  }
+  return ExpoNavigationBar.addListener('ExpoNavigationBar.didChange', listener);
+}
+
+/**
+ * Changes the navigation bar's background color.
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * NavigationBar.setBackgroundColorAsync("white");
+ * ```
+ * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
+ */
+export async function setBackgroundColorAsync(color: string): Promise<void> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Setting the background color of the navigation bar is not supported when edge-to-edge is enabled And may lead to unexpected behavoir. Use the `setStyle` method instead.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`setBackgroundColorAsync` is only available on Android');
+    return;
+  }
+  const colorNumber = processColor(color);
+  return await ExpoNavigationBar.setBackgroundColorAsync(colorNumber);
+}
+
+/**
+ * Gets the navigation bar's background color.
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * const color = await NavigationBar.getBackgroundColorAsync();
+ * ```
+ * @returns Current navigation bar color in hex format. Returns `#00000000` (transparent) on unsupported platforms (iOS, web).
+ *
+ */
+export async function getBackgroundColorAsync(): Promise<string> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Getting the background color of the navigation bar is not supported when edge-to-edge is enabled and may lead to unexpected behavior.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`getBackgroundColorAsync` is only available on Android');
+    return `#00000000`;
+  }
+  return await ExpoNavigationBar.getBackgroundColorAsync();
+}
+
+/**
+ * Changes the navigation bar's border color.
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * NavigationBar.setBorderColorAsync("red");
+ * ```
+ * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
+ */
+export async function setBorderColorAsync(color: string): Promise<void> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Setting the border color of the navigation bar is not supported when edge-to-edge is enabled and may lead to unexpected behavior.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`setBorderColorAsync` is only available on Android');
+    return;
+  }
+  const colorNumber = processColor(color);
+  await ExpoNavigationBar.setBorderColorAsync(colorNumber);
+}
+
+/**
+ * Gets the navigation bar's top border color, also known as the "divider color".
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * const color = await NavigationBar.getBorderColorAsync();
+ * ```
+ * @returns Navigation bar top border color in hex format. Returns `#00000000` (transparent) on unsupported platforms (iOS, web).
+ */
+export async function getBorderColorAsync(): Promise<string> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Getting the border color of the navigation bar is not supported when edge-to-edge is enabled and may lead to unexpected behavior.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`getBorderColorAsync` is only available on Android');
+    return `#00000000`;
+  }
+
+  return await ExpoNavigationBar.getBorderColorAsync();
+}
+
+/**
+ * Get the navigation bar's visibility.
+ *
+ *
+ * @example
+ * ```ts
+ * const visibility = await NavigationBar.getVisibilityAsync("hidden");
+ * ```
+ * @returns Navigation bar's current visibility status. Returns `hidden` on unsupported platforms (iOS, web).
+ */
+export async function getVisibilityAsync(): Promise<NavigationBarVisibility> {
+  if (Platform.OS !== 'android') {
+    console.warn('`getVisibilityAsync` is only available on Android');
+    return 'hidden';
+  }
+  return ExpoNavigationBar.getVisibilityAsync();
+}
+
+/**
+ * Changes the navigation bar's button colors between white (`light`) and a dark gray color (`dark`).
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * NavigationBar.setButtonStyleAsync("light");
+ * ```
+ * @param style Dictates the color of the foreground element color.
+ */
+export async function setButtonStyleAsync(style: NavigationBarButtonStyle): Promise<void> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Setting the navigation bar button style is not supported when edge-to-edge is enabled and may lead to unexpected behavior. Use the `setStyle` method instead.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`setButtonStyleAsync` is only available on Android');
+    return;
+  }
+  await ExpoNavigationBar.setButtonStyleAsync(style);
+}
+
+/**
+ * Gets the navigation bar's button color styles.
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * const style = await NavigationBar.getButtonStyleAsync();
+ * ```
+ * @returns Navigation bar foreground element color settings. Returns `light` on unsupported platforms (iOS, web).
+ */
+export async function getButtonStyleAsync(): Promise<NavigationBarButtonStyle> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Getting the navigation bar button style is not supported when edge-to-edge is enabled and may lead to unexpected behavior.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`getButtonStyleAsync` is only available on Android');
+    return 'light';
+  }
+  return await ExpoNavigationBar.getButtonStyleAsync();
+}
+
+/**
+ * Sets positioning method used for the navigation bar (and status bar).
+ * Setting position `absolute` will float the navigation bar above the content,
+ * whereas position `relative` will shrink the screen to inline the navigation bar.
+ *
+ * When drawing behind the status and navigation bars, ensure the safe area insets are adjusted accordingly.
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * // enables edge-to-edge mode
+ * await NavigationBar.setPositionAsync('absolute')
+ * // transparent backgrounds to see through
+ * await NavigationBar.setBackgroundColorAsync('#ffffff00')
+ * ```
+ * @param position Based on CSS position property.
+ */
+export async function setPositionAsync(position: NavigationBarPosition): Promise<void> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Setting the navigation bar position is not supported when edge-to-edge is enabled and may lead to unexpected behavior.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`setPositionAsync` is only available on Android');
+    return;
+  }
+  await ExpoNavigationBar.setPositionAsync(position);
+}
+
+/**
+ * Whether the navigation and status bars float above the app (absolute) or sit inline with it (relative).
+ * This value can be incorrect if `androidNavigationBar.visible` is used instead of the config plugin `position` property.
+ *
+ * This method is unstable because the position can be set via another native module and get out of sync.
+ * Alternatively, you can get the position by measuring the insets returned by `react-native-safe-area-context`.
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * await NavigationBar.unstable_getPositionAsync()
+ * ```
+ * @returns Navigation bar positional rendering mode. Returns `relative` on unsupported platforms (iOS, web).
+ */
+export async function unstable_getPositionAsync(): Promise<NavigationBarPosition> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Using the `unstable_getPositionAsync` function is not supported when edge-to-edge is enabled and may lead to unexpected behavior.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`unstable_getPositionAsync` is only available on Android');
+    return 'relative';
+  }
+  return await ExpoNavigationBar.unstable_getPositionAsync();
+}
+
+/**
+ * Sets the behavior of the status bar and navigation bar when they are hidden and the user wants to reveal them.
+ *
+ * For example, if the navigation bar is hidden (`setVisibilityAsync(false)`) and the behavior
+ * is `'overlay-swipe'`, the user can swipe from the bottom of the screen to temporarily reveal the navigation bar.
+ *
+ * - `'overlay-swipe'`: Temporarily reveals the System UI after a swipe gesture (bottom or top) without insetting your App's content.
+ * - `'inset-swipe'`: Reveals the System UI after a swipe gesture (bottom or top) and insets your App's content (Safe Area). The System UI is visible until you explicitly hide it again.
+ * - `'inset-touch'`: Reveals the System UI after a touch anywhere on the screen and insets your App's content (Safe Area). The System UI is visible until you explicitly hide it again.
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * await NavigationBar.setBehaviorAsync('overlay-swipe')
+ * ```
+ * @param behavior Dictates the interaction behavior of the navigation bar.
+ */
+export async function setBehaviorAsync(behavior: NavigationBarBehavior): Promise<void> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Setting the behavior of the navigation bar is not supported when edge-to-edge is enabled and may lead to unexpected behavior.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`setBehaviorAsync` is only available on Android');
+    return;
+  }
+  return await ExpoNavigationBar.setBehaviorAsync(behavior);
+}
+
+/**
+ * Gets the behavior of the status and navigation bars when the user swipes or touches the screen.
+ *
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
+ *
+ * @example
+ * ```ts
+ * await NavigationBar.getBehaviorAsync()
+ * ```
+ * @returns Navigation bar interaction behavior. Returns `inset-touch` on unsupported platforms (iOS, web).
+ */
+export async function getBehaviorAsync(): Promise<NavigationBarBehavior> {
+  if (__DEV__) {
+    potentiallyWarnAboutEdgeToEdge(
+      'Getting the behavior of the navigation bar is not supported when edge-to-edge is enabled and may lead to unexpected behavior.'
+    );
+  }
+  if (Platform.OS !== 'android') {
+    console.warn('`getBehaviorAsync` is only available on Android');
+    return 'inset-touch';
+  }
+  return await ExpoNavigationBar.getBehaviorAsync();
+}
+
+/**
+ * React hook that statefully updates with the visibility of the system navigation bar.
+ *
+ * @example
+ * ```ts
+ * function App() {
+ *   const visibility = NavigationBar.useVisibility()
+ *   // React Component...
+ * }
+ * ```
+ * @returns Visibility of the navigation bar, `null` during async initialization.
+ */
+export function useVisibility(): NavigationBarVisibility | null {
+  const [visibility, setVisible] = useState<NavigationBarVisibility | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+    if (Platform.OS !== 'android') {
+      setVisible('hidden');
+      return;
+    }
+    getVisibilityAsync().then((visibility) => {
+      if (isMounted) {
+        setVisible(visibility);
+      }
+    });
+
+    const listener = addVisibilityListener(({ visibility }) => {
+      if (isMounted) {
+        setVisible(visibility);
+      }
+    });
+
+    return () => {
+      listener.remove();
+      isMounted = false;
+    };
+  }, []);
+
+  return visibility;
+}