react-native-unistyles 2.4.0-rc.2 → 2.4.1

package/android/src/main/java/com/unistyles/UnistylesModule.kt

@@ -4,42 +4,45 @@ import android.content.BroadcastReceiver
 import android.content.Context
 import android.content.Intent
 import android.content.IntentFilter
+import android.os.Build
 import android.os.Handler
 import android.os.Looper
 import android.util.Log
-import android.view.ViewTreeObserver
-import com.facebook.react.bridge.Arguments
+import android.view.View
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsAnimationCompat
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
-import com.facebook.react.modules.core.DeviceEventManagerModule
+import com.facebook.react.turbomodule.core.interfaces.CallInvokerHolder
+import kotlin.math.roundToInt
 
 class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext), LifecycleEventListener {
-    private val drawHandler = Handler(Looper.getMainLooper())
-    private val debounceDuration = 250L
-    private var runnable: Runnable? = null
-
     private var isCxxReady: Boolean = false
-    private val platform: Platform = Platform(reactContext)
-    private val layoutListener = ViewTreeObserver.OnGlobalLayoutListener {
-        if (this.isCxxReady) {
-            runnable?.let { drawHandler.removeCallbacks(it) }
-
-            runnable = Runnable {
-                this@UnistylesModule.onLayoutConfigChange()
-            }.also {
-                drawHandler.postDelayed(it, debounceDuration)
-            }
-        }
-    }
+    private var platform: Platform = Platform(reactContext)
+    private var _shouldListenToImeEvents = false
 
     private val configurationChangeReceiver = object : BroadcastReceiver() {
         override fun onReceive(context: Context, intent: Intent) {
-            if (intent.action == Intent.ACTION_CONFIGURATION_CHANGED && this@UnistylesModule.isCxxReady) {
+            if (!this@UnistylesModule.isCxxReady) {
+                return
+            }
+
+            if (intent.action == Intent.ACTION_CONFIGURATION_CHANGED) {
                 Handler(Looper.getMainLooper()).postDelayed({
                     this@UnistylesModule.onConfigChange()
-                }, 10)
+                }, 25)
+            }
+
+            val newConfig = context.resources.configuration
+
+            if (newConfig.orientation != platform.orientation) {
+                platform.orientation = newConfig.orientation
+
+                this@UnistylesModule.onLayoutConfigChange()
             }
         }
     }
@@ -49,192 +52,181 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
         const val NAME = "Unistyles"
     }
 
-    //region Lifecycle
     init {
         reactApplicationContext.registerReceiver(configurationChangeReceiver, IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED))
+        reactApplicationContext.addLifecycleEventListener(this)
     }
 
-    private fun setupLayoutListener() {
-        val activity = currentActivity ?: return
-        activity.window.decorView.rootView.viewTreeObserver.addOnGlobalLayoutListener(layoutListener)
-    }
-
-    @Deprecated("Deprecated in Java")
-    override fun onCatalystInstanceDestroy() {
-        val activity = currentActivity ?: return
-
-        activity.window.decorView.rootView.viewTreeObserver.removeOnGlobalLayoutListener(layoutListener)
+    override fun invalidate() {
         reactApplicationContext.unregisterReceiver(configurationChangeReceiver)
-        runnable?.let { drawHandler.removeCallbacks(it) }
-        this.nativeDestroy()
+        reactApplicationContext.removeLifecycleEventListener(this)
+
+        if (this.isCxxReady) {
+            this.nativeDestroy()
+        }
     }
 
-    //endregion
-    //region Event handlers
     private fun onConfigChange() {
-        if (!platform.hasNewConfig()) {
+        if (!this.isCxxReady) {
             return
         }
 
-        val config = platform.getConfig()
+        val colorScheme = this.platform.getColorScheme()
+        val contentSizeCategory = this.platform.getContentSizeCategory()
 
         reactApplicationContext.runOnJSQueueThread {
-            if (config.hasNewColorScheme) {
-                this.nativeOnAppearanceChange(config.colorScheme)
-            }
-
-            if (config.hasNewContentSizeCategory) {
-                this.nativeOnContentSizeCategoryChange(config.contentSizeCategory)
-            }
+            this.nativeOnAppearanceChange(colorScheme)
+            this.nativeOnContentSizeCategoryChange(contentSizeCategory)
         }
     }
 
     private fun onLayoutConfigChange() {
-        if (!platform.hasNewLayoutConfig()) {
+        if (!this.isCxxReady) {
             return
         }
 
-        val config = platform.getLayoutConfig()
+        val screen = this.platform.getScreenDimensions()
+        val insets = this.platform.getInsets()
+        val statusBar = this.platform.getStatusBarDimensions()
+        val navigationBar = this.platform.getNavigationBarDimensions()
 
         reactApplicationContext.runOnJSQueueThread {
             this.nativeOnOrientationChange(
-                config.screen,
-                config.insets,
-                config.statusBar,
-                config.navigationBar
+                screen,
+                insets,
+                statusBar,
+                navigationBar
             )
         }
     }
 
-    //endregion
-    //region Core
     @ReactMethod(isBlockingSynchronousMethod = true)
     fun install(): Boolean {
         return try {
             System.loadLibrary("unistyles")
-            val config = platform.getConfig()
-            val layoutConfig = platform.getLayoutConfig()
-
-            this.setupLayoutListener()
-            this.reactApplicationContext.javaScriptContextHolder?.let {
-                this.nativeInstall(
-                    it.get(),
-                    layoutConfig.screen,
-                    config.colorScheme,
-                    config.contentSizeCategory,
-                    layoutConfig.insets,
-                    layoutConfig.statusBar,
-                    layoutConfig.navigationBar
-                )
-                this.isCxxReady = true
-
-                Log.i(NAME, "Installed Unistyles \uD83E\uDD84!")
-
-                return true
+
+            this.reactApplicationContext.javaScriptContextHolder?.let { contextHolder ->
+                this.reactApplicationContext.catalystInstance.jsCallInvokerHolder?.let { callInvokerHolder: CallInvokerHolder ->
+                    this.nativeInstall(contextHolder.get(), callInvokerHolder)
+                    this.isCxxReady = true
+
+                    Log.i(NAME, "Installed Unistyles \uD83E\uDD84!")
+
+                    return true
+                }
             }
 
             false
         } catch (e: Exception) {
-            false
+            this.isCxxReady = false
+
+            return false
         }
     }
 
-    private external fun nativeInstall(
-        jsi: Long,
-        screen: Dimensions,
-        colorScheme: String,
-        contentSizeCategory: String,
-        insets: Insets,
-        statusBar: Dimensions,
-        navigationBar: Dimensions
-    )
+    private external fun nativeInstall(jsi: Long, callInvoker: CallInvokerHolder)
     private external fun nativeDestroy()
-    private external fun nativeOnOrientationChange(screen: Dimensions, insets: Insets, statusBar: Dimensions, navigationBar: Dimensions)
+    private external fun nativeOnOrientationChange(screen: Screen, insets: Insets, statusBar: Dimensions, navigationBar: Dimensions)
     private external fun nativeOnAppearanceChange(colorScheme: String)
     private external fun nativeOnContentSizeCategoryChange(contentSizeCategory: String)
 
-    //endregion
-    //region Event emitter
-    private fun onLayoutChange(breakpoint: String, orientation: String, screen: Dimensions, statusBar: Dimensions, insets: Insets, navigationBar: Dimensions) {
-        val body = Arguments.createMap().apply {
-            putString("type", "layout")
-            putMap("payload", Arguments.createMap().apply {
-                putString("breakpoint", breakpoint)
-                putString("orientation", orientation)
-                putMap("screen", Arguments.createMap().apply {
-                    putInt("width", screen.width)
-                    putInt("height", screen.height)
-                })
-                putMap("statusBar", Arguments.createMap().apply {
-                    putInt("width", statusBar.width)
-                    putInt("height", statusBar.height)
-                })
-                putMap("insets", Arguments.createMap().apply {
-                    putInt("top", insets.top)
-                    putInt("bottom", insets.bottom)
-                    putInt("left", insets.left)
-                    putInt("right", insets.right)
-                })
-                putMap("navigationBar", Arguments.createMap().apply {
-                    putInt("width", navigationBar.width)
-                    putInt("height", navigationBar.height)
-                })
-            })
+    private fun enableEdgeToEdge() {
+        this.reactApplicationContext.currentActivity?.let { activity ->
+            activity.runOnUiThread {
+                WindowCompat.setDecorFitsSystemWindows(activity.window, false)
+            }
         }
-
-        reactApplicationContext
-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("__unistylesOnChange", body)
     }
 
-    private fun onThemeChange(themeName: String) {
-        val body = Arguments.createMap().apply {
-            putString("type", "theme")
-            putMap("payload", Arguments.createMap().apply {
-                putString("themeName", themeName)
-            })
-        }
-
-        reactApplicationContext
-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("__unistylesOnChange", body)
-    }
+    @ReactMethod
+    fun addListener(eventName: String?) = Unit
 
-    private fun onPluginChange() {
-        val body = Arguments.createMap().apply {
-            putString("type", "plugin")
-        }
+    @ReactMethod
+    fun removeListeners(count: Double) = Unit
 
-        reactApplicationContext
-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("__unistylesOnChange", body)
-    }
+    override fun onHostResume() {
+        this.enableEdgeToEdge()
+        _shouldListenToImeEvents = true
 
-    private fun onContentSizeCategoryChange(contentSizeCategory: String) {
-        val body = Arguments.createMap().apply {
-            putString("type", "dynamicTypeSize")
-            putMap("payload", Arguments.createMap().apply {
-                putString("contentSizeCategory", contentSizeCategory)
-            })
+        if (isCxxReady) {
+            this.onConfigChange()
         }
 
-        reactApplicationContext
-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("__unistylesOnChange", body)
+        this.reactApplicationContext.currentActivity?.let { activity ->
+            activity.findViewById<View>(android.R.id.content)?.let { mainView ->
+                ViewCompat.setOnApplyWindowInsetsListener(mainView) { _, insets ->
+                    this.platform.setInsetsCompat(insets, activity.window, null)
+
+                    if (this.isCxxReady) {
+                        this.onLayoutConfigChange()
+                    }
+
+                    insets
+                }
+
+                if (platform.hasAnimatedInsets && Build.VERSION.SDK_INT >= 30) {
+                    ViewCompat.setWindowInsetsAnimationCallback(
+                        mainView,
+                        object : WindowInsetsAnimationCompat.Callback(DISPATCH_MODE_STOP) {
+                            var initialBottomInsets = 0
+                            var isGoingUp = false
+
+                            override fun onPrepare(animation: WindowInsetsAnimationCompat) {
+                                val insets = ViewCompat.getRootWindowInsets(mainView)
+                                val isKeyboardVisible = insets?.isVisible(WindowInsetsCompat.Type.ime()) ?: false
+
+                                if (!isKeyboardVisible) {
+                                    val density = reactApplicationContext.resources.displayMetrics.density
+
+                                    initialBottomInsets = (this@UnistylesModule.platform.getInsets().bottom * density).roundToInt()
+                                }
+
+                                isGoingUp = !isKeyboardVisible
+                            }
+
+                            override fun onProgress(
+                                insets: WindowInsetsCompat,
+                                runningAnimations: List<WindowInsetsAnimationCompat>
+                            ): WindowInsetsCompat {
+                                if (!_shouldListenToImeEvents) {
+                                    return insets
+                                }
+
+                                runningAnimations.firstOrNull()?.let { animation ->
+                                    val progress = animation.fraction
+                                    val nextBottomInset = if (isGoingUp) {
+                                        (initialBottomInsets - (progress * initialBottomInsets).roundToInt())
+                                    } else {
+                                        // enable this in Unistyles 3.0 to get real time bottom insets
+                                        // initialBottomInsets - (initialBottomInsets - (progress * initialBottomInsets).roundToInt())
+                                        initialBottomInsets
+                                    }
+
+                                    this@UnistylesModule.platform.setInsetsCompat(insets, activity.window, nextBottomInset)
+
+                                    if (!isGoingUp) {
+                                        this@UnistylesModule.onLayoutConfigChange()
+                                    }
+                                }
+
+                                return insets
+                            }
+                        }
+                    )
+                }
+            }
+        }
     }
 
-    @ReactMethod
-    fun addListener(eventName: String?) = Unit
+    override fun onHostPause() {
+        this.reactApplicationContext.currentActivity?.let { activity ->
+            activity.window?.decorView?.let { view ->
+                ViewCompat.setOnApplyWindowInsetsListener(view, null)
+            }
+        }
 
-    @ReactMethod
-    fun removeListeners(count: Double) = Unit
-    override fun onHostResume() {
-        this.onConfigChange()
-        this.onLayoutConfigChange()
+        _shouldListenToImeEvents = false
     }
 
-    override fun onHostPause() {}
-
     override fun onHostDestroy() {}
-    //endregion
 }

package/cxx/Macros.h

@@ -0,0 +1,11 @@
+#pragma once
+
+#define HOST_FN(name, args, fn_body) \
+    jsi::Function::createFromHostFunction(rt, \
+        jsi::PropNameID::forAscii(rt, name), \
+        args, \
+        [this, &fnName](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value \
+        fn_body \
+    ); \
+
+#define BIND_FN(fn) std::bind(&UnistylesRuntime::fn, this, std::placeholders::_1, std::placeholders::_2)