@react-native-hero/dimension 0.0.2 → 0.1.0

package/README.md

@@ -40,6 +40,9 @@ $ react-native link @react-native-hero/dimension
 
 ```js
 import {
+  init,
+  addListener,
+
   statusBarHeight,
   navigationBarHeight,
   screenSize,
@@ -51,6 +54,9 @@ import {
   getSafeArea,
 } from '@react-native-hero/dimension'
 
+// In your App.js, call init()
+init()
+
 // The getXxx methods is used to get the latest dimension info asynchronously.
 // If your app will not change the dimension info, you can just use the corresponding variables.
 
@@ -73,4 +79,12 @@ getSafeArea().then(data => {
   data.bottom
   data.left
 })
+
+// You have to listen dimension change in android app.
+addListener('change', function (data) {
+  data.statusBarHeight
+  data.navigationBarHeight
+  data.screenSize
+  data.safeArea
+})
 ```

package/android/src/main/java/com/github/reactnativehero/dimension/RNTDimensionModule.kt

@@ -1,14 +1,18 @@
 package com.github.reactnativehero.dimension
 
-import android.os.Build
-import android.view.Display
-import android.content.Context.WINDOW_SERVICE
+import android.app.Activity
 import android.graphics.Point
 import android.graphics.Rect
+import android.os.Build
+import android.os.Handler
+import android.os.Looper
+import android.util.Size
 import android.view.WindowManager
+import androidx.core.view.OnApplyWindowInsetsListener
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.bridge.*
-import java.lang.Exception
-import java.util.HashMap
+import com.facebook.react.modules.core.DeviceEventManagerModule
 
 class RNTDimensionModule(private val reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
 
@@ -16,52 +20,132 @@ class RNTDimensionModule(private val reactContext: ReactApplicationContext) : Re
         reactApplicationContext.resources.displayMetrics.density
     }
 
+    private var statusBarHeight = 0
+    private var navigationBarHeight = 0
+
+    private var cutoutTop = 0
+    private var cutoutRight = 0
+    private var cutoutBottom = 0
+    private var cutoutLeft = 0
+
     override fun getName(): String {
         return "RNTDimension"
     }
 
-    override fun getConstants(): Map<String, Any>? {
+    override fun getConstants(): Map<String, Any> {
 
         val constants: MutableMap<String, Any> = HashMap()
 
-        constants["DIMENSION_STATUS_BAR_HEIGHT"] = getStatusBarHeight()
-        constants["DIMENSION_NAVIGATION_BAR_HEIGHT"] = getNavigationBarHeight()
+        constants["STATUS_BAR_HEIGHT"] = getStatusBarHeightData()
+        constants["NAVIGATION_BAR_HEIGHT"] = getNavigationBarHeightData()
 
-        val screenSize = getScreenSizeMap()
-        constants["DIMENSION_SCREEN_WIDTH"] = screenSize.getInt("width")
-        constants["DIMENSION_SCREEN_HEIGHT"] = screenSize.getInt("height")
+        val screenSize = getScreenSizeData()
+        constants["SCREEN_WIDTH"] = screenSize.width
+        constants["SCREEN_HEIGHT"] = screenSize.height
 
-        val safeArea = getSafeAreaMap()
-        constants["DIMENSION_SAFE_AREA_TOP"] = safeArea.getInt("top")
-        constants["DIMENSION_SAFE_AREA_RIGHT"] = safeArea.getInt("right")
-        constants["DIMENSION_SAFE_AREA_BOTTOM"] = safeArea.getInt("bottom")
-        constants["DIMENSION_SAFE_AREA_LEFT"] = safeArea.getInt("left")
+        val safeArea = getSafeAreaData()
+        constants["SAFE_AREA_TOP"] = safeArea.top
+        constants["SAFE_AREA_RIGHT"] = safeArea.right
+        constants["SAFE_AREA_BOTTOM"] = safeArea.bottom
+        constants["SAFE_AREA_LEFT"] = safeArea.left
 
         return constants
 
     }
 
     @ReactMethod
-    fun getStatusBarHeight(promise: Promise) {
+    fun init(promise: Promise) {
+
+        lateinit var waitActivity: () -> Unit
+
+        val handler = fun (activity: Activity?) {
+            val listener = OnApplyWindowInsetsListener { _, insets ->
+
+                val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+                val cutoutInsets = insets.getInsets(WindowInsetsCompat.Type.displayCutout())
+
+                var isChange = false
+
+                if (statusBarHeight != systemBarInsets.top) {
+                    statusBarHeight = systemBarInsets.top
+                    isChange = true
+                }
+                if (navigationBarHeight != systemBarInsets.bottom) {
+                    navigationBarHeight = systemBarInsets.bottom
+                    isChange = true
+                }
+                if (cutoutTop != cutoutInsets.top) {
+                    cutoutTop = cutoutInsets.top
+                    isChange = true
+                }
+                if (cutoutRight != cutoutInsets.right) {
+                    cutoutRight = cutoutInsets.right
+                    isChange = true
+                }
+                if (cutoutBottom != cutoutInsets.bottom) {
+                    cutoutBottom = cutoutInsets.bottom
+                    isChange = true
+                }
+                if (cutoutLeft != cutoutInsets.left) {
+                    cutoutLeft = cutoutInsets.left
+                    isChange = true
+                }
+
+                if (isChange) {
+                    val screenSizeData = getScreenSizeData()
+                    val screenSizeMap = Arguments.createMap()
+                    screenSizeMap.putInt("width", screenSizeData.width)
+                    screenSizeMap.putInt("height", screenSizeData.height)
+
+                    val safeAreaData = getSafeAreaData()
+                    val safeAreaMap = Arguments.createMap()
+                    safeAreaMap.putInt("top", safeAreaData.top)
+                    safeAreaMap.putInt("right", safeAreaData.right)
+                    safeAreaMap.putInt("bottom", safeAreaData.bottom)
+                    safeAreaMap.putInt("left", safeAreaData.left)
+
+                    val map = Arguments.createMap()
+                    map.putInt("statusBarHeight", getStatusBarHeightData())
+                    map.putInt("navigationBarHeight", getNavigationBarHeightData())
+                    map.putMap("screenSize", screenSizeMap)
+                    map.putMap("safeArea", safeAreaMap)
+
+                    sendEvent("change", map)
+                }
+
+                insets
+            }
+            if (activity != null) {
+                activity.runOnUiThread {
+                    val decorView = activity.window.decorView
+                    ViewCompat.setOnApplyWindowInsetsListener(decorView, listener)
+                    decorView.requestApplyInsets()
+
+                    val map = Arguments.createMap()
+                    promise.resolve(map)
+                }
+            } else {
+                waitActivity()
+            }
+        }
 
-        val map = Arguments.createMap()
-        map.putInt("height", getStatusBarHeight())
+        waitActivity = fun () {
+            Handler(Looper.getMainLooper()).postDelayed({
+                handler(currentActivity)
+            }, 200)
+        }
 
-        promise.resolve(map)
+        handler(currentActivity)
 
     }
 
-    private fun getStatusBarHeight(): Int {
+    @ReactMethod
+    fun getStatusBarHeight(promise: Promise) {
 
-        val resources = reactApplicationContext.resources
-        val resId = resources.getIdentifier("status_bar_height", "dimen", "android")
+        val map = Arguments.createMap()
+        map.putInt("height", getStatusBarHeightData())
 
-        return if (resId > 0) {
-            (resources.getDimensionPixelSize(resId) / density).toInt()
-        }
-        else {
-            0
-        }
+        promise.resolve(map)
 
     }
 
@@ -69,109 +153,81 @@ class RNTDimensionModule(private val reactContext: ReactApplicationContext) : Re
     fun getNavigationBarHeight(promise: Promise) {
 
         val map = Arguments.createMap()
-        map.putInt("height", getNavigationBarHeight())
+        map.putInt("height", getNavigationBarHeightData())
 
         promise.resolve(map)
 
     }
 
-    private fun getNavigationBarHeight(): Int {
-
-        val window = currentActivity?.window ?: return 0
-
-        // getScreenSize() 方法在某些手机上返回的是内容区域的尺寸
-        // 导致这里返回的是 navigation bar + status bar 的高度
-        // 因此我们改变思路，获取内容区域的位置信息，这样就能求出真实的 navigation bar 的高度了
-
-        val realScreenSize = getRealScreenSize()
-
-        val rect = Rect()
-
-        window.decorView.getWindowVisibleDisplayFrame(rect)
-
-        return ((realScreenSize.y - rect.bottom) / density).toInt()
-
-    }
-
     @ReactMethod
     fun getScreenSize(promise: Promise) {
 
-        promise.resolve(getScreenSizeMap())
-
-    }
-
-    private fun getScreenSizeMap(): WritableMap {
-
-        // 跟 ios 保持一致，获取的是物理屏尺寸
-        val screenSize = getRealScreenSize()
-
         val map = Arguments.createMap()
-        map.putInt("width", (screenSize.x / density).toInt())
-        map.putInt("height", (screenSize.y / density).toInt())
+        val data = getScreenSizeData()
 
-        return map
+        map.putInt("width", data.width)
+        map.putInt("height", data.height)
+
+        promise.resolve(map)
 
     }
 
     @ReactMethod
     fun getSafeArea(promise: Promise) {
 
-        promise.resolve(getSafeAreaMap())
-
-    }
-
-    private fun getSafeAreaMap(): WritableMap {
-
         val map = Arguments.createMap()
-        map.putInt("top", getStatusBarHeight())
-        map.putInt("right", 0)
-        map.putInt("bottom", 0)
-        map.putInt("left", 0)
-
-        // P 之前的版本都是厂商私有实现，懒得折腾了
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
-            currentActivity?.window.decorView.rootWindowInsets?.displayCutout?.let {
-                map.putInt("top", (it.safeInsetTop / density).toInt())
-                map.putInt("right", (it.safeInsetRight / density).toInt())
-                map.putInt("bottom", (it.safeInsetBottom / density).toInt())
-                map.putInt("left", (it.safeInsetLeft / density).toInt())
-            }
-        }
-
-        return map
+        val data = getSafeAreaData()
 
-    }
+        map.putInt("top", data.top)
+        map.putInt("right", data.right)
+        map.putInt("bottom", data.bottom)
+        map.putInt("left", data.left)
 
-    private fun getScreenSize(): Point {
-
-        val display = (reactContext.getSystemService(WINDOW_SERVICE) as WindowManager).defaultDisplay
-        val size = Point()
-
-        display.getSize(size)
+        promise.resolve(map)
 
-        return size
+    }
 
+    private fun getScreenSizeData(): Size {
+        // 跟 ios 保持一致，获取的是物理屏尺寸
+        var screenWidth = 0
+        var screenHeight = 0
+
+        val windowManager = reactContext.getSystemService(WindowManager::class.java)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            // Android 11+
+            val windowMetrics = windowManager.currentWindowMetrics
+            screenWidth = windowMetrics.bounds.width()   // 屏幕总宽度（像素）
+            screenHeight = windowMetrics.bounds.height() // 屏幕总高度（像素）
+        } else {
+            // 旧版本兼容方案（Android 5.0~10）
+            val point = Point()
+            windowManager.defaultDisplay.getRealSize(point)
+            screenWidth = point.x
+            screenHeight = point.y
+        }
+        return Size(toReactUnit(screenWidth), toReactUnit(screenHeight))
     }
 
-    private fun getRealScreenSize(): Point {
+    private fun getStatusBarHeightData(): Int {
+        return toReactUnit(statusBarHeight)
+    }
 
-        val display = (reactContext.getSystemService(WINDOW_SERVICE) as WindowManager).defaultDisplay
-        val size = Point()
+    private fun getNavigationBarHeightData(): Int {
+        return toReactUnit(navigationBarHeight)
+    }
 
-        // Android 4.2
-        if (Build.VERSION.SDK_INT >= 17) {
-            display.getRealSize(size)
-        }
-        else if (Build.VERSION.SDK_INT >= 14) {
-            try {
-                size.x = Display::class.java.getMethod("getRawWidth").invoke(display) as Int
-                size.y = Display::class.java.getMethod("getRawHeight").invoke(display) as Int
-            } catch (e: Exception) {
-            }
-        }
+    private fun getSafeAreaData(): Rect {
+        return Rect(toReactUnit(cutoutLeft), toReactUnit(statusBarHeight), toReactUnit(cutoutRight), toReactUnit(cutoutBottom))
+    }
 
-        return size
+    private fun toReactUnit(value: Int): Int {
+        return (value / density).toInt()
+    }
 
+    private fun sendEvent(eventName: String, params: WritableMap) {
+        reactContext
+            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+            .emit(eventName, params)
     }
 
-}
+}

package/index.js

@@ -1,22 +1,28 @@
 
-import { NativeModules } from 'react-native'
+import { NativeEventEmitter, NativeModules } from 'react-native'
 
 const { RNTDimension } = NativeModules
 
-export const statusBarHeight = RNTDimension.DIMENSION_STATUS_BAR_HEIGHT
+const eventEmitter = new NativeEventEmitter(RNTDimension)
 
-export const navigationBarHeight = RNTDimension.DIMENSION_NAVIGATION_BAR_HEIGHT
+export const statusBarHeight = RNTDimension.STATUS_BAR_HEIGHT
+
+export const navigationBarHeight = RNTDimension.NAVIGATION_BAR_HEIGHT
 
 export const screenSize = {
-  width: RNTDimension.DIMENSION_SCREEN_WIDTH,
-  height: RNTDimension.DIMENSION_SCREEN_HEIGHT,
+  width: RNTDimension.SCREEN_WIDTH,
+  height: RNTDimension.SCREEN_HEIGHT,
 }
 
 export const safeArea = {
-  top: RNTDimension.DIMENSION_SAFE_AREA_TOP,
-  right: RNTDimension.DIMENSION_SAFE_AREA_RIGHT,
-  bottom: RNTDimension.DIMENSION_SAFE_AREA_BOTTOM,
-  left: RNTDimension.DIMENSION_SAFE_AREA_LEFT,
+  top: RNTDimension.SAFE_AREA_TOP,
+  right: RNTDimension.SAFE_AREA_RIGHT,
+  bottom: RNTDimension.SAFE_AREA_BOTTOM,
+  left: RNTDimension.SAFE_AREA_LEFT,
+}
+
+export function init() {
+  return RNTDimension.init()
 }
 
 export function getStatusBarHeight() {
@@ -33,4 +39,8 @@ export function getScreenSize() {
 
 export function getSafeArea() {
   return RNTDimension.getSafeArea()
-}
+}
+
+export function addListener(type, listener) {
+  return eventEmitter.addListener(type, listener)
+}

package/ios/RNTDimension/RNTDimension.m

@@ -1,14 +1,16 @@
 #import "RNTDimension.h"
 
-CGFloat getStatusBarHeight() {
+@implementation RNTDimension
+
+static CGFloat getStatusBarHeight() {
     return UIApplication.sharedApplication.statusBarFrame.size.height;
 }
 
-CGFloat getNavigationBarHeight() {
+static CGFloat getNavigationBarHeight() {
     return 0;
 }
 
-NSDictionary* getScreenSize() {
+static NSDictionary* getScreenSize() {
 
     CGRect bounds = UIScreen.mainScreen.bounds;
 
@@ -19,7 +21,7 @@ NSDictionary* getScreenSize() {
 
 }
 
-NSDictionary* getSafeArea() {
+static NSDictionary* getSafeArea() {
 
     if (@available(iOS 11.0, *)) {
         UIWindow* window = [[UIApplication sharedApplication] keyWindow];
@@ -41,8 +43,6 @@ NSDictionary* getSafeArea() {
 
 }
 
-@implementation RNTDimension
-
 + (BOOL)requiresMainQueueSetup {
     return YES;
 }
@@ -55,19 +55,23 @@ NSDictionary* getSafeArea() {
     NSDictionary *screenSize = getScreenSize();
     NSDictionary *safeArea = getSafeArea();
     return @{
-        @"DIMENSION_STATUS_BAR_HEIGHT": @(getStatusBarHeight()),
-        @"DIMENSION_NAVIGATION_BAR_HEIGHT": @(getNavigationBarHeight()),
-        @"DIMENSION_SCREEN_WIDTH": screenSize[@"width"],
-        @"DIMENSION_SCREEN_HEIGHT": screenSize[@"height"],
-        @"DIMENSION_SAFE_AREA_TOP": safeArea[@"top"],
-        @"DIMENSION_SAFE_AREA_RIGHT": safeArea[@"right"],
-        @"DIMENSION_SAFE_AREA_BOTTOM": safeArea[@"bottom"],
-        @"DIMENSION_SAFE_AREA_LEFT": safeArea[@"left"],
+        @"STATUS_BAR_HEIGHT": @(getStatusBarHeight()),
+        @"NAVIGATION_BAR_HEIGHT": @(getNavigationBarHeight()),
+        @"SCREEN_WIDTH": screenSize[@"width"],
+        @"SCREEN_HEIGHT": screenSize[@"height"],
+        @"SAFE_AREA_TOP": safeArea[@"top"],
+        @"SAFE_AREA_RIGHT": safeArea[@"right"],
+        @"SAFE_AREA_BOTTOM": safeArea[@"bottom"],
+        @"SAFE_AREA_LEFT": safeArea[@"left"],
      };
 }
 
 RCT_EXPORT_MODULE(RNTDimension);
 
+RCT_EXPORT_METHOD(init:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
+    resolve(@{});
+}
+
 RCT_EXPORT_METHOD(getStatusBarHeight:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
 
     resolve(@{
@@ -96,4 +100,4 @@ RCT_EXPORT_METHOD(getSafeArea:(RCTPromiseResolveBlock)resolve reject:(RCTPromise
 
 }
 
-@end
+@end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-hero/dimension",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "react native dimension",
   "main": "index.js",
   "scripts": {