react-native-unistyles 2.8.0-beta.1 → 2.8.0-beta.3

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

@@ -4,44 +4,45 @@ import android.content.BroadcastReceiver
 import android.content.Context
 import android.content.Intent
 import android.content.IntentFilter
+import android.content.res.Configuration
 import android.graphics.Color
 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 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
 
 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 lateinit var platform: Platform
-    private val layoutListener = ViewTreeObserver.OnGlobalLayoutListener {
-        if (this.isCxxReady) {
-            runnable?.let { drawHandler.removeCallbacks(it) }
-
-            runnable = Runnable {
-                this@UnistylesModule.onLayoutConfigChange()
-            }.also {
-                drawHandler.postDelayed(it, debounceDuration)
-            }
-        }
-    }
 
     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)
             }
+
+            val newConfig = context.resources.configuration
+
+            if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {
+                this@UnistylesModule.onLayoutConfigChange()
+            }
+
+            if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+                this@UnistylesModule.onLayoutConfigChange()
+            }
         }
     }
 
@@ -56,21 +57,8 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
         reactApplicationContext.addLifecycleEventListener(this)
     }
 
-    private fun setupLayoutListener() {
-        val activity = currentActivity ?: return
-        activity.window.decorView.rootView.viewTreeObserver.addOnGlobalLayoutListener(layoutListener)
-    }
-
-    private fun stopLayoutListener() {
-        val activity = currentActivity ?: return
-        activity.window.decorView.rootView.viewTreeObserver.removeOnGlobalLayoutListener(layoutListener)
-    }
-
-    @Deprecated("Deprecated in Java")
-    override fun onCatalystInstanceDestroy() {
-        this.stopLayoutListener()
+    override fun invalidate() {
         reactApplicationContext.unregisterReceiver(configurationChangeReceiver)
-        runnable?.let { drawHandler.removeCallbacks(it) }
         reactApplicationContext.removeLifecycleEventListener(this)
 
         if (this.isCxxReady) {
@@ -81,36 +69,27 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
     //endregion
     //region Event handlers
     private fun onConfigChange() {
-        if (!platform.hasNewConfig()) {
-            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()) {
-            return
-        }
-
-        val config = platform.getLayoutConfig()
+        val screen = this.getScreenDimensions()
+        val insets = this.getInsets()
+        val statusBar = this.getStatusBarDimensions()
+        val navigationBar = this.getNavigationBarDimensions()
 
         reactApplicationContext.runOnJSQueueThread {
             this.nativeOnOrientationChange(
-                config.screen,
-                config.insets,
-                config.statusBar,
-                config.navigationBar
+                screen,
+                insets,
+                statusBar,
+                navigationBar
             )
         }
     }
@@ -123,25 +102,17 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
             System.loadLibrary("unistyles")
 
             this.platform = Platform(reactApplicationContext)
+            this.enableEdgeToEdge()
 
-            val config = platform.getConfig()
-            val layoutConfig = platform.getLayoutConfig()
-
-            this.reactApplicationContext.javaScriptContextHolder?.let {
-                this.nativeInstall(
-                    it.get(),
-                    layoutConfig.screen,
-                    config.colorScheme,
-                    config.contentSizeCategory,
-                    layoutConfig.insets,
-                    layoutConfig.statusBar,
-                    layoutConfig.navigationBar
-                )
-                this.isCxxReady = 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!")
+                    Log.i(NAME, "Installed Unistyles \uD83E\uDD84!")
 
-                return true
+                    return true
+                }
             }
 
             false
@@ -152,88 +123,36 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
         }
     }
 
-    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 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)
-                })
-            })
-        }
 
-        reactApplicationContext
-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("__unistylesOnChange", body)
+    private fun getScreenDimensions(): Dimensions {
+        return platform.getScreenDimensions()
     }
 
-    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)
+    private fun getColorScheme(): String {
+        return platform.getColorScheme()
     }
 
-    private fun onPluginChange() {
-        val body = Arguments.createMap().apply {
-            putString("type", "plugin")
-        }
+    private fun getStatusBarDimensions(): Dimensions {
+        return platform.getStatusBarDimensions()
+    }
 
-        reactApplicationContext
-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("__unistylesOnChange", body)
+    private fun getNavigationBarDimensions(): Dimensions {
+        return platform.getNavigationBarDimensions()
     }
 
-    private fun onContentSizeCategoryChange(contentSizeCategory: String) {
-        val body = Arguments.createMap().apply {
-            putString("type", "dynamicTypeSize")
-            putMap("payload", Arguments.createMap().apply {
-                putString("contentSizeCategory", contentSizeCategory)
-            })
-        }
+    private fun getContentSizeCategory(): String {
+        return platform.getContentSizeCategory()
+    }
 
-        reactApplicationContext
-            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-            .emit("__unistylesOnChange", body)
+    private fun getInsets(): Insets {
+        return platform.getInsets()
     }
 
     private fun onSetNavigationBarColor(color: String) {
@@ -268,6 +187,14 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
         }
     }
 
+    private fun enableEdgeToEdge() {
+        this.reactApplicationContext.currentActivity?.let { activity ->
+            activity.runOnUiThread {
+                WindowCompat.setDecorFitsSystemWindows(activity.window, false)
+            }
+        }
+    }
+
     @ReactMethod
     fun addListener(eventName: String?) = Unit
 
@@ -278,11 +205,29 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
             this.onConfigChange()
         }
 
-        this.setupLayoutListener()
+        this.reactApplicationContext.currentActivity?.let { activity ->
+            activity.findViewById<View>(android.R.id.content)?.let { mainView ->
+                activity.window?.decorView?.let { decorView ->
+                    ViewCompat.setOnApplyWindowInsetsListener(mainView) { _, insets ->
+                        this.platform.setInsetsCompat(insets, decorView)
+
+                        if (this.isCxxReady) {
+                            this.onLayoutConfigChange()
+                        }
+
+                        insets
+                    }
+                }
+            }
+        }
     }
 
     override fun onHostPause() {
-        this.stopLayoutListener()
+        this.reactApplicationContext.currentActivity?.let { activity ->
+            activity.window?.decorView?.let { view ->
+                ViewCompat.setOnApplyWindowInsetsListener(view, null)
+            }
+        }
     }
 
     override fun onHostDestroy() {}

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)

package/cxx/UnistylesImpl.cpp

@@ -0,0 +1,241 @@
+#include "UnistylesRuntime.h"
+#include <jsi/jsi.h>
+
+using namespace facebook;
+
+jsi::Value UnistylesRuntime::getScreenWidth(jsi::Runtime& rt, std::string fnName) {
+    return jsi::Value(this->screen.width);
+}
+
+jsi::Value UnistylesRuntime::getScreenHeight(jsi::Runtime& rt, std::string fnName) {
+    return jsi::Value(this->screen.height);
+}
+
+jsi::Value UnistylesRuntime::getContentSizeCategory(jsi::Runtime & rt, std::string fnName) {
+    return jsi::Value(jsi::String::createFromUtf8(rt, this->contentSizeCategory));
+}
+
+jsi::Value UnistylesRuntime::hasEnabledAdaptiveThemes(jsi::Runtime& rt, std::string fnName) {
+    return jsi::Value(this->hasAdaptiveThemes);
+}
+
+jsi::Value UnistylesRuntime::getThemeName(jsi::Runtime& rt, std::string fnName) {
+    return !this->themeName.empty()
+        ? jsi::Value(jsi::String::createFromUtf8(rt, this->themeName))
+        : this->getThemeOrFail(rt);
+}
+
+jsi::Value UnistylesRuntime::getCurrentBreakpoint(jsi::Runtime& rt, std::string fnName) {
+    return !this->breakpoint.empty()
+        ? jsi::Value(jsi::String::createFromUtf8(rt, this->breakpoint))
+        : jsi::Value::undefined();
+}
+
+jsi::Value UnistylesRuntime::getColorScheme(jsi::Runtime& rt, std::string fnName) {
+    return jsi::Value(jsi::String::createFromUtf8(rt, this->colorScheme));
+}
+
+jsi::Value UnistylesRuntime::getSortedBreakpointPairs(jsi::Runtime& rt, std::string fnName) {
+    std::unique_ptr<jsi::Array> sortedBreakpointEntriesArray = std::make_unique<jsi::Array>(rt, this->sortedBreakpointPairs.size());
+
+    for (size_t i = 0; i < this->sortedBreakpointPairs.size(); ++i) {
+        std::unique_ptr<jsi::Array> pairArray = std::make_unique<jsi::Array>(rt, 2);
+        jsi::String nameValue = jsi::String::createFromUtf8(rt, this->sortedBreakpointPairs[i].first);
+
+        pairArray->setValueAtIndex(rt, 0, nameValue);
+        pairArray->setValueAtIndex(rt, 1, jsi::Value(this->sortedBreakpointPairs[i].second));
+        sortedBreakpointEntriesArray->setValueAtIndex(rt, i, *pairArray);
+    }
+
+    return jsi::Value(rt, *sortedBreakpointEntriesArray);
+}
+
+jsi::Value UnistylesRuntime::setBreakpoints(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        jsi::Object breakpointsObj = arguments[0].asObject(rt);
+        auto sortedBreakpoints = this->toSortedBreakpointPairs(rt, breakpointsObj);
+
+        if (sortedBreakpoints.size() == 0) {
+            throw jsi::JSError(rt, UnistylesErrorBreakpointsCannotBeEmpty);
+        }
+
+        if (sortedBreakpoints.at(0).second != 0) {
+            throw jsi::JSError(rt, UnistylesErrorBreakpointsMustStartFromZero);
+        }
+
+        this->sortedBreakpointPairs = sortedBreakpoints;
+
+        std::string breakpoint = this->getBreakpointFromScreenWidth(this->screen.width, sortedBreakpoints);
+
+        this->breakpoint = breakpoint;
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::setActiveTheme(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        std::string themeName = arguments[0].asString(rt).utf8(rt);
+
+        if (this->themeName != themeName) {
+            this->themeName = themeName;
+            this->onThemeChange(themeName);
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::updateTheme(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        std::string themeName = arguments[0].asString(rt).utf8(rt);
+
+        if (this->themeName == themeName) {
+            this->onThemeChange(themeName);
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::useAdaptiveThemes(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        bool enableAdaptiveThemes = arguments[0].asBool();
+
+        if (enableAdaptiveThemes && this->colorScheme == UnistylesUnspecifiedScheme) {
+            throw jsi::JSError(rt, UnistylesErrorAdaptiveThemesNotSupported);
+        }
+
+        this->hasAdaptiveThemes = enableAdaptiveThemes;
+
+        if (!enableAdaptiveThemes || !this->supportsAutomaticColorScheme) {
+            return jsi::Value::undefined();
+        }
+
+        if (this->themeName != this->colorScheme) {
+            this->themeName = this->colorScheme;
+            this->onThemeChange(this->themeName);
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::addPlugin(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        std::string pluginName = arguments[0].asString(rt).utf8(rt);
+        bool notify = arguments[1].asBool();
+
+        this->pluginNames.push_back(pluginName);
+
+        // registry enabled plugins won't notify listeners
+        if (notify) {
+            this->onPluginChange();
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::removePlugin(jsi::Runtime& rt, std::string fnName) {
+    return HOST_FN(fnName, 1, {
+        std::string pluginName = arguments[0].asString(rt).utf8(rt);
+
+        auto it = std::find(this->pluginNames.begin(), this->pluginNames.end(), pluginName);
+
+        if (it != this->pluginNames.end()) {
+            this->pluginNames.erase(it);
+            this->onPluginChange();
+        }
+
+        return jsi::Value::undefined();
+    });
+}
+
+jsi::Value UnistylesRuntime::getEnabledPlugins(jsi::Runtime& rt, std::string fnName) {
+    auto jsiArray = facebook::jsi::Array(rt, this->pluginNames.size());
+
+    for (size_t i = 0; i < this->pluginNames.size(); i++) {
+        jsiArray.setValueAtIndex(rt, i, facebook::jsi::String::createFromUtf8(rt, this->pluginNames[i]));
+    }
+
+    return jsiArray;
+}
+
+jsi::Value UnistylesRuntime::getInsets(jsi::Runtime& rt, std::string fnName) {
+    auto insets = jsi::Object(rt);
+
+    insets.setProperty(rt, "top", this->insets.top);
+    insets.setProperty(rt, "bottom", this->insets.bottom);
+    insets.setProperty(rt, "left", this->insets.left);
+    insets.setProperty(rt, "right", this->insets.right);
+
+    return insets;
+}
+
+jsi::Value UnistylesRuntime::getStatusBar(jsi::Runtime& rt, std::string fnName) {
+    auto statusBar = jsi::Object(rt);
+    auto setStatusBarColorFunction = HOST_FN("setColor", 1, {
+        std::string color = arguments[0].asString(rt).utf8(rt);
+
+        if (this->setStatusBarColor.has_value()) {
+            this->setStatusBarColor.value()(color);
+        }
+
+        return jsi::Value::undefined();
+    });
+
+    statusBar.setProperty(rt, "width", this->statusBar.width);
+    statusBar.setProperty(rt, "height", this->statusBar.height);
+    statusBar.setProperty(rt, "setColor", setStatusBarColorFunction);
+
+    return statusBar;
+}
+
+jsi::Value UnistylesRuntime::getNavigationBar(jsi::Runtime& rt, std::string fnName) {
+    auto navigationBarValue = jsi::Object(rt);
+    auto setNavigationBarColorFunction = HOST_FN("setColor", 1, {
+        std::string color = arguments[0].asString(rt).utf8(rt);
+
+        if (this->setNavigationBarColor.has_value()) {
+            this->setNavigationBarColor.value()(color);
+        }
+
+        return jsi::Value::undefined();
+    });
+
+    navigationBarValue.setProperty(rt, "width", this->navigationBar.width);
+    navigationBarValue.setProperty(rt, "height", this->navigationBar.height);
+    navigationBarValue.setProperty(rt, "setColor", setNavigationBarColorFunction);
+
+    return navigationBarValue;
+}
+
+std::optional<jsi::Value> UnistylesRuntime::setThemes(jsi::Runtime& rt, const jsi::Value& value) {
+    jsi::Array themes = value.asObject(rt).asArray(rt);
+    std::vector<std::string> themesVector;
+    size_t length = themes.size(rt);
+
+    for (size_t i = 0; i < length; ++i) {
+        jsi::Value element = themes.getValueAtIndex(rt, i);
+
+        if (element.isString()) {
+            std::string theme = element.asString(rt).utf8(rt);
+            themesVector.push_back(theme);
+        }
+    }
+
+    if (themesVector.size() == 0) {
+        throw jsi::JSError(rt, UnistylesErrorThemesCannotBeEmpty);
+    }
+
+    this->themes = themesVector;
+    this->themeName = "";
+
+    bool hasLightTheme = std::find(themesVector.begin(), themesVector.end(), "light") != themesVector.end();
+    bool hasDarkTheme = std::find(themesVector.begin(), themesVector.end(), "dark") != themesVector.end();
+
+    this->supportsAutomaticColorScheme = hasLightTheme && hasDarkTheme;
+
+    return std::nullopt;
+}