react-native-navigation-mode 1.0.4 → 1.1.1

package/README.md

@@ -32,66 +32,23 @@
   </table>
 </div>
 
----
-
-## 🤔 Why This Library?
-
-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:
-
-### ❌ Common Bad Approaches
-
-- **Screen dimension calculations** - Breaks on different screen sizes and orientations
-- **Safe area inset guessing** - Inconsistent across devices and Android versions
-- **Margin-based detection** - Fragile and depends on UI layout changes
-- **Manual device databases** - Impossible to maintain for all Android devices
+------
 
-### ✅ This Library's Solution
-
-This library uses **official Android APIs** to directly query the system's navigation configuration:
-
-- **`config_navBarInteractionMode`** - The actual system resource Android uses internally
-- **Settings.Secure provider** - Fallback method for reliable detection
-- **Zero guesswork** - No calculations, no assumptions, just direct system queries
-
-### 🚀 Critical for Edge-to-Edge Mode
-
-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**:
-
-- **Edge-to-edge enforcement** - Android 16 will remove the opt-out entirely
-- **Expo SDK 53+** - New projects use edge-to-edge by default
-- **React Native 0.79+** - Built-in support for 16KB page size and edge-to-edge
-- **Safe area management** - Critical for preventing content overlap with system bars (especially noticeable in 3-button navigation mode).
-
-### Real-World Impact
-
-```typescript
-// Before: Unreliable dimension-based guessing
-const isGesture = screenHeight === windowHeight; // 😢 Breaks easily
-
-// After: Direct system detection  
-const isGesture = await isGestureNavigation(); // 🎯 Always accurate
-```
-
-**Perfect for:**
-
-- 🎨 Adaptive UI layouts based on navigation type
-- 📱 Bottom sheet positioning and safe areas
-- 🧭 Navigation-aware component design
-- 🔄 Edge-to-edge layout compatibility
-- 📊 Analytics and user experience tracking
-
-## ✨ Features
+## ✨ Key Features
 
 - 🎯 **Direct Native Detection** - No hacky workarounds or dimension-based guessing
-- ⚡ **Turbo Module** - Built with the latest React Native architecture
+- ⚡ **Turbo Module** - Built for React Native New Architecture
 - 🔄 **Real-time Detection** - Accurate navigation mode identification
+- 📏 **Navigation Bar Height** - Get exact navigation bar height in dp for precise UI calculations
 - 📱 **Cross Platform** - Android detection + iOS compatibility
 - 🎣 **React Hooks** - Easy integration with `useNavigationMode()`
 - 📦 **Zero Dependencies** - Lightweight and performant
 - 🛡️ **TypeScript** - Full type safety out of the box
 - ↕️ **Edge To Edge Support** - Full support for `react-native-edge-to-edge`
 
-## Installation
+## 🚀 Quick Start
+
+### Installation
 
 Using yarn:
 
@@ -105,59 +62,130 @@ Using npm:
 npm install react-native-navigation-mode
 ```
 
-### For React Native CLI
+> **Note:** Auto-linking should handle setup automatically for all newer RN versions.
 
-Auto-linking handles setup automatically for React Native 0.60+.
+---
 
-## Usage
+### Basic Usage
 
-### Quick Check
+```tsx
+import { useNavigationMode } from 'react-native-navigation-mode';
 
-```typescript
-import { isGestureNavigation } from 'react-native-navigation-mode';
+export default function App() {
+  const { navigationMode, loading, error } = useNavigationMode();
 
-// Simple boolean check
-const isGesture = await isGestureNavigation();
-console.log('Gesture navigation:', isGesture); // true/false
-```
+  if (loading) return (<Text>Detecting navigation mode...</Text>);
+  if (error) return (<Text>Error: {error.message}</Text>);
 
-### Detailed Information
+  return (
+    <View>
+      <Text>Navigation Type: {navigationMode?.type}</Text>
+      <Text>Gesture Navigation: {navigationMode?.isGestureNavigation ? 'Yes' : 'No'}</Text>
+      <Text>Navigation Bar Height: {navigationMode?.navigationBarHeight}dp</Text>
+    </View>
+  );
+}
+```
 
-```typescript
-import { getNavigationMode } from 'react-native-navigation-mode';
+---
 
-// Get comprehensive navigation info
-const navInfo = await getNavigationMode();
-console.log('Navigation type:', navInfo.type); // '3_button', '2_button', 'gesture', or 'unknown'
-```
+## 🔧 API Reference
 
 ### React Hook (Recommended)
 
-```typescript
-import React from 'react';
-import { View, Text } from 'react-native';
+#### `useNavigationMode(): { navigationMode, loading, error }`
+
+- Returned property types:
+
+| Property      | Type                           | Description                                                  |
+| ------------- | ------------------------------ | ------------------------------------------------------------ |
+| navigatioMode | `NavigationModeInfo` or `null` | All properties mentioned in [NavigationModeInfo](#navigationmodeinfo). |
+| loading       | `boolean`                      | Indicates if navigation mode info is being fetched.          |
+| error         | `Error`                        | Typescript error object containing the cause of the error.   |
+
+The easiest way to detect navigation mode with loading and error states.
+
+```tsx
 import { useNavigationMode } from 'react-native-navigation-mode';
 
-export default function NavigationInfo() {
+function MyComponent() {
   const { navigationMode, loading, error } = useNavigationMode();
-
-  if (loading) return <Text>Detecting navigation mode...</Text>;
+  
+  if (loading) return <Text>Loading...</Text>;
   if (error) return <Text>Error: {error.message}</Text>;
-
+  
   return (
     <View>
       <Text>Navigation Type: {navigationMode?.type}</Text>
-      <Text>Gesture Navigation: {navigationMode?.isGestureNavigation ? 'Yes' : 'No'}</Text>
+      <Text>Is Gesture: {navigationMode?.isGestureNavigation ? 'Yes' : 'No'}</Text>
+      <Text>Bar Height: {navigationMode?.navigationBarHeight}dp</Text>
     </View>
   );
 }
 ```
 
-### Conditional UI Rendering
+### Functions
+
+#### `getNavigationMode(): Promise<`[NavigationModeInfo](#navigationmodeinfo)`>`
+
+Returns comprehensive navigation mode information.
 
 ```typescript
-import React from 'react';
-import { View } from 'react-native';
+import { getNavigationMode } from 'react-native-navigation-mode';
+
+const navInfo = await getNavigationMode();
+console.log('Navigation type:', navInfo.type); // '3_button', '2_button', 'gesture', or 'unknown'
+```
+
+#### `isGestureNavigation(): Promise<boolean>`
+
+Quick check if device is using gesture navigation.
+
+```typescript
+import { isGestureNavigation } from 'react-native-navigation-mode';
+
+const isGesture = await isGestureNavigation();
+console.log('Gesture navigation:', isGesture); // true/false
+```
+
+#### `getNavigationBarHeight(): Promise<number>`
+
+Returns the navigation bar height in density-independent pixels (dp).
+
+```typescript
+import { getNavigationBarHeight } from 'react-native-navigation-mode';
+
+const height = await getNavigationBarHeight();
+console.log('Navigation bar height:', height); // number (dp)
+```
+
+### Types
+
+#### `NavigationModeInfo`
+
+| Property            | Type                                                        | Description                                               |
+| ------------------- | ----------------------------------------------------------- | --------------------------------------------------------- |
+| type                | `'3_button'` or `'2_button'` or `'gesture'` or  `'unknown'` | 4 possible Android navigation modes that can be detected. |
+| isGestureNavigation | `boolean`                                                   | Whether gesture navigation is active.                     |
+| interactionMode     | `number` or `undefined`                                     | See [Navigation Mode Values](#navigation-mode-values)     |
+| navigationBarHeight | `number` or `undefined`                                     | Navigation bar height in density-independent pixels (dp). |
+
+### Navigation Mode Values
+
+| Android Mode | Type       | Description                                         |
+| ------------ | ---------- | --------------------------------------------------- |
+| 0            | `3_button` | Traditional Android navigation (Back, Home, Recent) |
+| 1            | `2_button` | Two-button navigation (Back, Home)                  |
+| 2            | `gesture`  | Full gesture navigation                             |
+| -1           | `unknown`  | Could not determine navigation mode                 |
+
+---
+
+## 💡 Usage Examples
+
+### Adaptive UI Layout
+
+```tsx
 import { useNavigationMode } from 'react-native-navigation-mode';
 
 export default function AdaptiveUI() {
@@ -166,101 +194,173 @@ export default function AdaptiveUI() {
   return (
     <View 
       style={{
-        paddingBottom: navigationMode?.isGestureNavigation ? 34 : 48 // Adjust for gesture nav
-      }}
-    >
+        // paddingBottom using real navigation bar height
+        paddingBottom: navigationMode?.navigationBarHeight || 0,
+      }}>
       {/* Your content */}
     </View>
   );
 }
 ```
 
-## API Reference
+### Conditional Rendering
 
-### Functions
+```tsx
+import { useNavigationMode } from 'react-native-navigation-mode';
 
-#### `getNavigationMode(): Promise<NavigationModeInfo>`
+export default function ConditionalUI() {
+  const { navigationMode } = useNavigationMode();
 
-Returns comprehensive navigation mode information.
+  return (
+    <View>
+      {navigationMode?.isGestureNavigation && (
+        <Text>Swipe gestures are available!</Text>
+      )}
+      
+      {navigationMode?.type === '3_button' && (
+        <Text>Traditional navigation buttons detected</Text>
+      )}
+    </View>
+  );
+}
+```
 
-#### `isGestureNavigation(): Promise<boolean>`
+### Manual Detection
 
-Quick check if device is using gesture navigation.
+```typescript
+import { 
+  getNavigationMode, 
+  isGestureNavigation, 
+  getNavigationBarHeight 
+} from 'react-native-navigation-mode';
+
+const checkNavigation = async () => {
+  // Get all info at once
+  const navInfo = await getNavigationMode();
+  
+  // Or get specific info
+  const isGesture = await isGestureNavigation();
+  const barHeight = await getNavigationBarHeight();
+  
+  console.log('Navigation info:', navInfo);
+  console.log('Is gesture:', isGesture);
+  console.log('Bar height:', barHeight);
+};
+```
 
-### Hooks
+---
 
-#### `useNavigationMode(): { navigationMode, loading, error }`
+## 🤔 Why This Library?
 
-React hook for navigation mode detection with loading and error states.
+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:
 
-### Types
+### ❌ Common Bad Approaches
 
-#### `NavigationModeInfo`
+- **Screen dimension calculations** - Breaks on different screen sizes and orientations
+- **Safe area inset guessing** - Inconsistent across devices and Android versions
+- **Margin-based detection** - Fragile and depends on UI layout changes
+- **Manual device databases** - Impossible to maintain for all Android devices
+
+### ✅ This Library's Solution
+
+This library uses **official Android APIs** to directly query the system's navigation configuration:
+
+- **`config_navBarInteractionMode`** - The actual system resource Android uses internally
+- **Settings.Secure provider** - Fallback method for reliable detection
+- **WindowInsets API** - Accurate navigation bar height detection
+- **Zero guesswork** - No calculations, no assumptions, just direct system queries
+
+### 🚀 Critical for Edge-to-Edge Mode
+
+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**:
+
+- **Edge-to-edge enforcement** - Android 16 will remove the opt-out entirely
+- **Expo SDK 53+** - New projects use edge-to-edge by default
+- **React Native 0.79+** - Built-in support for 16KB page size and edge-to-edge
+- **Safe area management** - Critical for preventing content overlap with system bars
+
+### Real-World Impact
+
+```typescript
+// Before: Unreliable dimension-based guessing
+const isGesture = screenHeight === windowHeight; // 😢 Breaks easily
 
-| Property            | Type                                           | Description                                      |
-| ------------------- | ---------------------------------------------- | ------------------------------------------------ |
-| type                | `'3_button' \| '2_button' \| 'gesture' \| 'unknown'` | Navigation mode type                             |
-| isGestureNavigation | `boolean`                                      | Whether gesture navigation is active             |
-| interactionMode     | `number \| undefined`                          | Raw Android interaction mode (0, 1, 2, or -1)   |
+// After: Direct system detection  
+const isGesture = await isGestureNavigation(); // 🎯 Always accurate
+```
+
+**Perfect for:**
+
+- 🎨 Adaptive UI layouts based on navigation type
+- 📱 Bottom sheet positioning and safe areas
+- 🧭 Navigation-aware component design
+- 🔄 Edge-to-edge layout compatibility
+- 📊 Analytics and user experience tracking
 
-## Platform Support
+---
 
-| Platform | Support | Notes |
-|----------|---------|-------|
-| Android  | ✅ Full | Detects all navigation modes via native Android APIs |
-| iOS      | ✅ Compatible | Always returns `gesture` (iOS uses gesture navigation) |
+## 🛠️ Technical Details
+
+### Platform Support
+
+| Platform | Support      | Notes                                                        |
+| -------- | ------------ | ------------------------------------------------------------ |
+| Android  | ✅ Full       | Detects all navigation modes and navigation bar height via native Android APIs |
+| iOS      | ✅ Compatible | Always returns `gesture` and `navigationBarHeight: 0` (iOS uses gesture navigation) |
 
 ### Android Compatibility
 
 - **API 21+** - Basic navigation bar detection
 - **API 29+** - Full navigation mode detection (`config_navBarInteractionMode`)
 - **All versions** - Fallback detection methods included
+- **API 30+** - WindowInsets-based navigation bar height detection
+- **API 24-29** - Resource-based navigation bar height fallback
 
-## How It Works
+### How It Works
 
 The library uses multiple detection methods for maximum accuracy:
 
 1. **`config_navBarInteractionMode`** - Official Android configuration (API 29+)
 2. **Settings Provider** - Checks `navigation_mode` system setting
-3. **Navigation Bar Detection** - Validates navigation bar presence
-4. **Hardware Key Detection** - Fallback for older devices
-
-### Navigation Mode Values
-
-| Android Mode | Type | Description |
-|--------------|------|-------------|
-| 0 | `3_button` | Traditional Android navigation (Back, Home, Recent) |
-| 1 | `2_button` | Two-button navigation (Back, Home) |
-| 2 | `gesture` | Full gesture navigation |
-| -1 | `unknown` | Could not determine navigation mode |
+3. **WindowInsets API** - Accurate navigation bar height detection (API 30+)
+4. **Resource-based fallback** - Navigation bar height for older devices
 
-## Notes
+### Performance Notes
 
-1. 🍎 **iOS Behavior** - iOS always returns `isGestureNavigation: true` since iOS doesn't have 3-button navigation
+1. 🍎 **iOS Behavior** - iOS always returns `isGestureNavigation: true` and `navigationBarHeight: 0` since iOS doesn't have Android-style navigation bars
 2. ⚡ **Performance** - Turbo module ensures minimal performance impact
 3. 🔄 **Real-time** - Navigation mode is detected at call time, reflecting current device settings
 
-## Troubleshooting
+---
+
+## 🐛 Troubleshooting
 
 ### Common Issues
 
 **"TurboModuleRegistry.getEnforcing(...) is not a function"**
+
 - Ensure you're using React Native 0.68+ with new architecture enabled
 - For older RN versions, the module will fallback gracefully
 
-**Always returns 'unknown' on Android**
+**Always returns `'unknown'` on Android**
+
 - Check if your device/emulator supports the navigation mode APIs
 - Some custom ROMs may not expose standard Android navigation settings
 
-## Contributing
+**Navigation bar height returns `0`**
+
+- This is normal on devices without navigation bars (some tablets)
+- On older Android versions, fallback detection may not work on all devices
+
+## 🤝 Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
-## License
+## 📄 License
 
 MIT
 
-## Support the project
+## 💖 Support the Project
 
 <p align="center" valign="center">
   <a href="https://liberapay.com/FutureJJ/donate">

package/android/src/main/java/com/navigationmode/NavigationModeModule.kt

@@ -1,14 +1,15 @@
 package com.navigationmode
 
+import android.app.Activity
 import android.content.Context
 import android.content.res.Resources
 import android.os.Build
 import android.provider.Settings
-import android.view.ViewConfiguration
+import android.view.WindowInsets
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.WritableMap
-import com.facebook.react.bridge.Arguments
 import com.facebook.react.module.annotations.ReactModule
 
 @ReactModule(name = NavigationModeModule.NAME)
@@ -21,11 +22,49 @@ class NavigationModeModule(reactContext: ReactApplicationContext) :
 
     override fun getName(): String = NAME
 
+    private fun getNavigationBarHeight(context: Context): Int {
+        // Try to get Activity for WindowInsets
+        val activity = if (context is Activity) context else reactApplicationContext.currentActivity
+        val density = context.resources.displayMetrics.density // Get device density
+        
+        if (activity != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            val insets = activity.window.decorView.rootWindowInsets
+            if (insets != null) {
+                val navBar = insets.getInsets(WindowInsets.Type.navigationBars())
+                return (navBar.bottom / density).toInt() // Convert pixels to dp
+            }
+        }
+        
+        // Fallback to resource-based approach for API < 30
+        val resources = context.resources
+        val resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android")
+        return if (resourceId > 0) {
+            // getDimensionPixelSize returns pixels, convert to dp
+            (resources.getDimensionPixelSize(resourceId) / density).toInt()
+        } else {
+            0 // Fallback for devices without a navigation bar
+        }
+    }
+
+    override fun getNavigationBarHeight(promise: Promise) {
+        try {
+            val context = reactApplicationContext
+            val navBarHeight = getNavigationBarHeight(context)
+            promise.resolve(navBarHeight)
+        } catch (e: Exception) {
+            promise.reject("NAV_BAR_HEIGHT_ERROR", "Failed to get navigation bar height: ${e.message}", e)
+        }
+    }
+
     override fun getNavigationMode(promise: Promise) {
         try {
             val result = Arguments.createMap()
             val context = reactApplicationContext
             
+            // Use reactApplicationContext for navigation bar height
+            val navBarHeight = getNavigationBarHeight(context)
+            result.putInt("navigationBarHeight", navBarHeight)
+            
             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                 val navBarInteractionMode = getNavBarInteractionMode(context)
                 result.putInt("interactionMode", navBarInteractionMode)

package/lib/module/NativeNavigationMode.js.map

@@ -1 +1 @@
-{"version":3,"names":["TurboModuleRegistry","Platform","NativeModule","OS","getEnforcing"],"sourceRoot":"../../src","sources":["NativeNavigationMode.ts"],"mappings":";;AACA,SAASA,mBAAmB,EAAEC,QAAQ,QAAQ,cAAc;AAa5D;AACA;AACA,MAAMC,YAAY,GAChBD,QAAQ,CAACE,EAAE,KAAK,SAAS,GACrBH,mBAAmB,CAACI,YAAY,CAAO,gBAAgB,CAAC,GACxD,IAAI;AAEV,eAAeF,YAAY","ignoreList":[]}
+{"version":3,"names":["TurboModuleRegistry","Platform","NativeModule","OS","getEnforcing"],"sourceRoot":"../../src","sources":["NativeNavigationMode.ts"],"mappings":";;AACA,SAASA,mBAAmB,EAAEC,QAAQ,QAAQ,cAAc;AAe5D;AACA;AACA,MAAMC,YAAY,GAChBD,QAAQ,CAACE,EAAE,KAAK,SAAS,GACrBH,mBAAmB,CAACI,YAAY,CAAO,gBAAgB,CAAC,GACxD,IAAI;AAEV,eAAeF,YAAY","ignoreList":[]}

package/lib/module/index.js

@@ -13,7 +13,8 @@ export function getNavigationMode() {
     // iOS always uses gesture navigation (no 3-button navigation exists)
     return Promise.resolve({
       type: 'gesture',
-      isGestureNavigation: true
+      isGestureNavigation: true,
+      navigationBarHeight: 0 // iOS doesn't have a navigation bar like Android
     });
   }
 
@@ -36,6 +37,21 @@ export function isGestureNavigation() {
   return NavigationModeModule.isGestureNavigation();
 }
 
+/**
+ * Get the navigation bar height in dp
+ * @returns Promise<number> - navigation bar height in dp
+ */
+export function getNavigationBarHeight() {
+  // null check is redundant as it's always null for iOS but it's there to satisfy TypeScript
+  if (Platform.OS === 'ios' || NavigationModeModule === null) {
+    // iOS doesn't have a navigation bar like Android
+    return Promise.resolve(0);
+  }
+
+  // Only call native module on Android
+  return NavigationModeModule.getNavigationBarHeight();
+}
+
 /**
  * Hook for React components to get navigation mode
  */
@@ -76,6 +92,7 @@ export function useNavigationMode() {
 export default {
   getNavigationMode,
   isGestureNavigation,
+  getNavigationBarHeight,
   useNavigationMode
 };
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +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;EACA,IAAIH,QAAQ,CAACI,EAAE,KAAK,KAAK,IAAIF,oBAAoB,KAAK,IAAI,EAAE;IAC1D;IACA,OAAOG,OAAO,CAACC,OAAO,CAAC;MACrBC,IAAI,EAAE,SAAS;MACfC,mBAAmB,EAAE;IACvB,CAAC,CAAC;EACJ;;EAEA;EACA,OAAON,oBAAoB,CAACC,iBAAiB,CAAC,CAAC;AACjD;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASK,mBAAmBA,CAAA,EAAqB;EACtD;EACA,IAAIR,QAAQ,CAACI,EAAE,KAAK,KAAK,IAAIF,oBAAoB,KAAK,IAAI,EAAE;IAC1D;IACA,OAAOG,OAAO,CAACC,OAAO,CAAC,IAAI,CAAC;EAC9B;;EAEA;EACA,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":[]}
+{"version":3,"names":["Platform","React","NavigationModeModule","getNavigationMode","OS","Promise","resolve","type","isGestureNavigation","navigationBarHeight","getNavigationBarHeight","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;EACA,IAAIH,QAAQ,CAACI,EAAE,KAAK,KAAK,IAAIF,oBAAoB,KAAK,IAAI,EAAE;IAC1D;IACA,OAAOG,OAAO,CAACC,OAAO,CAAC;MACrBC,IAAI,EAAE,SAAS;MACfC,mBAAmB,EAAE,IAAI;MACzBC,mBAAmB,EAAE,CAAC,CAAE;IAC1B,CAAC,CAAC;EACJ;;EAEA;EACA,OAAOP,oBAAoB,CAACC,iBAAiB,CAAC,CAAC;AACjD;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASK,mBAAmBA,CAAA,EAAqB;EACtD;EACA,IAAIR,QAAQ,CAACI,EAAE,KAAK,KAAK,IAAIF,oBAAoB,KAAK,IAAI,EAAE;IAC1D;IACA,OAAOG,OAAO,CAACC,OAAO,CAAC,IAAI,CAAC;EAC9B;;EAEA;EACA,OAAOJ,oBAAoB,CAACM,mBAAmB,CAAC,CAAC;AACnD;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASE,sBAAsBA,CAAA,EAAoB;EACxD;EACA,IAAIV,QAAQ,CAACI,EAAE,KAAK,KAAK,IAAIF,oBAAoB,KAAK,IAAI,EAAE;IAC1D;IACA,OAAOG,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC;EAC3B;;EAEA;EACA,OAAOJ,oBAAoB,CAACQ,sBAAsB,CAAC,CAAC;AACtD;;AAEA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAA,EAAG;EAClC,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GACvCZ,KAAK,CAACa,QAAQ,CAA4B,IAAI,CAAC;EACjD,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGf,KAAK,CAACa,QAAQ,CAAC,IAAI,CAAC;EAClD,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGjB,KAAK,CAACa,QAAQ,CAAe,IAAI,CAAC;EAE5Db,KAAK,CAACkB,SAAS,CAAC,MAAM;IACpB,IAAIC,OAAO,GAAG,IAAI;IAElB,eAAeC,mBAAmBA,CAAA,EAAG;MACnC,IAAI;QACF,MAAMC,IAAI,GAAG,MAAMnB,iBAAiB,CAAC,CAAC;QACtC,IAAIiB,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;EACbd,iBAAiB;EACjBK,mBAAmB;EACnBE,sBAAsB;EACtBC;AACF,CAAC","ignoreList":[]}

package/lib/typescript/src/NativeNavigationMode.d.ts

@@ -3,10 +3,12 @@ export interface NavigationModeInfo {
     type: '3_button' | '2_button' | 'gesture' | 'unknown';
     isGestureNavigation: boolean;
     interactionMode?: number;
+    navigationBarHeight?: number;
 }
 export interface Spec extends TurboModule {
     getNavigationMode(): Promise<NavigationModeInfo>;
     isGestureNavigation(): Promise<boolean>;
+    getNavigationBarHeight(): Promise<number>;
 }
 declare const NativeModule: Spec | null;
 export default NativeModule;

package/lib/typescript/src/NativeNavigationMode.d.ts.map

@@ -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,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;AAID,QAAA,MAAM,YAAY,aAGR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"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;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,IAAK,SAAQ,WAAW;IACvC,iBAAiB,IAAI,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjD,mBAAmB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACxC,sBAAsB,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;CAC3C;AAID,QAAA,MAAM,YAAY,aAGR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -10,6 +10,11 @@ export declare function getNavigationMode(): Promise<NavigationModeInfo>;
  * @returns Promise<boolean> - true if gesture navigation is active
  */
 export declare function isGestureNavigation(): Promise<boolean>;
+/**
+ * Get the navigation bar height in dp
+ * @returns Promise<number> - navigation bar height in dp
+ */
+export declare function getNavigationBarHeight(): Promise<number>;
 /**
  * Hook for React components to get navigation mode
  */
@@ -21,6 +26,7 @@ export declare function useNavigationMode(): {
 declare const _default: {
     readonly getNavigationMode: typeof getNavigationMode;
     readonly isGestureNavigation: typeof isGestureNavigation;
+    readonly getNavigationBarHeight: typeof getNavigationBarHeight;
     readonly useNavigationMode: typeof useNavigationMode;
 };
 export default _default;

package/lib/typescript/src/index.d.ts.map

@@ -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,CAY/D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAAC,OAAO,CAAC,CAStD;AAED;;GAEG;AACH,wBAAgB,iBAAiB;;;;EAmChC;;;;;;AAED,wBAIW"}
+{"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,CAa/D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAAC,OAAO,CAAC,CAStD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAAC,MAAM,CAAC,CASxD;AAED;;GAEG;AACH,wBAAgB,iBAAiB;;;;EAmChC;;;;;;;AAED,wBAKW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation-mode",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "description": "Detect Android navigation mode (3-button, 2-button, or gesture)",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/NativeNavigationMode.ts

@@ -5,11 +5,13 @@ export interface NavigationModeInfo {
   type: '3_button' | '2_button' | 'gesture' | 'unknown';
   isGestureNavigation: boolean;
   interactionMode?: number;
+  navigationBarHeight?: number;
 }
 
 export interface Spec extends TurboModule {
   getNavigationMode(): Promise<NavigationModeInfo>;
   isGestureNavigation(): Promise<boolean>;
+  getNavigationBarHeight(): Promise<number>;
 }
 
 // Only get the native module on Android

package/src/index.tsx

@@ -17,6 +17,7 @@ export function getNavigationMode(): Promise<NavigationModeInfo> {
     return Promise.resolve({
       type: 'gesture',
       isGestureNavigation: true,
+      navigationBarHeight: 0, // iOS doesn't have a navigation bar like Android
     });
   }
 
@@ -39,6 +40,21 @@ export function isGestureNavigation(): Promise<boolean> {
   return NavigationModeModule.isGestureNavigation();
 }
 
+/**
+ * Get the navigation bar height in dp
+ * @returns Promise<number> - navigation bar height in dp
+ */
+export function getNavigationBarHeight(): Promise<number> {
+  // null check is redundant as it's always null for iOS but it's there to satisfy TypeScript
+  if (Platform.OS === 'ios' || NavigationModeModule === null) {
+    // iOS doesn't have a navigation bar like Android
+    return Promise.resolve(0);
+  }
+
+  // Only call native module on Android
+  return NavigationModeModule.getNavigationBarHeight();
+}
+
 /**
  * Hook for React components to get navigation mode
  */
@@ -82,5 +98,6 @@ export function useNavigationMode() {
 export default {
   getNavigationMode,
   isGestureNavigation,
+  getNavigationBarHeight,
   useNavigationMode,
 } as const;