react-native-navigation-mode 1.0.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 +45 -0
- package/package.json +8 -2
package/README.md
CHANGED
|
@@ -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
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-navigation-mode",
|
|
3
|
-
"version": "1.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",
|
|
@@ -43,9 +43,15 @@
|
|
|
43
43
|
"keywords": [
|
|
44
44
|
"react-native",
|
|
45
45
|
"android",
|
|
46
|
+
"ios",
|
|
46
47
|
"navigation",
|
|
47
48
|
"gesture",
|
|
48
|
-
"
|
|
49
|
+
"navigation-buttons",
|
|
50
|
+
"edge-to-edge",
|
|
51
|
+
"navigation-bar",
|
|
52
|
+
"react-native-edge-to-edge",
|
|
53
|
+
"turbo-module",
|
|
54
|
+
"native"
|
|
49
55
|
],
|
|
50
56
|
"repository": {
|
|
51
57
|
"type": "git",
|