expo-navigation-bar 4.1.3 → 4.2.0

package/src/NavigationBar.ts

@@ -1,133 +1,49 @@
-import { Platform, type EventSubscription, UnavailabilityError } from 'expo-modules-core';
-import { useEffect, useState } from 'react';
-import { processColor } from 'react-native';
+import { Platform } from 'react-native';
 import { isEdgeToEdge } from 'react-native-is-edge-to-edge';
 
 import ExpoNavigationBar from './ExpoNavigationBar';
-import {
-  NavigationBarButtonStyle,
-  NavigationBarBehavior,
-  NavigationBarPosition,
-  NavigationBarVisibility,
-  NavigationBarVisibilityEvent,
-} from './NavigationBar.types';
-
-let shouldWarnAboutEdgeToEdge = Platform.OS === 'android' && isEdgeToEdge();
-
-function potentiallyWarnAboutEdgeToEdge() {
-  if (shouldWarnAboutEdgeToEdge) {
-    shouldWarnAboutEdgeToEdge = false; // warn once
-    console.warn(
-      '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'
+import { NavigationBarStyle, NavigationBarVisibility } from './NavigationBar.types';
+
+// This line only imports the type information for TypeScript type checking.
+// It doesn't import the actual module in the compiled JavaScript code. The actual
+// module is imported conditionally with require() below, in order to avoid
+// importing the module if edge-to-edge is not enabled (which could throw if
+// it's not linked).
+let SystemBars: typeof import('react-native-edge-to-edge').SystemBars | null = null;
+
+if (isEdgeToEdge() && Platform.OS === 'android') {
+  SystemBars = require('react-native-edge-to-edge').SystemBars;
+  if (!SystemBars) {
+    throw new Error(
+      'Edge-to-edge has been enabled with `react-native-edge-to-edge`, but `SystemBars` failed to resolve. Make sure your project is configured correctly.'
     );
   }
 }
+const canRunEdgeToEdgeMethods = SystemBars !== null;
 
+// MARK: react-native-edge-to-edge based APIs
 /**
- * Observe changes to the system navigation bar.
- * Due to platform constraints, this callback will also be triggered when the status bar visibility changes.
+ * Sets the style of the navigation bar.
+ * > This will have an effect when the following conditions are met:
+ * > - Edge-to-edge is enabled
+ * > - The `enforceNavigationBarContrast` option of the `react-native-edge-to-edge` plugin is set to `false`.
+ * > - The device is using the three-button navigation bar.
  *
- * @example
- * ```ts
- * NavigationBar.addVisibilityListener(({ visibility }) => {
- *   // ...
- * });
- * ```
- */
-export function addVisibilityListener(
-  listener: (event: NavigationBarVisibilityEvent) => void
-): EventSubscription {
-  if (__DEV__) {
-    potentiallyWarnAboutEdgeToEdge();
-  }
-  // 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.
+ * > Due to a bug in the Android 15 emulator this function may have no effect. Try a physical device or an emulator with a different version of Android.
  *
- * @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();
-  }
-  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.
- *
- * @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();
-  }
-  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.
- *
- * @example
- * ```ts
- * NavigationBar.setBorderColorAsync("red");
- * ```
- * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
+ * @platform android
  */
-export async function setBorderColorAsync(color: string): Promise<void> {
-  if (__DEV__) {
-    potentiallyWarnAboutEdgeToEdge();
+export function setStyle(style: NavigationBarStyle) {
+  if (!canRunEdgeToEdgeMethods && Platform.OS === 'android') {
+    throw new Error(
+      '`setStyle` is only supported on Android when edge-to-edge is enabled. Enable edge-to-edge or use the `setButtonStyle` function instead.'
+    );
   }
   if (Platform.OS !== 'android') {
-    console.warn('`setBorderColorAsync` is only available on Android');
+    console.warn('`setStyle` method 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".
- *
- * @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();
-  }
-  if (Platform.OS !== 'android') {
-    console.warn('`getBorderColorAsync` is only available on Android');
-    return `#00000000`;
-  }
-
-  return await ExpoNavigationBar.getBorderColorAsync();
+  SystemBars?.setStyle({ navigationBar: style });
 }
 
 /**
@@ -138,220 +54,23 @@ export async function getBorderColorAsync(): Promise<string> {
  * NavigationBar.setVisibilityAsync("hidden");
  * ```
  * @param visibility Based on CSS visibility property.
+ * @platform android
  */
-export async function setVisibilityAsync(visibility: NavigationBarVisibility): Promise<void> {
-  if (__DEV__) {
-    potentiallyWarnAboutEdgeToEdge();
-  }
+export async function setVisibilityAsync(visibility: NavigationBarVisibility) {
   if (Platform.OS !== 'android') {
     console.warn('`setVisibilityAsync` is only available on Android');
     return;
   }
-  await ExpoNavigationBar.setVisibilityAsync(visibility);
-}
 
-/**
- * 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 (__DEV__) {
-    potentiallyWarnAboutEdgeToEdge();
-  }
-  if (Platform.OS !== 'android') {
-    console.warn('`getVisibilityAsync` is only available on Android');
-    return 'hidden';
+  if (canRunEdgeToEdgeMethods) {
+    // We know the SystemBars module is available, but typescript doesn't interpret it, so we have to use optional.
+    return SystemBars?.setHidden({ navigationBar: visibility === 'hidden' });
   }
-  return ExpoNavigationBar.getVisibilityAsync();
-}
 
-/**
- * Changes the navigation bar's button colors between white (`light`) and a dark gray color (`dark`).
- *
- * @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();
-  }
-  if (Platform.OS !== 'android') {
-    console.warn('`setButtonStyleAsync` is only available on Android');
-    return;
-  }
-  await ExpoNavigationBar.setButtonStyleAsync(style);
+  return await ExpoNavigationBar.setVisibilityAsync(visibility);
 }
 
-/**
- * Gets the navigation bar's button color styles.
- *
- * @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();
-  }
-  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.
- *
- * @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();
-  }
-  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`.
- *
- * @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();
-  }
-  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.
- *
- * @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();
-  }
-  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.
- *
- * @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();
-  }
-  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 {
-  if (__DEV__) {
-    potentiallyWarnAboutEdgeToEdge();
-  }
-
-  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;
-}
+// MARK: existing expo-navigation-bar APIs
 
+export * from './NativeNavigationBarWrapper';
 export * from './NavigationBar.types';

package/src/NavigationBar.types.ts

@@ -34,3 +34,13 @@ export type NavigationBarVisibilityEvent = {
    */
   rawVisibility: number;
 };
+
+/**
+ * Navigation bar style.
+ *
+ * - `auto` will automatically adjust based on the current theme.
+ * - `light` a light navigation bar with dark content.
+ * - `dark` a dark navigation bar with light content.
+ * - `inverted` the bar colors are inverted in relation to the current theme.
+ */
+export type NavigationBarStyle = 'auto' | 'inverted' | 'light' | 'dark';

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

@@ -1 +0,0 @@
-c35be00274b4ae19a85d5bfdd664a228

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

@@ -1 +0,0 @@
-6c807af153f7e4c7c4f396dced905450228bdba0

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

@@ -1 +0,0 @@
-bd44a23d33c10a68f3f428b834d4472559c0d6db950b93a6dfb20371ffcdf6f2

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

@@ -1 +0,0 @@
-4ba7ba7ca59576bad74ee391a4068e81fadb7535dc0d3c2cf7be94c6807fc9d2678e48e7353de296eaa189670d84b65fc3b63f64a906d9e5682afdaf311e396a

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

@@ -1 +0,0 @@
-ec7a815ca93db37c3b0945dfccea7071

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

@@ -1 +0,0 @@
-b8a97a31d81c0153cd6774a9155a5f451bf8ec7b

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

@@ -1 +0,0 @@
-441df9261db0db937213226564a8f935ab16c056de35416d637dff256b6d9278

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

@@ -1 +0,0 @@
-9340df8886c3f8788cf0584a98bd40eb8bf35b1ea71670c3586068d912ee604833c91613a7c2a5d3c1ec758d197ea355299e59c4e8f3c3dd22b952a357583754