Merge pull request #5 from logicwind/dev

Added bottom inset support

Author: bhavesh-lw

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.2.0
+
+- Added support for fetching **bottom safe area inset** using native modules.
+- Improved example layout for better visual clarity and margin usage.
+
 ## 0.1.0
 
 - Fetch status bar height on **iOS** using native modules.

README.md

@@ -1,6 +1,6 @@
 # @logicwind/react-native-status-bar-height
 
-A simple and lightweight React Native package to get the height of the status bar on both Android and iOS.
+A simple and lightweight React Native package to get the **status bar height** and **bottom safe area inset** on both Android and iOS.
 
 ### Installation
 
@@ -30,18 +30,43 @@ No additional setup is required.
 
 ## Usage
 
-Import and use the `fetchStatusBarHeight` function to get the status bar height.
+Import and use the utility functions to fetch values:
 
 ```tsx md title="App.tsx"
-import { fetchStatusBarHeight } from '@logicwind/react-native-status-bar-height';
+import {
+  fetchStatusBarHeight,
+  fetchBottonInset,
+} from '@logicwind/react-native-status-bar-height';
 
 const statusBarHeight = fetchStatusBarHeight();
+const bottomInset = fetchBottonInset();
 ```
 
+## Example
+```tsx md title="App.tsx"
+<View style={{ flex: 1 }}>
+  <Text style={{ marginTop: fetchStatusBarHeight() }}>
+    Status Bar Height
+  </Text>
+  <View style={{ flex: 1 }} />
+  <Text style={{ marginBottom: fetchBottonInset() }}>
+    Bottom Safe Area
+  </Text>
+</View>
+```
+
+## API
+`fetchStatusBarHeight(): number` - Returns the status bar height in pixels.
+
+`fetchBottomInset(): number` - Returns the bottom safe area inset in pixels, helpful for avoiding overlap with gesture/navigation bars.
+
 ## How It Works
 
-- On **iOS**, it attempts to fetch the status bar height using native modules. If unavailable, it falls back to predefined values based on screen dimensions.
-- On **Android**, it retrieves `StatusBar.currentHeight`.
+- On iOS, it retrieves values using native APIs or falls back to common values.
+
+- On Android, it uses StatusBar.currentHeight for the status bar height, and WindowInsets for the bottom inset when available.
+
+- A fallback mechanism is in place to provide reasonable defaults.
 
 ## react-native-status-bar-height is crafted mindfully at [Logicwind](https://www.logicwind.com?utm_source=github&utm_medium=github.com-logicwind&utm_campaign=react-native-status-bar-height)
 

android/src/main/java/com/logicwind/reactnativestatusbarheight/ReactNativeStatusBarHeightModule.kt

@@ -1,9 +1,10 @@
 package com.logicwind.reactnativestatusbarheight
 
+import android.app.Activity
+import android.os.Build
+import android.view.WindowInsets
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
-import com.facebook.react.bridge.ReactMethod
-import com.facebook.react.bridge.Promise
 
 class ReactNativeStatusBarHeightModule(reactContext: ReactApplicationContext) :
   ReactContextBaseJavaModule(reactContext) {
@@ -12,11 +13,35 @@ class ReactNativeStatusBarHeightModule(reactContext: ReactApplicationContext) :
     return NAME
   }
 
-  // Example method
-  // See https://reactnative.dev/docs/native-modules-android
-  @ReactMethod
-  fun multiply(a: Double, b: Double, promise: Promise) {
-    promise.resolve(a * b)
+  override fun getConstants(): Map<String, Any> {
+    val constants = mutableMapOf<String, Any>()
+
+    val activity: Activity? = currentActivity
+    var bottomInset = 0
+
+    if (activity != null) {
+      val rootView = activity.window.decorView.rootView
+      val insets: WindowInsets? = rootView.rootWindowInsets
+
+      if (insets != null) {
+        bottomInset = when {
+          Build.VERSION.SDK_INT >= Build.VERSION_CODES.R -> {
+            insets.getInsets(WindowInsets.Type.systemBars()).bottom
+          }
+          Build.VERSION.SDK_INT >= Build.VERSION_CODES.M -> {
+            insets.systemWindowInsetBottom
+          }
+          else -> 0
+        }
+      }
+    }
+
+    val density = reactApplicationContext.resources.displayMetrics.density
+    val bottomInsetDp = bottomInset / density
+
+    constants["BOTTOM_SAFE_AREA"] = bottomInsetDp
+
+    return constants
   }
 
   companion object {

example/src/App.tsx

@@ -1,12 +1,56 @@
-import { Text, View } from 'react-native';
-import { fetchStatusBarHeight } from '@logicwind/react-native-status-bar-height';
+import { View, Text, StyleSheet } from 'react-native';
+import {
+  fetchBottomInset,
+  fetchStatusBarHeight,
+} from '@logicwind/react-native-status-bar-height';
 
-export default function App() {
-  const height = fetchStatusBarHeight();
+const App = () => {
+  const statusBarHeight = fetchStatusBarHeight();
+  const bottomInset = fetchBottomInset();
 
   return (
-    <View style={{ marginTop: height }}>
-      <Text>Status Bar Height: {height}</Text>
+    <View style={styles.container}>
+      <View style={[styles.header, { marginTop: statusBarHeight }]}>
+        <Text style={styles.label}>Status Bar Height: {statusBarHeight}px</Text>
+      </View>
+
+      <View style={styles.content}>
+        <Text style={styles.title}>Welcome to the App</Text>
+      </View>
+
+      <View style={[styles.footer, { marginBottom: bottomInset }]}>
+        <Text style={styles.label}>Bottom Inset: {bottomInset}px</Text>
+      </View>
     </View>
   );
-}
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#4B7BE5',
+  },
+  header: {
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  footer: {
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  label: {
+    fontSize: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+  },
+});
+
+export default App;

ios/ReactNativeStatusBarHeight.swift

@@ -7,10 +7,18 @@ class ReactNativeStatusBarHeight: NSObject {
   @objc
   func constantsToExport() -> [AnyHashable: Any] {
     var statusBarHeight: CGFloat = 0
-    if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene {
-      statusBarHeight = windowScene.statusBarManager?.statusBarFrame.height ?? 0
+    var bottomSafeArea: CGFloat = 0
+
+    if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
+       let window = windowScene.windows.first {
+      statusBarHeight = window.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
+      bottomSafeArea = window.safeAreaInsets.bottom
     }
-    return ["STATUS_BAR_HEIGHT": statusBarHeight]
+
+    return [
+      "STATUS_BAR_HEIGHT": statusBarHeight,
+      "BOTTOM_SAFE_AREA": bottomSafeArea
+    ]
   }
 
   @objc

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicwind/react-native-status-bar-height",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A React Native library for retrieving the status bar height on both Android and iOS.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -55,7 +55,12 @@
     "react-native-status-bar",
     "react-native-status-bar-height-ios",
     "react-native-status-bar-height-android",
-    "react-native-status-bar-height-ios-android"
+    "react-native-status-bar-height-ios-android",
+    "bottom-inset",
+    "safe-area",
+    "safe-area-inset",
+    "react-native-bottom-inset",
+    "react-native-safe-area"
   ],
   "repository": {
     "type": "git",

package.json

@@ -70,3 +70,11 @@ export const fetchStatusBarHeight = (): number => {
 
   return StatusBar.currentHeight ?? 0;
 };
+
+export const fetchBottomInset = (): number => {
+  try {
+    return ReactNativeStatusBarHeight.BOTTOM_SAFE_AREA;
+  } catch {
+    return 0;
+  }
+};