react-native-navigation-mode 0.4.0 → 1.0.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.
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>
|
|
@@ -33,6 +33,51 @@
|
|
|
33
33
|
</tr>
|
|
34
34
|
</table>
|
|
35
35
|
</div>
|
|
36
|
+
## 🤔 Why This Library?
|
|
37
|
+
|
|
38
|
+
Android devices can use different navigation modes, but detecting which one is active has been a major pain point for React Native developers. Most existing solutions rely on unreliable workarounds:
|
|
39
|
+
|
|
40
|
+
### ❌ Common Bad Approaches
|
|
41
|
+
|
|
42
|
+
- **Screen dimension calculations** - Breaks on different screen sizes and orientations
|
|
43
|
+
- **Safe area inset guessing** - Inconsistent across devices and Android versions
|
|
44
|
+
- **Margin-based detection** - Fragile and depends on UI layout changes
|
|
45
|
+
- **Manual device databases** - Impossible to maintain for all Android devices
|
|
46
|
+
|
|
47
|
+
### ✅ This Library's Solution
|
|
48
|
+
|
|
49
|
+
This library uses **official Android APIs** to directly query the system's navigation configuration:
|
|
50
|
+
|
|
51
|
+
- **`config_navBarInteractionMode`** - The actual system resource Android uses internally
|
|
52
|
+
- **Settings.Secure provider** - Fallback method for reliable detection
|
|
53
|
+
- **Zero guesswork** - No calculations, no assumptions, just direct system queries
|
|
54
|
+
|
|
55
|
+
### 🚀 Critical for Edge-to-Edge Mode
|
|
56
|
+
|
|
57
|
+
With Android 15 enforcing edge-to-edge display for apps targeting API 35 and Google mandating this for Play Store updates starting August 31, 2025, proper navigation detection is now **essential**:
|
|
58
|
+
|
|
59
|
+
- **Edge-to-edge enforcement** - Android 16 will remove the opt-out entirely
|
|
60
|
+
- **Expo SDK 53+** - New projects use edge-to-edge by default
|
|
61
|
+
- **React Native 0.79+** - Built-in support for 16KB page size and edge-to-edge
|
|
62
|
+
- **Safe area management** - Critical for preventing content overlap with system bars
|
|
63
|
+
|
|
64
|
+
### Real-World Impact
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
// Before: Unreliable dimension-based guessing
|
|
68
|
+
const isGesture = screenHeight === windowHeight; // 😢 Breaks easily
|
|
69
|
+
|
|
70
|
+
// After: Direct system detection
|
|
71
|
+
const isGesture = await isGestureNavigation(); // 🎯 Always accurate
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**Perfect for:**
|
|
75
|
+
|
|
76
|
+
- 🎨 Adaptive UI layouts based on navigation type
|
|
77
|
+
- 📱 Bottom sheet positioning and safe areas
|
|
78
|
+
- 🧭 Navigation-aware component design
|
|
79
|
+
- 🔄 Edge-to-edge layout compatibility
|
|
80
|
+
- 📊 Analytics and user experience tracking
|
|
36
81
|
|
|
37
82
|
## ✨ Features
|
|
38
83
|
|
|
@@ -41,7 +86,6 @@
|
|
|
41
86
|
- 🔄 **Real-time Detection** - Accurate navigation mode identification
|
|
42
87
|
- 📱 **Cross Platform** - Android detection + iOS compatibility
|
|
43
88
|
- 🎣 **React Hooks** - Easy integration with `useNavigationMode()`
|
|
44
|
-
- 🚀 **Expo Compatible** - Works with Expo managed workflow (dev builds)
|
|
45
89
|
- 📦 **Zero Dependencies** - Lightweight and performant
|
|
46
90
|
- 🛡️ **TypeScript** - Full type safety out of the box
|
|
47
91
|
|
|
@@ -59,30 +103,6 @@ Using npm:
|
|
|
59
103
|
npm install react-native-navigation-mode
|
|
60
104
|
```
|
|
61
105
|
|
|
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
106
|
### For React Native CLI
|
|
87
107
|
|
|
88
108
|
Auto-linking handles setup automatically for React Native 0.60+.
|
|
@@ -215,9 +235,8 @@ The library uses multiple detection methods for maximum accuracy:
|
|
|
215
235
|
## Notes
|
|
216
236
|
|
|
217
237
|
1. 🍎 **iOS Behavior** - iOS always returns `isGestureNavigation: true` since iOS doesn't have 3-button navigation
|
|
218
|
-
2.
|
|
219
|
-
3.
|
|
220
|
-
4. 🔄 **Real-time** - Navigation mode is detected at call time, reflecting current device settings
|
|
238
|
+
2. ⚡ **Performance** - Turbo module ensures minimal performance impact
|
|
239
|
+
3. 🔄 **Real-time** - Navigation mode is detected at call time, reflecting current device settings
|
|
221
240
|
|
|
222
241
|
## Troubleshooting
|
|
223
242
|
|
|
@@ -227,9 +246,6 @@ The library uses multiple detection methods for maximum accuracy:
|
|
|
227
246
|
- Ensure you're using React Native 0.68+ with new architecture enabled
|
|
228
247
|
- For older RN versions, the module will fallback gracefully
|
|
229
248
|
|
|
230
|
-
**Expo Go not working**
|
|
231
|
-
- This is expected. Create a development build with `npx expo run:android`
|
|
232
|
-
|
|
233
249
|
**Always returns 'unknown' on Android**
|
|
234
250
|
- Check if your device/emulator supports the navigation mode APIs
|
|
235
251
|
- Some custom ROMs may not expose standard Android navigation settings
|
|
@@ -261,9 +277,6 @@ MIT
|
|
|
261
277
|
## ❤️ Thanks to
|
|
262
278
|
|
|
263
279
|
- Module built using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
|
264
|
-
- Inspiration from various Android navigation detection attempts in the community
|
|
265
|
-
- React Native team for Turbo Modules architecture
|
|
266
|
-
- Expo team for config plugin support
|
|
267
280
|
- Readme is edited using [Typora](https://typora.io/)
|
|
268
281
|
|
|
269
282
|
---
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-navigation-mode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
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",
|
|
@@ -50,9 +43,15 @@
|
|
|
50
43
|
"keywords": [
|
|
51
44
|
"react-native",
|
|
52
45
|
"android",
|
|
46
|
+
"ios",
|
|
53
47
|
"navigation",
|
|
54
48
|
"gesture",
|
|
55
|
-
"
|
|
49
|
+
"navigation-buttons",
|
|
50
|
+
"edge-to-edge",
|
|
51
|
+
"navigation-bar",
|
|
52
|
+
"react-native-edge-to-edge",
|
|
53
|
+
"turbo-module",
|
|
54
|
+
"native"
|
|
56
55
|
],
|
|
57
56
|
"repository": {
|
|
58
57
|
"type": "git",
|
|
@@ -74,7 +73,6 @@
|
|
|
74
73
|
"@eslint/eslintrc": "^3.3.0",
|
|
75
74
|
"@eslint/js": "^9.22.0",
|
|
76
75
|
"@evilmartians/lefthook": "^1.5.0",
|
|
77
|
-
"@expo/config-plugins": "^10.0.0",
|
|
78
76
|
"@react-native-community/cli": "15.0.0-alpha.2",
|
|
79
77
|
"@react-native/babel-preset": "0.79.2",
|
|
80
78
|
"@react-native/eslint-config": "^0.78.0",
|
|
@@ -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"}
|