react-native-navigation-mode 0.3.0 → 1.0.0
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.
- package/README.md +3 -43
- package/android/src/main/java/com/navigationmode/NavigationModeModule.kt +1 -22
- package/ios/NavigationMode.mm +1 -4
- package/lib/module/NativeNavigationMode.js.map +1 -1
- package/lib/module/index.js +1 -4
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/NativeNavigationMode.d.ts +1 -4
- package/lib/typescript/src/NativeNavigationMode.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -9
- package/src/NativeNavigationMode.ts +1 -4
- package/src/index.tsx +0 -3
- package/lib/typescript/plugin/src/index.d.ts +0 -4
- package/lib/typescript/plugin/src/index.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
🧭 Detect Android navigation mode (3-button, 2-button, or gesture navigation) with native precision using Turbo modules.
|
|
4
4
|
|
|
5
|
-
[](https://badge.fury.io/js/react-native-navigation-mode) [](https://github.com/JairajJangle/react-native-navigation-mode/blob/main/LICENSE) [](https://github.com/JairajJangle/react-native-navigation-mode/actions/workflows/ci.yml)   [](https://github.com/JairajJangle/react-native-navigation-mode/issues?q=is%3Aopen+is%3Aissue)   ](https://badge.fury.io/js/react-native-navigation-mode) [](https://github.com/JairajJangle/react-native-navigation-mode/blob/main/LICENSE) [](https://github.com/JairajJangle/react-native-navigation-mode/actions/workflows/ci.yml)   [](https://github.com/JairajJangle/react-native-navigation-mode/issues?q=is%3Aopen+is%3Aissue)   
|
|
6
6
|
|
|
7
7
|
<table align="center">
|
|
8
8
|
<tr>
|
|
@@ -41,7 +41,6 @@
|
|
|
41
41
|
- 🔄 **Real-time Detection** - Accurate navigation mode identification
|
|
42
42
|
- 📱 **Cross Platform** - Android detection + iOS compatibility
|
|
43
43
|
- 🎣 **React Hooks** - Easy integration with `useNavigationMode()`
|
|
44
|
-
- 🚀 **Expo Compatible** - Works with Expo managed workflow (dev builds)
|
|
45
44
|
- 📦 **Zero Dependencies** - Lightweight and performant
|
|
46
45
|
- 🛡️ **TypeScript** - Full type safety out of the box
|
|
47
46
|
|
|
@@ -59,30 +58,6 @@ Using npm:
|
|
|
59
58
|
npm install react-native-navigation-mode
|
|
60
59
|
```
|
|
61
60
|
|
|
62
|
-
### For Expo Managed Workflow
|
|
63
|
-
|
|
64
|
-
```sh
|
|
65
|
-
npx expo install react-native-navigation-mode
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
Add the plugin to your `app.config.js`:
|
|
69
|
-
|
|
70
|
-
```javascript
|
|
71
|
-
export default {
|
|
72
|
-
expo: {
|
|
73
|
-
plugins: ["react-native-navigation-mode"],
|
|
74
|
-
},
|
|
75
|
-
};
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
Create a development build:
|
|
79
|
-
|
|
80
|
-
```sh
|
|
81
|
-
npx expo run:android
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
> ⚠️ **Note:** This library requires a development build and will NOT work in Expo Go due to native code requirements.
|
|
85
|
-
|
|
86
61
|
### For React Native CLI
|
|
87
62
|
|
|
88
63
|
Auto-linking handles setup automatically for React Native 0.60+.
|
|
@@ -107,8 +82,6 @@ import { getNavigationMode } from 'react-native-navigation-mode';
|
|
|
107
82
|
// Get comprehensive navigation info
|
|
108
83
|
const navInfo = await getNavigationMode();
|
|
109
84
|
console.log('Navigation type:', navInfo.type); // '3_button', '2_button', 'gesture', or 'unknown'
|
|
110
|
-
console.log('SDK version:', navInfo.sdkVersion);
|
|
111
|
-
console.log('Device model:', navInfo.deviceModel);
|
|
112
85
|
```
|
|
113
86
|
|
|
114
87
|
### React Hook (Recommended)
|
|
@@ -128,9 +101,6 @@ export default function NavigationInfo() {
|
|
|
128
101
|
<View>
|
|
129
102
|
<Text>Navigation Type: {navigationMode?.type}</Text>
|
|
130
103
|
<Text>Gesture Navigation: {navigationMode?.isGestureNavigation ? 'Yes' : 'No'}</Text>
|
|
131
|
-
<Text>Has Navigation Bar: {navigationMode?.hasNavigationBar ? 'Yes' : 'No'}</Text>
|
|
132
|
-
<Text>Android SDK: {navigationMode?.sdkVersion}</Text>
|
|
133
|
-
<Text>Device: {navigationMode?.deviceModel}</Text>
|
|
134
104
|
</View>
|
|
135
105
|
);
|
|
136
106
|
}
|
|
@@ -184,9 +154,6 @@ React hook for navigation mode detection with loading and error states.
|
|
|
184
154
|
| ------------------- | ---------------------------------------------- | ------------------------------------------------ |
|
|
185
155
|
| type | `'3_button' \| '2_button' \| 'gesture' \| 'unknown'` | Navigation mode type |
|
|
186
156
|
| isGestureNavigation | `boolean` | Whether gesture navigation is active |
|
|
187
|
-
| hasNavigationBar | `boolean` | Whether device has a navigation bar |
|
|
188
|
-
| sdkVersion | `number` | Android SDK version (iOS: iOS version) |
|
|
189
|
-
| deviceModel | `string` | Device model name |
|
|
190
157
|
| interactionMode | `number \| undefined` | Raw Android interaction mode (0, 1, 2, or -1) |
|
|
191
158
|
|
|
192
159
|
## Platform Support
|
|
@@ -223,9 +190,8 @@ The library uses multiple detection methods for maximum accuracy:
|
|
|
223
190
|
## Notes
|
|
224
191
|
|
|
225
192
|
1. 🍎 **iOS Behavior** - iOS always returns `isGestureNavigation: true` since iOS doesn't have 3-button navigation
|
|
226
|
-
2.
|
|
227
|
-
3.
|
|
228
|
-
4. 🔄 **Real-time** - Navigation mode is detected at call time, reflecting current device settings
|
|
193
|
+
2. ⚡ **Performance** - Turbo module ensures minimal performance impact
|
|
194
|
+
3. 🔄 **Real-time** - Navigation mode is detected at call time, reflecting current device settings
|
|
229
195
|
|
|
230
196
|
## Troubleshooting
|
|
231
197
|
|
|
@@ -235,9 +201,6 @@ The library uses multiple detection methods for maximum accuracy:
|
|
|
235
201
|
- Ensure you're using React Native 0.68+ with new architecture enabled
|
|
236
202
|
- For older RN versions, the module will fallback gracefully
|
|
237
203
|
|
|
238
|
-
**Expo Go not working**
|
|
239
|
-
- This is expected. Create a development build with `npx expo run:android`
|
|
240
|
-
|
|
241
204
|
**Always returns 'unknown' on Android**
|
|
242
205
|
- Check if your device/emulator supports the navigation mode APIs
|
|
243
206
|
- Some custom ROMs may not expose standard Android navigation settings
|
|
@@ -269,9 +232,6 @@ MIT
|
|
|
269
232
|
## ❤️ Thanks to
|
|
270
233
|
|
|
271
234
|
- Module built using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
|
272
|
-
- Inspiration from various Android navigation detection attempts in the community
|
|
273
|
-
- React Native team for Turbo Modules architecture
|
|
274
|
-
- Expo team for config plugin support
|
|
275
235
|
- Readme is edited using [Typora](https://typora.io/)
|
|
276
236
|
|
|
277
237
|
---
|
|
@@ -34,13 +34,7 @@ class NavigationModeModule(reactContext: ReactApplicationContext) :
|
|
|
34
34
|
|
|
35
35
|
val gestureNavEnabled = isGestureNavigationEnabled(context)
|
|
36
36
|
result.putBoolean("isGestureNavigation", gestureNavEnabled)
|
|
37
|
-
|
|
38
|
-
val hasNavigationBar = hasNavigationBar(context)
|
|
39
|
-
result.putBoolean("hasNavigationBar", hasNavigationBar)
|
|
40
|
-
|
|
41
|
-
result.putInt("sdkVersion", Build.VERSION.SDK_INT)
|
|
42
|
-
result.putString("deviceModel", Build.MODEL)
|
|
43
|
-
|
|
37
|
+
|
|
44
38
|
promise.resolve(result)
|
|
45
39
|
} catch (e: Exception) {
|
|
46
40
|
promise.reject("NAVIGATION_MODE_ERROR", "Failed to get navigation mode: ${e.message}", e)
|
|
@@ -99,19 +93,4 @@ class NavigationModeModule(reactContext: ReactApplicationContext) :
|
|
|
99
93
|
}
|
|
100
94
|
} else false
|
|
101
95
|
}
|
|
102
|
-
|
|
103
|
-
private fun hasNavigationBar(context: Context): Boolean {
|
|
104
|
-
return try {
|
|
105
|
-
val resources = context.resources
|
|
106
|
-
val resourceId = resources.getIdentifier("config_showNavigationBar", "bool", "android")
|
|
107
|
-
|
|
108
|
-
if (resourceId > 0) {
|
|
109
|
-
resources.getBoolean(resourceId)
|
|
110
|
-
} else {
|
|
111
|
-
!ViewConfiguration.get(context).hasPermanentMenuKey()
|
|
112
|
-
}
|
|
113
|
-
} catch (e: Exception) {
|
|
114
|
-
true
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
96
|
}
|
package/ios/NavigationMode.mm
CHANGED
|
@@ -9,10 +9,7 @@ RCT_EXPORT_MODULE()
|
|
|
9
9
|
// iOS always uses gesture navigation - handled in TypeScript
|
|
10
10
|
NSDictionary *result = @{
|
|
11
11
|
@"type": @"gesture",
|
|
12
|
-
@"isGestureNavigation": @YES
|
|
13
|
-
@"hasNavigationBar": @NO,
|
|
14
|
-
@"sdkVersion": @([[NSProcessInfo processInfo] operatingSystemVersion].majorVersion),
|
|
15
|
-
@"deviceModel": @"iOS"
|
|
12
|
+
@"isGestureNavigation": @YES
|
|
16
13
|
};
|
|
17
14
|
resolve(result);
|
|
18
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativeNavigationMode.ts"],"mappings":";;AACA,SAASA,mBAAmB,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativeNavigationMode.ts"],"mappings":";;AACA,SAASA,mBAAmB,QAAQ,cAAc;AAalD,eAAeA,mBAAmB,CAACC,YAAY,CAAO,gBAAgB,CAAC","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -12,10 +12,7 @@ export function getNavigationMode() {
|
|
|
12
12
|
// iOS always uses gesture navigation (no 3-button navigation exists)
|
|
13
13
|
return Promise.resolve({
|
|
14
14
|
type: 'gesture',
|
|
15
|
-
isGestureNavigation: true
|
|
16
|
-
hasNavigationBar: false,
|
|
17
|
-
sdkVersion: parseInt(Platform.Version, 10),
|
|
18
|
-
deviceModel: 'iOS'
|
|
15
|
+
isGestureNavigation: true
|
|
19
16
|
});
|
|
20
17
|
}
|
|
21
18
|
return NavigationModeModule.getNavigationMode();
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Platform","React","NavigationModeModule","getNavigationMode","OS","Promise","resolve","type","isGestureNavigation","
|
|
1
|
+
{"version":3,"names":["Platform","React","NavigationModeModule","getNavigationMode","OS","Promise","resolve","type","isGestureNavigation","useNavigationMode","navigationMode","setNavigationMode","useState","loading","setLoading","error","setError","useEffect","mounted","fetchNavigationMode","mode","err","Error"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,oBAAoB,MAEpB,2BAAwB;AAI/B;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAA,EAAgC;EAC/D,IAAIH,QAAQ,CAACI,EAAE,KAAK,KAAK,EAAE;IACzB;IACA,OAAOC,OAAO,CAACC,OAAO,CAAC;MACrBC,IAAI,EAAE,SAAS;MACfC,mBAAmB,EAAE;IACvB,CAAC,CAAC;EACJ;EAEA,OAAON,oBAAoB,CAACC,iBAAiB,CAAC,CAAC;AACjD;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASK,mBAAmBA,CAAA,EAAqB;EACtD,IAAIR,QAAQ,CAACI,EAAE,KAAK,KAAK,EAAE;IACzB;IACA,OAAOC,OAAO,CAACC,OAAO,CAAC,IAAI,CAAC;EAC9B;EAEA,OAAOJ,oBAAoB,CAACM,mBAAmB,CAAC,CAAC;AACnD;;AAEA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAA,EAAG;EAClC,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GACvCV,KAAK,CAACW,QAAQ,CAA4B,IAAI,CAAC;EACjD,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGb,KAAK,CAACW,QAAQ,CAAC,IAAI,CAAC;EAClD,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGf,KAAK,CAACW,QAAQ,CAAe,IAAI,CAAC;EAE5DX,KAAK,CAACgB,SAAS,CAAC,MAAM;IACpB,IAAIC,OAAO,GAAG,IAAI;IAElB,eAAeC,mBAAmBA,CAAA,EAAG;MACnC,IAAI;QACF,MAAMC,IAAI,GAAG,MAAMjB,iBAAiB,CAAC,CAAC;QACtC,IAAIe,OAAO,EAAE;UACXP,iBAAiB,CAACS,IAAI,CAAC;UACvBJ,QAAQ,CAAC,IAAI,CAAC;QAChB;MACF,CAAC,CAAC,OAAOK,GAAG,EAAE;QACZ,IAAIH,OAAO,EAAE;UACXF,QAAQ,CAACK,GAAG,YAAYC,KAAK,GAAGD,GAAG,GAAG,IAAIC,KAAK,CAAC,eAAe,CAAC,CAAC;QACnE;MACF,CAAC,SAAS;QACR,IAAIJ,OAAO,EAAE;UACXJ,UAAU,CAAC,KAAK,CAAC;QACnB;MACF;IACF;IAEAK,mBAAmB,CAAC,CAAC;IAErB,OAAO,MAAM;MACXD,OAAO,GAAG,KAAK;IACjB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAER,cAAc;IAAEG,OAAO;IAAEE;EAAM,CAAC;AAC3C;AAEA,eAAe;EACbZ,iBAAiB;EACjBK,mBAAmB;EACnBC;AACF,CAAC","ignoreList":[]}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import type { TurboModule } from 'react-native';
|
|
2
2
|
export interface NavigationModeInfo {
|
|
3
|
-
interactionMode?: number;
|
|
4
3
|
type: '3_button' | '2_button' | 'gesture' | 'unknown';
|
|
5
4
|
isGestureNavigation: boolean;
|
|
6
|
-
|
|
7
|
-
sdkVersion: number;
|
|
8
|
-
deviceModel: string;
|
|
5
|
+
interactionMode?: number;
|
|
9
6
|
}
|
|
10
7
|
export interface Spec extends TurboModule {
|
|
11
8
|
getNavigationMode(): Promise<NavigationModeInfo>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeNavigationMode.d.ts","sourceRoot":"","sources":["../../../src/NativeNavigationMode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,MAAM,WAAW,kBAAkB;IACjC,
|
|
1
|
+
{"version":3,"file":"NativeNavigationMode.d.ts","sourceRoot":"","sources":["../../../src/NativeNavigationMode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IACtD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,IAAK,SAAQ,WAAW;IACvC,iBAAiB,IAAI,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjD,mBAAmB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;CACzC;;AAED,wBAAwE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAA6B,EAC3B,KAAK,kBAAkB,EACxB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAAC,kBAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAA6B,EAC3B,KAAK,kBAAkB,EACxB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAAC,kBAAkB,CAAC,CAU/D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAAC,OAAO,CAAC,CAOtD;AAED;;GAEG;AACH,wBAAgB,iBAAiB;;;;EAmChC;;;;;;AAED,wBAIW"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-navigation-mode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Detect Android navigation mode (3-button, 2-button, or gesture)",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -12,13 +12,6 @@
|
|
|
12
12
|
},
|
|
13
13
|
"./package.json": "./package.json"
|
|
14
14
|
},
|
|
15
|
-
"expo": {
|
|
16
|
-
"platforms": [
|
|
17
|
-
"android",
|
|
18
|
-
"ios"
|
|
19
|
-
],
|
|
20
|
-
"plugin": "./plugin/build/index.js"
|
|
21
|
-
},
|
|
22
15
|
"files": [
|
|
23
16
|
"src",
|
|
24
17
|
"lib",
|
|
@@ -74,7 +67,6 @@
|
|
|
74
67
|
"@eslint/eslintrc": "^3.3.0",
|
|
75
68
|
"@eslint/js": "^9.22.0",
|
|
76
69
|
"@evilmartians/lefthook": "^1.5.0",
|
|
77
|
-
"@expo/config-plugins": "^10.0.0",
|
|
78
70
|
"@react-native-community/cli": "15.0.0-alpha.2",
|
|
79
71
|
"@react-native/babel-preset": "0.79.2",
|
|
80
72
|
"@react-native/eslint-config": "^0.78.0",
|
|
@@ -2,12 +2,9 @@ import type { TurboModule } from 'react-native';
|
|
|
2
2
|
import { TurboModuleRegistry } from 'react-native';
|
|
3
3
|
|
|
4
4
|
export interface NavigationModeInfo {
|
|
5
|
-
interactionMode?: number;
|
|
6
5
|
type: '3_button' | '2_button' | 'gesture' | 'unknown';
|
|
7
6
|
isGestureNavigation: boolean;
|
|
8
|
-
|
|
9
|
-
sdkVersion: number;
|
|
10
|
-
deviceModel: string;
|
|
7
|
+
interactionMode?: number;
|
|
11
8
|
}
|
|
12
9
|
|
|
13
10
|
export interface Spec extends TurboModule {
|
package/src/index.tsx
CHANGED
|
@@ -16,9 +16,6 @@ export function getNavigationMode(): Promise<NavigationModeInfo> {
|
|
|
16
16
|
return Promise.resolve({
|
|
17
17
|
type: 'gesture',
|
|
18
18
|
isGestureNavigation: true,
|
|
19
|
-
hasNavigationBar: false,
|
|
20
|
-
sdkVersion: parseInt(Platform.Version as string, 10),
|
|
21
|
-
deviceModel: 'iOS',
|
|
22
19
|
});
|
|
23
20
|
}
|
|
24
21
|
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../plugin/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAuB,MAAM,sBAAsB,CAAC;;AAQ9E,wBAA8E"}
|