expo-navigation-bar 4.2.0 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/android/build.gradle +2 -2
  3. package/build/ExpoNavigationBar.d.ts +18 -1
  4. package/build/ExpoNavigationBar.d.ts.map +1 -1
  5. package/build/ExpoNavigationBar.js.map +1 -1
  6. package/build/NavigationBar.android.d.ts +19 -0
  7. package/build/NavigationBar.android.d.ts.map +1 -0
  8. package/build/NavigationBar.android.js +140 -0
  9. package/build/NavigationBar.android.js.map +1 -0
  10. package/build/NavigationBar.d.ts +182 -7
  11. package/build/NavigationBar.d.ts.map +1 -1
  12. package/build/NavigationBar.js +221 -42
  13. package/build/NavigationBar.js.map +1 -1
  14. package/expo-module.config.json +1 -1
  15. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0.module → 4.2.1/expo.modules.navigationbar-4.2.1.module} +7 -7
  16. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.1/expo.modules.navigationbar-4.2.1.module.md5 +1 -0
  17. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.1/expo.modules.navigationbar-4.2.1.module.sha1 +1 -0
  18. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.1/expo.modules.navigationbar-4.2.1.module.sha256 +1 -0
  19. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.1/expo.modules.navigationbar-4.2.1.module.sha512 +1 -0
  20. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0.pom → 4.2.1/expo.modules.navigationbar-4.2.1.pom} +1 -1
  21. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.1/expo.modules.navigationbar-4.2.1.pom.md5 +1 -0
  22. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.1/expo.modules.navigationbar-4.2.1.pom.sha1 +1 -0
  23. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.1/expo.modules.navigationbar-4.2.1.pom.sha256 +1 -0
  24. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.1/expo.modules.navigationbar-4.2.1.pom.sha512 +1 -0
  25. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml +4 -4
  26. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml.md5 +1 -1
  27. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml.sha1 +1 -1
  28. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml.sha256 +1 -1
  29. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/maven-metadata.xml.sha512 +1 -1
  30. package/package.json +3 -3
  31. package/src/ExpoNavigationBar.ts +35 -1
  32. package/src/NavigationBar.android.ts +191 -0
  33. package/src/NavigationBar.ts +245 -51
  34. package/build/NativeNavigationBarWrapper.d.ts +0 -178
  35. package/build/NativeNavigationBarWrapper.d.ts.map +0 -1
  36. package/build/NativeNavigationBarWrapper.js +0 -316
  37. package/build/NativeNavigationBarWrapper.js.map +0 -1
  38. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.module.md5 +0 -1
  39. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.module.sha1 +0 -1
  40. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.module.sha256 +0 -1
  41. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.module.sha512 +0 -1
  42. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.pom.md5 +0 -1
  43. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.pom.sha1 +0 -1
  44. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.pom.sha256 +0 -1
  45. package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/4.2.0/expo.modules.navigationbar-4.2.0.pom.sha512 +0 -1
  46. package/src/NativeNavigationBarWrapper.ts +0 -366
  47. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0-sources.jar → 4.2.1/expo.modules.navigationbar-4.2.1-sources.jar} +0 -0
  48. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0-sources.jar.md5 → 4.2.1/expo.modules.navigationbar-4.2.1-sources.jar.md5} +0 -0
  49. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0-sources.jar.sha1 → 4.2.1/expo.modules.navigationbar-4.2.1-sources.jar.sha1} +0 -0
  50. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0-sources.jar.sha256 → 4.2.1/expo.modules.navigationbar-4.2.1-sources.jar.sha256} +0 -0
  51. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0-sources.jar.sha512 → 4.2.1/expo.modules.navigationbar-4.2.1-sources.jar.sha512} +0 -0
  52. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0.aar → 4.2.1/expo.modules.navigationbar-4.2.1.aar} +0 -0
  53. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0.aar.md5 → 4.2.1/expo.modules.navigationbar-4.2.1.aar.md5} +0 -0
  54. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0.aar.sha1 → 4.2.1/expo.modules.navigationbar-4.2.1.aar.sha1} +0 -0
  55. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0.aar.sha256 → 4.2.1/expo.modules.navigationbar-4.2.1.aar.sha256} +0 -0
  56. /package/local-maven-repo/host/exp/exponent/expo.modules.navigationbar/{4.2.0/expo.modules.navigationbar-4.2.0.aar.sha512 → 4.2.1/expo.modules.navigationbar-4.2.1.aar.sha512} +0 -0
@@ -0,0 +1,191 @@
1
+ import { type EventSubscription } from 'expo-modules-core';
2
+ import { useEffect, useState } from 'react';
3
+ import { processColor } from 'react-native';
4
+ import { isEdgeToEdge } from 'react-native-is-edge-to-edge';
5
+
6
+ import ExpoNavigationBar from './ExpoNavigationBar';
7
+ import type {
8
+ NavigationBarBehavior,
9
+ NavigationBarButtonStyle,
10
+ NavigationBarPosition,
11
+ NavigationBarStyle,
12
+ NavigationBarVisibility,
13
+ NavigationBarVisibilityEvent,
14
+ } from './NavigationBar.types';
15
+
16
+ // This line only imports the type information for TypeScript type checking. It
17
+ // doesn't import the actual module in the compiled JavaScript code. The actual
18
+ // module is imported conditionally with require() below, in order to avoid
19
+ // importing the module if edge-to-edge is not enabled (which could throw if
20
+ // it's not linked).
21
+ let SystemBars: typeof import('react-native-edge-to-edge').SystemBars | null = null;
22
+
23
+ if (isEdgeToEdge()) {
24
+ SystemBars = require('react-native-edge-to-edge').SystemBars;
25
+ }
26
+
27
+ export function addVisibilityListener(
28
+ listener: (event: NavigationBarVisibilityEvent) => void
29
+ ): EventSubscription {
30
+ if (SystemBars != null) {
31
+ console.warn('`addVisibilityListener` is not supported with edge-to-edge enabled.');
32
+ return { remove: () => {} };
33
+ }
34
+
35
+ return ExpoNavigationBar.addListener('ExpoNavigationBar.didChange', listener);
36
+ }
37
+
38
+ export async function setBackgroundColorAsync(color: string): Promise<void> {
39
+ if (SystemBars != null) {
40
+ console.warn('`setBackgroundColorAsync` is not supported with edge-to-edge enabled.');
41
+ return;
42
+ }
43
+
44
+ const colorNumber = processColor(color);
45
+ await ExpoNavigationBar.setBackgroundColorAsync(colorNumber);
46
+ }
47
+
48
+ export async function getBackgroundColorAsync(): Promise<string> {
49
+ if (SystemBars != null) {
50
+ console.warn('`getBackgroundColorAsync` is not supported with edge-to-edge enabled.');
51
+ return `#00000000`;
52
+ }
53
+
54
+ return await ExpoNavigationBar.getBackgroundColorAsync();
55
+ }
56
+
57
+ export async function setBorderColorAsync(color: string): Promise<void> {
58
+ if (SystemBars != null) {
59
+ console.warn('`setBorderColorAsync` is not supported with edge-to-edge enabled.');
60
+ return;
61
+ }
62
+
63
+ const colorNumber = processColor(color);
64
+ await ExpoNavigationBar.setBorderColorAsync(colorNumber);
65
+ }
66
+
67
+ export async function getBorderColorAsync(): Promise<string> {
68
+ if (SystemBars != null) {
69
+ console.warn('`getBorderColorAsync` is not supported with edge-to-edge enabled.');
70
+ return `#00000000`;
71
+ }
72
+
73
+ return await ExpoNavigationBar.getBorderColorAsync();
74
+ }
75
+
76
+ export async function setVisibilityAsync(visibility: NavigationBarVisibility): Promise<void> {
77
+ if (SystemBars != null) {
78
+ SystemBars.setHidden({ navigationBar: visibility === 'hidden' });
79
+ return;
80
+ }
81
+
82
+ await ExpoNavigationBar.setVisibilityAsync(visibility);
83
+ }
84
+
85
+ export async function getVisibilityAsync(): Promise<NavigationBarVisibility> {
86
+ if (SystemBars != null) {
87
+ console.warn('`getVisibilityAsync` is not supported with edge-to-edge enabled.');
88
+ return 'hidden';
89
+ }
90
+
91
+ return ExpoNavigationBar.getVisibilityAsync();
92
+ }
93
+
94
+ export async function setButtonStyleAsync(style: NavigationBarButtonStyle): Promise<void> {
95
+ if (SystemBars != null) {
96
+ SystemBars.setStyle({ navigationBar: style });
97
+ return;
98
+ }
99
+
100
+ await ExpoNavigationBar.setButtonStyleAsync(style);
101
+ }
102
+
103
+ export async function getButtonStyleAsync(): Promise<NavigationBarButtonStyle> {
104
+ if (SystemBars != null) {
105
+ console.warn('`getButtonStyleAsync` is not supported with edge-to-edge enabled.');
106
+ return 'light';
107
+ }
108
+
109
+ return await ExpoNavigationBar.getButtonStyleAsync();
110
+ }
111
+
112
+ export async function setPositionAsync(position: NavigationBarPosition): Promise<void> {
113
+ if (SystemBars != null) {
114
+ console.warn('`setPositionAsync` is not supported with edge-to-edge enabled.');
115
+ return;
116
+ }
117
+
118
+ await ExpoNavigationBar.setPositionAsync(position);
119
+ }
120
+
121
+ export async function unstable_getPositionAsync(): Promise<NavigationBarPosition> {
122
+ if (SystemBars != null) {
123
+ console.warn('`unstable_getPositionAsync` is not supported with edge-to-edge enabled.');
124
+ return 'relative';
125
+ }
126
+
127
+ return await ExpoNavigationBar.unstable_getPositionAsync();
128
+ }
129
+
130
+ export async function setBehaviorAsync(behavior: NavigationBarBehavior): Promise<void> {
131
+ if (SystemBars != null) {
132
+ console.warn('`setBehaviorAsync` is not supported with edge-to-edge enabled.');
133
+ return;
134
+ }
135
+
136
+ await ExpoNavigationBar.setBehaviorAsync(behavior);
137
+ }
138
+
139
+ export async function getBehaviorAsync(): Promise<NavigationBarBehavior> {
140
+ if (SystemBars != null) {
141
+ console.warn('`getBehaviorAsync` is not supported with edge-to-edge enabled.');
142
+ return 'inset-touch';
143
+ }
144
+
145
+ return await ExpoNavigationBar.getBehaviorAsync();
146
+ }
147
+
148
+ export function setStyle(style: NavigationBarStyle) {
149
+ if (SystemBars != null) {
150
+ SystemBars.setStyle({ navigationBar: style });
151
+ return;
152
+ }
153
+
154
+ throw new Error(
155
+ '`setStyle` is only supported on Android when edge-to-edge is enabled. Enable edge-to-edge or use the `setButtonStyle` function instead.'
156
+ );
157
+ }
158
+
159
+ export function useVisibility(): NavigationBarVisibility | null {
160
+ const [visibility, setVisible] = useState<NavigationBarVisibility | null>(null);
161
+
162
+ useEffect(() => {
163
+ if (SystemBars != null) {
164
+ console.warn('`useVisibility` is not supported with edge-to-edge enabled.');
165
+ return;
166
+ }
167
+
168
+ let isMounted = true;
169
+
170
+ getVisibilityAsync().then((visibility) => {
171
+ if (isMounted) {
172
+ setVisible(visibility);
173
+ }
174
+ });
175
+
176
+ const listener = addVisibilityListener(({ visibility }) => {
177
+ if (isMounted) {
178
+ setVisible(visibility);
179
+ }
180
+ });
181
+
182
+ return () => {
183
+ listener.remove();
184
+ isMounted = false;
185
+ };
186
+ }, []);
187
+
188
+ return visibility;
189
+ }
190
+
191
+ export * from './NavigationBar.types';
@@ -1,27 +1,235 @@
1
- import { Platform } from 'react-native';
2
- import { isEdgeToEdge } from 'react-native-is-edge-to-edge';
3
-
4
- import ExpoNavigationBar from './ExpoNavigationBar';
5
- import { NavigationBarStyle, NavigationBarVisibility } from './NavigationBar.types';
6
-
7
- // This line only imports the type information for TypeScript type checking.
8
- // It doesn't import the actual module in the compiled JavaScript code. The actual
9
- // module is imported conditionally with require() below, in order to avoid
10
- // importing the module if edge-to-edge is not enabled (which could throw if
11
- // it's not linked).
12
- let SystemBars: typeof import('react-native-edge-to-edge').SystemBars | null = null;
13
-
14
- if (isEdgeToEdge() && Platform.OS === 'android') {
15
- SystemBars = require('react-native-edge-to-edge').SystemBars;
16
- if (!SystemBars) {
17
- throw new Error(
18
- 'Edge-to-edge has been enabled with `react-native-edge-to-edge`, but `SystemBars` failed to resolve. Make sure your project is configured correctly.'
19
- );
20
- }
1
+ import { type EventSubscription, UnavailabilityError } from 'expo-modules-core';
2
+ import { useEffect, useState } from 'react';
3
+
4
+ import type {
5
+ NavigationBarBehavior,
6
+ NavigationBarButtonStyle,
7
+ NavigationBarPosition,
8
+ NavigationBarStyle,
9
+ NavigationBarVisibility,
10
+ NavigationBarVisibilityEvent,
11
+ } from './NavigationBar.types';
12
+
13
+ /**
14
+ * Observe changes to the system navigation bar.
15
+ * Due to platform constraints, this callback will also be triggered when the status bar visibility changes.
16
+ *
17
+ * @example
18
+ * ```ts
19
+ * NavigationBar.addVisibilityListener(({ visibility }) => {
20
+ * // ...
21
+ * });
22
+ * ```
23
+ */
24
+ export function addVisibilityListener(
25
+ listener: (event: NavigationBarVisibilityEvent) => void
26
+ ): EventSubscription {
27
+ throw new UnavailabilityError('NavigationBar', 'addVisibilityListener');
28
+ }
29
+
30
+ /**
31
+ * Changes the navigation bar's background color.
32
+ *
33
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
34
+ *
35
+ * @example
36
+ * ```ts
37
+ * NavigationBar.setBackgroundColorAsync("white");
38
+ * ```
39
+ * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
40
+ */
41
+ export async function setBackgroundColorAsync(color: string): Promise<void> {
42
+ console.warn('`setBackgroundColorAsync` is only available on Android');
43
+ }
44
+
45
+ /**
46
+ * Gets the navigation bar's background color.
47
+ *
48
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
49
+ *
50
+ * @example
51
+ * ```ts
52
+ * const color = await NavigationBar.getBackgroundColorAsync();
53
+ * ```
54
+ * @returns Current navigation bar color in hex format. Returns `#00000000` (transparent) on unsupported platforms (iOS, web).
55
+ *
56
+ */
57
+ export async function getBackgroundColorAsync(): Promise<string> {
58
+ console.warn('`getBackgroundColorAsync` is only available on Android');
59
+ return `#00000000`;
60
+ }
61
+
62
+ /**
63
+ * Changes the navigation bar's border color.
64
+ *
65
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
66
+ *
67
+ * @example
68
+ * ```ts
69
+ * NavigationBar.setBorderColorAsync("red");
70
+ * ```
71
+ * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
72
+ */
73
+ export async function setBorderColorAsync(color: string): Promise<void> {
74
+ console.warn('`setBorderColorAsync` is only available on Android');
75
+ }
76
+
77
+ /**
78
+ * Gets the navigation bar's top border color, also known as the "divider color".
79
+ *
80
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
81
+ *
82
+ * @example
83
+ * ```ts
84
+ * const color = await NavigationBar.getBorderColorAsync();
85
+ * ```
86
+ * @returns Navigation bar top border color in hex format. Returns `#00000000` (transparent) on unsupported platforms (iOS, web).
87
+ */
88
+ export async function getBorderColorAsync(): Promise<string> {
89
+ console.warn('`getBorderColorAsync` is only available on Android');
90
+ return `#00000000`;
91
+ }
92
+
93
+ /**
94
+ * Set the navigation bar's visibility.
95
+ *
96
+ * @example
97
+ * ```ts
98
+ * NavigationBar.setVisibilityAsync("hidden");
99
+ * ```
100
+ * @param visibility Based on CSS visibility property.
101
+ * @platform android
102
+ */
103
+ export async function setVisibilityAsync(visibility: NavigationBarVisibility): Promise<void> {
104
+ console.warn('`setVisibilityAsync` is only available on Android');
105
+ }
106
+
107
+ /**
108
+ * Get the navigation bar's visibility.
109
+ *
110
+ *
111
+ * @example
112
+ * ```ts
113
+ * const visibility = await NavigationBar.getVisibilityAsync("hidden");
114
+ * ```
115
+ * @returns Navigation bar's current visibility status. Returns `hidden` on unsupported platforms (iOS, web).
116
+ */
117
+ export async function getVisibilityAsync(): Promise<NavigationBarVisibility> {
118
+ console.warn('`getVisibilityAsync` is only available on Android');
119
+ return 'hidden';
120
+ }
121
+
122
+ /**
123
+ * Changes the navigation bar's button colors between white (`light`) and a dark gray color (`dark`).
124
+ *
125
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
126
+ *
127
+ * @example
128
+ * ```ts
129
+ * NavigationBar.setButtonStyleAsync("light");
130
+ * ```
131
+ * @param style Dictates the color of the foreground element color.
132
+ */
133
+ export async function setButtonStyleAsync(style: NavigationBarButtonStyle): Promise<void> {
134
+ console.warn('`setButtonStyleAsync` is only available on Android');
135
+ }
136
+
137
+ /**
138
+ * Gets the navigation bar's button color styles.
139
+ *
140
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
141
+ *
142
+ * @example
143
+ * ```ts
144
+ * const style = await NavigationBar.getButtonStyleAsync();
145
+ * ```
146
+ * @returns Navigation bar foreground element color settings. Returns `light` on unsupported platforms (iOS, web).
147
+ */
148
+ export async function getButtonStyleAsync(): Promise<NavigationBarButtonStyle> {
149
+ console.warn('`getButtonStyleAsync` is only available on Android');
150
+ return 'light';
151
+ }
152
+
153
+ /**
154
+ * Sets positioning method used for the navigation bar (and status bar).
155
+ * Setting position `absolute` will float the navigation bar above the content,
156
+ * whereas position `relative` will shrink the screen to inline the navigation bar.
157
+ *
158
+ * When drawing behind the status and navigation bars, ensure the safe area insets are adjusted accordingly.
159
+ *
160
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
161
+ *
162
+ * @example
163
+ * ```ts
164
+ * // enables edge-to-edge mode
165
+ * await NavigationBar.setPositionAsync('absolute')
166
+ * // transparent backgrounds to see through
167
+ * await NavigationBar.setBackgroundColorAsync('#ffffff00')
168
+ * ```
169
+ * @param position Based on CSS position property.
170
+ */
171
+ export async function setPositionAsync(position: NavigationBarPosition): Promise<void> {
172
+ console.warn('`setPositionAsync` is only available on Android');
173
+ }
174
+
175
+ /**
176
+ * Whether the navigation and status bars float above the app (absolute) or sit inline with it (relative).
177
+ * This value can be incorrect if `androidNavigationBar.visible` is used instead of the config plugin `position` property.
178
+ *
179
+ * This method is unstable because the position can be set via another native module and get out of sync.
180
+ * Alternatively, you can get the position by measuring the insets returned by `react-native-safe-area-context`.
181
+ *
182
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
183
+ *
184
+ * @example
185
+ * ```ts
186
+ * await NavigationBar.unstable_getPositionAsync()
187
+ * ```
188
+ * @returns Navigation bar positional rendering mode. Returns `relative` on unsupported platforms (iOS, web).
189
+ */
190
+ export async function unstable_getPositionAsync(): Promise<NavigationBarPosition> {
191
+ console.warn('`unstable_getPositionAsync` is only available on Android');
192
+ return 'relative';
193
+ }
194
+
195
+ /**
196
+ * Sets the behavior of the status bar and navigation bar when they are hidden and the user wants to reveal them.
197
+ *
198
+ * For example, if the navigation bar is hidden (`setVisibilityAsync(false)`) and the behavior
199
+ * is `'overlay-swipe'`, the user can swipe from the bottom of the screen to temporarily reveal the navigation bar.
200
+ *
201
+ * - `'overlay-swipe'`: Temporarily reveals the System UI after a swipe gesture (bottom or top) without insetting your App's content.
202
+ * - `'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.
203
+ * - `'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.
204
+ *
205
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
206
+ *
207
+ * @example
208
+ * ```ts
209
+ * await NavigationBar.setBehaviorAsync('overlay-swipe')
210
+ * ```
211
+ * @param behavior Dictates the interaction behavior of the navigation bar.
212
+ */
213
+ export async function setBehaviorAsync(behavior: NavigationBarBehavior): Promise<void> {
214
+ console.warn('`setBehaviorAsync` is only available on Android');
215
+ }
216
+
217
+ /**
218
+ * Gets the behavior of the status and navigation bars when the user swipes or touches the screen.
219
+ *
220
+ * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
221
+ *
222
+ * @example
223
+ * ```ts
224
+ * await NavigationBar.getBehaviorAsync()
225
+ * ```
226
+ * @returns Navigation bar interaction behavior. Returns `inset-touch` on unsupported platforms (iOS, web).
227
+ */
228
+ export async function getBehaviorAsync(): Promise<NavigationBarBehavior> {
229
+ console.warn('`getBehaviorAsync` is only available on Android');
230
+ return 'inset-touch';
21
231
  }
22
- const canRunEdgeToEdgeMethods = SystemBars !== null;
23
232
 
24
- // MARK: react-native-edge-to-edge based APIs
25
233
  /**
26
234
  * Sets the style of the navigation bar.
27
235
  * > This will have an effect when the following conditions are met:
@@ -34,43 +242,29 @@ const canRunEdgeToEdgeMethods = SystemBars !== null;
34
242
  * @platform android
35
243
  */
36
244
  export function setStyle(style: NavigationBarStyle) {
37
- if (!canRunEdgeToEdgeMethods && Platform.OS === 'android') {
38
- throw new Error(
39
- '`setStyle` is only supported on Android when edge-to-edge is enabled. Enable edge-to-edge or use the `setButtonStyle` function instead.'
40
- );
41
- }
42
- if (Platform.OS !== 'android') {
43
- console.warn('`setStyle` method is only available on Android');
44
- return;
45
- }
46
- SystemBars?.setStyle({ navigationBar: style });
245
+ console.warn('`setStyle` method is only available on Android');
47
246
  }
48
247
 
49
248
  /**
50
- * Set the navigation bar's visibility.
249
+ * React hook that statefully updates with the visibility of the system navigation bar.
51
250
  *
52
251
  * @example
53
252
  * ```ts
54
- * NavigationBar.setVisibilityAsync("hidden");
253
+ * function App() {
254
+ * const visibility = NavigationBar.useVisibility()
255
+ * // React Component...
256
+ * }
55
257
  * ```
56
- * @param visibility Based on CSS visibility property.
57
- * @platform android
258
+ * @returns Visibility of the navigation bar, `null` during async initialization.
58
259
  */
59
- export async function setVisibilityAsync(visibility: NavigationBarVisibility) {
60
- if (Platform.OS !== 'android') {
61
- console.warn('`setVisibilityAsync` is only available on Android');
62
- return;
63
- }
64
-
65
- if (canRunEdgeToEdgeMethods) {
66
- // We know the SystemBars module is available, but typescript doesn't interpret it, so we have to use optional.
67
- return SystemBars?.setHidden({ navigationBar: visibility === 'hidden' });
68
- }
69
-
70
- return await ExpoNavigationBar.setVisibilityAsync(visibility);
71
- }
260
+ export function useVisibility(): NavigationBarVisibility | null {
261
+ const [visibility, setVisible] = useState<NavigationBarVisibility | null>(null);
72
262
 
73
- // MARK: existing expo-navigation-bar APIs
263
+ useEffect(() => {
264
+ setVisible('hidden');
265
+ }, []);
266
+
267
+ return visibility;
268
+ }
74
269
 
75
- export * from './NativeNavigationBarWrapper';
76
270
  export * from './NavigationBar.types';
@@ -1,178 +0,0 @@
1
- import { type EventSubscription } from 'expo-modules-core';
2
- import { NavigationBarBehavior, NavigationBarButtonStyle, NavigationBarPosition, NavigationBarVisibility, NavigationBarVisibilityEvent } from './NavigationBar.types';
3
- /**
4
- * Observe changes to the system navigation bar.
5
- * Due to platform constraints, this callback will also be triggered when the status bar visibility changes.
6
- *
7
- * @example
8
- * ```ts
9
- * NavigationBar.addVisibilityListener(({ visibility }) => {
10
- * // ...
11
- * });
12
- * ```
13
- */
14
- export declare function addVisibilityListener(listener: (event: NavigationBarVisibilityEvent) => void): EventSubscription;
15
- /**
16
- * Changes the navigation bar's background color.
17
- *
18
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
19
- *
20
- * @example
21
- * ```ts
22
- * NavigationBar.setBackgroundColorAsync("white");
23
- * ```
24
- * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
25
- */
26
- export declare function setBackgroundColorAsync(color: string): Promise<void>;
27
- /**
28
- * Gets the navigation bar's background color.
29
- *
30
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
31
- *
32
- * @example
33
- * ```ts
34
- * const color = await NavigationBar.getBackgroundColorAsync();
35
- * ```
36
- * @returns Current navigation bar color in hex format. Returns `#00000000` (transparent) on unsupported platforms (iOS, web).
37
- *
38
- */
39
- export declare function getBackgroundColorAsync(): Promise<string>;
40
- /**
41
- * Changes the navigation bar's border color.
42
- *
43
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
44
- *
45
- * @example
46
- * ```ts
47
- * NavigationBar.setBorderColorAsync("red");
48
- * ```
49
- * @param color Any valid [CSS 3 (SVG) color](http://www.w3.org/TR/css3-color/#svg-color).
50
- */
51
- export declare function setBorderColorAsync(color: string): Promise<void>;
52
- /**
53
- * Gets the navigation bar's top border color, also known as the "divider color".
54
- *
55
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
56
- *
57
- * @example
58
- * ```ts
59
- * const color = await NavigationBar.getBorderColorAsync();
60
- * ```
61
- * @returns Navigation bar top border color in hex format. Returns `#00000000` (transparent) on unsupported platforms (iOS, web).
62
- */
63
- export declare function getBorderColorAsync(): Promise<string>;
64
- /**
65
- * Get the navigation bar's visibility.
66
- *
67
- *
68
- * @example
69
- * ```ts
70
- * const visibility = await NavigationBar.getVisibilityAsync("hidden");
71
- * ```
72
- * @returns Navigation bar's current visibility status. Returns `hidden` on unsupported platforms (iOS, web).
73
- */
74
- export declare function getVisibilityAsync(): Promise<NavigationBarVisibility>;
75
- /**
76
- * Changes the navigation bar's button colors between white (`light`) and a dark gray color (`dark`).
77
- *
78
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
79
- *
80
- * @example
81
- * ```ts
82
- * NavigationBar.setButtonStyleAsync("light");
83
- * ```
84
- * @param style Dictates the color of the foreground element color.
85
- */
86
- export declare function setButtonStyleAsync(style: NavigationBarButtonStyle): Promise<void>;
87
- /**
88
- * Gets the navigation bar's button color styles.
89
- *
90
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
91
- *
92
- * @example
93
- * ```ts
94
- * const style = await NavigationBar.getButtonStyleAsync();
95
- * ```
96
- * @returns Navigation bar foreground element color settings. Returns `light` on unsupported platforms (iOS, web).
97
- */
98
- export declare function getButtonStyleAsync(): Promise<NavigationBarButtonStyle>;
99
- /**
100
- * Sets positioning method used for the navigation bar (and status bar).
101
- * Setting position `absolute` will float the navigation bar above the content,
102
- * whereas position `relative` will shrink the screen to inline the navigation bar.
103
- *
104
- * When drawing behind the status and navigation bars, ensure the safe area insets are adjusted accordingly.
105
- *
106
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
107
- *
108
- * @example
109
- * ```ts
110
- * // enables edge-to-edge mode
111
- * await NavigationBar.setPositionAsync('absolute')
112
- * // transparent backgrounds to see through
113
- * await NavigationBar.setBackgroundColorAsync('#ffffff00')
114
- * ```
115
- * @param position Based on CSS position property.
116
- */
117
- export declare function setPositionAsync(position: NavigationBarPosition): Promise<void>;
118
- /**
119
- * Whether the navigation and status bars float above the app (absolute) or sit inline with it (relative).
120
- * This value can be incorrect if `androidNavigationBar.visible` is used instead of the config plugin `position` property.
121
- *
122
- * This method is unstable because the position can be set via another native module and get out of sync.
123
- * Alternatively, you can get the position by measuring the insets returned by `react-native-safe-area-context`.
124
- *
125
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
126
- *
127
- * @example
128
- * ```ts
129
- * await NavigationBar.unstable_getPositionAsync()
130
- * ```
131
- * @returns Navigation bar positional rendering mode. Returns `relative` on unsupported platforms (iOS, web).
132
- */
133
- export declare function unstable_getPositionAsync(): Promise<NavigationBarPosition>;
134
- /**
135
- * Sets the behavior of the status bar and navigation bar when they are hidden and the user wants to reveal them.
136
- *
137
- * For example, if the navigation bar is hidden (`setVisibilityAsync(false)`) and the behavior
138
- * is `'overlay-swipe'`, the user can swipe from the bottom of the screen to temporarily reveal the navigation bar.
139
- *
140
- * - `'overlay-swipe'`: Temporarily reveals the System UI after a swipe gesture (bottom or top) without insetting your App's content.
141
- * - `'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.
142
- * - `'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.
143
- *
144
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
145
- *
146
- * @example
147
- * ```ts
148
- * await NavigationBar.setBehaviorAsync('overlay-swipe')
149
- * ```
150
- * @param behavior Dictates the interaction behavior of the navigation bar.
151
- */
152
- export declare function setBehaviorAsync(behavior: NavigationBarBehavior): Promise<void>;
153
- /**
154
- * Gets the behavior of the status and navigation bars when the user swipes or touches the screen.
155
- *
156
- * > This method is supported only when edge-to-edge is disabled. Using it in edge-to-edge app may lead to unexpected behavior.
157
- *
158
- * @example
159
- * ```ts
160
- * await NavigationBar.getBehaviorAsync()
161
- * ```
162
- * @returns Navigation bar interaction behavior. Returns `inset-touch` on unsupported platforms (iOS, web).
163
- */
164
- export declare function getBehaviorAsync(): Promise<NavigationBarBehavior>;
165
- /**
166
- * React hook that statefully updates with the visibility of the system navigation bar.
167
- *
168
- * @example
169
- * ```ts
170
- * function App() {
171
- * const visibility = NavigationBar.useVisibility()
172
- * // React Component...
173
- * }
174
- * ```
175
- * @returns Visibility of the navigation bar, `null` during async initialization.
176
- */
177
- export declare function useVisibility(): NavigationBarVisibility | null;
178
- //# sourceMappingURL=NativeNavigationBarWrapper.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NativeNavigationBarWrapper.d.ts","sourceRoot":"","sources":["../src/NativeNavigationBarWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAiC,MAAM,mBAAmB,CAAC;AAM1F,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,uBAAuB,EACvB,4BAA4B,EAC7B,MAAM,uBAAuB,CAAC;AAY/B;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI,GACtD,iBAAiB,CAMnB;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAY1E;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,uBAAuB,IAAI,OAAO,CAAC,MAAM,CAAC,CAW/D;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAYtE;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,MAAM,CAAC,CAY3D;AAED;;;;;;;;;GASG;AACH,wBAAsB,kBAAkB,IAAI,OAAO,CAAC,uBAAuB,CAAC,CAM3E;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,OAAO,CAAC,IAAI,CAAC,CAWxF;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,wBAAwB,CAAC,CAW7E;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,CAWrF;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,yBAAyB,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAWhF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,CAWrF;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAWvE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,IAAI,uBAAuB,GAAG,IAAI,CA4B9D"}