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

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

@@ -7,6 +7,7 @@ import android.content.IntentFilter
 import android.os.Handler
 import android.os.Looper
 import android.util.Log
+import android.view.ViewTreeObserver
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactApplicationContext
@@ -15,11 +16,27 @@ import com.facebook.react.bridge.ReactMethod
 import com.facebook.react.modules.core.DeviceEventManagerModule
 
 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 val configurationChangeReceiver = object : BroadcastReceiver() {
         override fun onReceive(context: Context, intent: Intent) {
-            if (intent.action == Intent.ACTION_CONFIGURATION_CHANGED) {
+            if (intent.action == Intent.ACTION_CONFIGURATION_CHANGED && this@UnistylesModule.isCxxReady) {
                 Handler(Looper.getMainLooper()).postDelayed({
                     this@UnistylesModule.onConfigChange()
                 }, 10)
@@ -37,51 +54,79 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
         reactApplicationContext.registerReceiver(configurationChangeReceiver, IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED))
     }
 
+    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)
         reactApplicationContext.unregisterReceiver(configurationChangeReceiver)
+        runnable?.let { drawHandler.removeCallbacks(it) }
         this.nativeDestroy()
     }
 
     //endregion
     //region Event handlers
-    @Suppress("UNCHECKED_CAST")
     private fun onConfigChange() {
+        if (!platform.hasNewConfig()) {
+            return
+        }
+
         val config = platform.getConfig()
 
+        reactApplicationContext.runOnJSQueueThread {
+            if (config.hasNewColorScheme) {
+                this.nativeOnAppearanceChange(config.colorScheme)
+            }
+
+            if (config.hasNewContentSizeCategory) {
+                this.nativeOnContentSizeCategoryChange(config.contentSizeCategory)
+            }
+        }
+    }
+
+    private fun onLayoutConfigChange() {
+        if (!platform.hasNewLayoutConfig()) {
+            return
+        }
+
+        val config = platform.getLayoutConfig()
+
         reactApplicationContext.runOnJSQueueThread {
             this.nativeOnOrientationChange(
-                config["width"] as Int,
-                config["height"] as Int,
-                config["insets"] as Map<String, Int>,
-                config["statusBar"] as Map<String, Int>
-            )
-            this.nativeOnAppearanceChange(
-                config["colorScheme"] as String
+                config.screen,
+                config.insets,
+                config.statusBar,
+                config.navigationBar
             )
-            this.nativeOnContentSizeCategoryChange(config["contentSizeCategory"] as String)
         }
     }
 
     //endregion
     //region Core
-    @Suppress("UNCHECKED_CAST")
     @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(),
-                    config["width"] as Int,
-                    config["height"] as Int,
-                    config["colorScheme"] as String,
-                    config["contentSizeCategory"] as String,
-                    config["insets"] as Map<String, Int>,
-                    config["statusBar"] as Map<String, Int>
+                    layoutConfig.screen,
+                    config.colorScheme,
+                    config.contentSizeCategory,
+                    layoutConfig.insets,
+                    layoutConfig.statusBar,
+                    layoutConfig.navigationBar
                 )
+                this.isCxxReady = true
 
                 Log.i(NAME, "Installed Unistyles \uD83E\uDD84!")
 
@@ -96,29 +141,43 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
 
     private external fun nativeInstall(
         jsi: Long,
-        width: Int,
-        height: Int,
+        screen: Dimensions,
         colorScheme: String,
         contentSizeCategory: String,
-        insets: Map<String, Int>,
-        statusBar: Map<String, Int>
+        insets: Insets,
+        statusBar: Dimensions,
+        navigationBar: Dimensions
     )
     private external fun nativeDestroy()
-    private external fun nativeOnOrientationChange(width: Int, height: Int, insets: Map<String, Int>, statusBar: Map<String, Int>)
+    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, width: Int, height: Int) {
+    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", width)
-                    putInt("height", height)
+                    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)
                 })
             })
         }
@@ -171,6 +230,7 @@ class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
     fun removeListeners(count: Double) = Unit
     override fun onHostResume() {
         this.onConfigChange()
+        this.onLayoutConfigChange()
     }
 
     override fun onHostPause() {}

package/cxx/UnistylesRuntime.cpp

@@ -27,6 +27,7 @@ std::vector<jsi::PropNameID> UnistylesRuntime::getPropertyNames(jsi::Runtime& ru
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("enabledPlugins")));
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("insets")));
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("statusBar")));
+    properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("navigationBar")));
 
     // setters
     properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("themes")));
@@ -38,17 +39,17 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
     std::string propName = propNameId.utf8(runtime);
 
     if (propName == "screenWidth") {
-        return jsi::Value(this->screenWidth);
+        return jsi::Value(this->screen.width);
     }
 
     if (propName == "screenHeight") {
-        return jsi::Value(this->screenHeight);
+        return jsi::Value(this->screen.height);
     }
 
     if (propName == "hasAdaptiveThemes") {
         return jsi::Value(this->hasAdaptiveThemes);
     }
-    
+
     if (propName == "contentSizeCategory") {
         return jsi::Value(jsi::String::createFromUtf8(runtime, this->contentSizeCategory));
     }
@@ -68,14 +69,14 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
     if (propName == "colorScheme") {
         return jsi::Value(jsi::String::createFromUtf8(runtime, this->colorScheme));
     }
-    
+
     if (propName == "enabledPlugins") {
         auto jsiArray = facebook::jsi::Array(runtime, this->pluginNames.size());
-        
+
         for (size_t i = 0; i < this->pluginNames.size(); i++) {
             jsiArray.setValueAtIndex(runtime, i, facebook::jsi::String::createFromUtf8(runtime, this->pluginNames[i]));
         }
-        
+
         return jsiArray;
     }
 
@@ -93,7 +94,7 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
 
         return jsi::Value(runtime, *sortedBreakpointEntriesArray);
     }
-    
+
     if (propName == "addPlugin") {
         return jsi::Function::createFromHostFunction(
             runtime,
@@ -102,19 +103,19 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
             [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
                 std::string pluginName = arguments[0].asString(runtime).utf8(runtime);
                 bool notify = arguments[1].asBool();
-                
+
                 this->pluginNames.push_back(pluginName);
-                
+
                 // registry enabled plugins won't notify listeners
                 if (notify) {
                     this->onPluginChangeCallback();
                 }
-                
+
                 return jsi::Value::undefined();
             }
         );
     }
-    
+
     if (propName == "removePlugin") {
         return jsi::Function::createFromHostFunction(
             runtime,
@@ -122,14 +123,14 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
             1,
             [this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
                 std::string pluginName = arguments[0].asString(runtime).utf8(runtime);
-                
+
                 auto it = std::find(this->pluginNames.begin(), this->pluginNames.end(), pluginName);
-                
+
                 if (it != this->pluginNames.end()) {
                     this->pluginNames.erase(it);
                     this->onPluginChangeCallback();
                 }
- 
+
                 return jsi::Value::undefined();
             }
         );
@@ -171,7 +172,7 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
 
                 this->sortedBreakpointPairs = sortedBreakpointEntriesVec;
 
-                std::string breakpoint = this->getBreakpointFromScreenWidth(this->screenWidth, sortedBreakpointEntriesVec);
+                std::string breakpoint = this->getBreakpointFromScreenWidth(this->screen.width, sortedBreakpointEntriesVec);
 
                 this->breakpoint = breakpoint;
 
@@ -191,12 +192,12 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
                     this->themeName = themeName;
                     this->onThemeChangeCallback(themeName);
                 }
-            
+
                 return jsi::Value::undefined();
             }
         );
     }
-    
+
     if (propName == "updateTheme") {
         return jsi::Function::createFromHostFunction(runtime,
             jsi::PropNameID::forAscii(runtime, "updateTheme"),
@@ -207,7 +208,7 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
                 if (this->themeName == themeName) {
                     this->onThemeChangeCallback(themeName);
                 }
-            
+
                 return jsi::Value::undefined();
             }
         );
@@ -225,7 +226,7 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
                 if (!enableAdaptiveThemes || !this->supportsAutomaticColorScheme) {
                     return jsi::Value::undefined();
                 }
-            
+
                 if (this->themeName != this->colorScheme) {
                     this->themeName = this->colorScheme;
                     this->onThemeChangeCallback(this->themeName);
@@ -235,27 +236,36 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
             }
         );
     }
-    
+
     if (propName == "insets") {
         auto insets = jsi::Object(runtime);
-        
-        insets.setProperty(runtime, "top", this->insets.at("top"));
-        insets.setProperty(runtime, "bottom", this->insets.at("bottom"));
-        insets.setProperty(runtime, "left", this->insets.at("left"));
-        insets.setProperty(runtime, "right", this->insets.at("right"));
-        
+
+        insets.setProperty(runtime, "top", this->insets.top);
+        insets.setProperty(runtime, "bottom", this->insets.bottom);
+        insets.setProperty(runtime, "left", this->insets.left);
+        insets.setProperty(runtime, "right", this->insets.right);
+
         return insets;
     }
-    
+
     if (propName == "statusBar") {
         auto statusBar = jsi::Object(runtime);
-        
-        statusBar.setProperty(runtime, "height", this->statusBar.at("height"));
-        statusBar.setProperty(runtime, "width", this->statusBar.at("width"));
-        
+
+        statusBar.setProperty(runtime, "width", this->statusBar.width);
+        statusBar.setProperty(runtime, "height", this->statusBar.height);
+
         return statusBar;
     }
 
+    if (propName == "navigationBar") {
+        auto navigationBarValue = jsi::Object(runtime);
+
+        navigationBarValue.setProperty(runtime, "width", this->navigationBar.width);
+        navigationBarValue.setProperty(runtime, "height", this->navigationBar.height);
+
+        return navigationBarValue;
+    }
+
     return jsi::Value::undefined();
 }
 
@@ -308,22 +318,27 @@ std::string UnistylesRuntime::getBreakpointFromScreenWidth(int width, const std:
     return sortedBreakpointPairs.empty() ? "" : sortedBreakpointPairs.back().first;
 }
 
-void UnistylesRuntime::handleScreenSizeChange(int width, int height, std::map<std::string, int> insets, std::map<std::string, int> statusBar) {
-    std::string breakpoint = this->getBreakpointFromScreenWidth(width, this->sortedBreakpointPairs);
-    bool shouldNotify = this->breakpoint != breakpoint || this->screenWidth != width || this->screenHeight != height;
-    
+void UnistylesRuntime::handleScreenSizeChange(Dimensions& screen, Insets& insets, Dimensions& statusBar, Dimensions& navigationBar) {
+    std::string breakpoint = this->getBreakpointFromScreenWidth(screen.width, this->sortedBreakpointPairs);
+    bool hasDifferentBreakpoint = this->breakpoint != breakpoint;
+    bool hasDifferentScreenDimensions = this->screen.width != screen.width || this->screen.height != screen.height;
+    bool hasDifferentInsets = this->insets.top != insets.top || this->insets.bottom != insets.bottom || this->insets.left != insets.left || this->insets.right != insets.right;
+
+    // we don't need to check statusBar/navigationBar as they will only change on orientation change witch is equal to hasDifferentScreenDimensions
+    bool shouldNotify = hasDifferentBreakpoint || hasDifferentScreenDimensions || hasDifferentInsets;
+
     this->breakpoint = breakpoint;
-    this->screenWidth = width;
-    this->screenHeight = height;
-    this->insets = insets;
-    this->statusBar = statusBar;
+    this->screen = {screen.width, screen.height};
+    this->insets = {insets.top, insets.bottom, insets.left, insets.right};
+    this->statusBar = {statusBar.width, statusBar.height};
+    this->navigationBar = {navigationBar.width, navigationBar.height};
 
-    std::string orientation = width > height
+    std::string orientation = screen.width > screen.height
         ? UnistylesOrientationLandscape
         : UnistylesOrientationPortrait;
 
     if (shouldNotify) {
-        this->onLayoutChangeCallback(breakpoint, orientation, width, height);
+        this->onLayoutChangeCallback(breakpoint, orientation, screen, statusBar, insets, navigationBar);
     }
 }
 
@@ -333,7 +348,7 @@ void UnistylesRuntime::handleAppearanceChange(std::string colorScheme) {
     if (!this->supportsAutomaticColorScheme || !this->hasAdaptiveThemes) {
         return;
     }
-    
+
     if (this->themeName != this->colorScheme) {
         this->onThemeChangeCallback(this->colorScheme);
         this->themeName = this->colorScheme;

package/cxx/UnistylesRuntime.h

@@ -17,32 +17,46 @@ const std::string UnistylesErrorBreakpointsCannotBeEmpty = "You are trying to re
 const std::string UnistylesErrorBreakpointsMustStartFromZero = "You are trying to register breakpoints that don't start from 0";
 const std::string UnistylesErrorThemesCannotBeEmpty = "You are trying to register empty themes object";
 
+struct Dimensions {
+    int width;
+    int height;
+};
+
+struct Insets {
+    int top;
+    int bottom;
+    int left;
+    int right;
+};
+
 class JSI_EXPORT UnistylesRuntime : public jsi::HostObject {
 private:
     std::function<void(std::string)> onThemeChangeCallback;
-    std::function<void(std::string breakpoint, std::string orientation, int screenWidth, int screenHeight)> onLayoutChangeCallback;
+    std::function<void(std::string breakpoint, std::string orientation, Dimensions& screen, Dimensions& statusBar, Insets& insets, Dimensions& navigationBar)> onLayoutChangeCallback;
     std::function<void(std::string)> onContentSizeCategoryChangeCallback;
     std::function<void()> onPluginChangeCallback;
 
-    int screenWidth;
-    int screenHeight;
+    Dimensions screen;
+    Dimensions statusBar;
+    Dimensions navigationBar;
+    Insets insets;
     std::string colorScheme;
     std::string contentSizeCategory;
 
 public:
     UnistylesRuntime(
-        int screenWidth,
-        int screenHeight,
+        Dimensions screen,
         std::string colorScheme,
         std::string contentSizeCategory,
-        std::map<std::string, int> insets,
-        std::map<std::string, int> statusBar
-    ): screenWidth(screenWidth),
-       screenHeight(screenHeight),
-       colorScheme(colorScheme),
-       contentSizeCategory(contentSizeCategory),
-       insets(insets),
-       statusBar(statusBar) {}
+        Insets insets,
+        Dimensions statusBar,
+        Dimensions navigationBar
+     ): screen(screen),
+        colorScheme(colorScheme),
+        contentSizeCategory(contentSizeCategory),
+        insets(insets),
+        statusBar(statusBar),
+        navigationBar(navigationBar) {}
 
     bool hasAdaptiveThemes;
     bool supportsAutomaticColorScheme;
@@ -52,22 +66,19 @@ public:
     std::vector<std::string> pluginNames;
     std::vector<std::string> themes;
     std::vector<std::pair<std::string, double>> sortedBreakpointPairs;
-    
-    std::map<std::string, int> insets;
-    std::map<std::string, int> statusBar;
 
     void onThemeChange(std::function<void(std::string)> callback) {
         this->onThemeChangeCallback = callback;
     }
 
-    void onLayoutChange(std::function<void(std::string breakpoint, std::string orientation, int screenWidth, int screenHeight)> callback) {
+    void onLayoutChange(std::function<void(std::string breakpoint, std::string orientation, Dimensions& screen, Dimensions& statusBar, Insets& insets, Dimensions& navigationBar)> callback) {
         this->onLayoutChangeCallback = callback;
     }
 
     void onPluginChange(std::function<void()> callback) {
         this->onPluginChangeCallback = callback;
     }
-    
+
     void onContentSizeCategoryChange(std::function<void(std::string)> callback) {
         this->onContentSizeCategoryChangeCallback = callback;
     }
@@ -76,7 +87,7 @@ public:
     void set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) override;
     std::vector<jsi::PropNameID> getPropertyNames(jsi::Runtime& runtime) override;
 
-    void handleScreenSizeChange(int width, int height, std::map<std::string, int> insets, std::map<std::string, int> statusBar);
+    void handleScreenSizeChange(Dimensions& screen, Insets& insets, Dimensions& statusBar, Dimensions& navigationBar);
     void handleAppearanceChange(std::string colorScheme);
     void handleContentSizeCategoryChange(std::string contentSizeCategory);
 

package/ios/UnistylesModule.mm

@@ -72,12 +72,12 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install) {
 
 void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSelf) {
     auto unistylesRuntime = std::make_shared<UnistylesRuntime>(
-        (int)weakSelf.platform.initialWidth,
-        (int)weakSelf.platform.initialHeight,
+        weakSelf.platform.initialScreen,
         weakSelf.platform.initialColorScheme,
         weakSelf.platform.initialContentSizeCategory,
         weakSelf.platform.initialInsets,
-        weakSelf.platform.initialStatusBar
+        weakSelf.platform.initialStatusBar,
+        weakSelf.platform.initialNavigationBar
     );
 
     unistylesRuntime.get()->onThemeChange([=](std::string theme) {
@@ -91,15 +91,29 @@ void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSel
         [weakSelf emitEvent:@"__unistylesOnChange" withBody:body];
     });
 
-    unistylesRuntime.get()->onLayoutChange([=](std::string breakpoint, std::string orientation, int width, int height) {
+    unistylesRuntime.get()->onLayoutChange([=](std::string breakpoint, std::string orientation, Dimensions& screen, Dimensions& statusBar, Insets& insets, Dimensions& navigationBar) {
         NSDictionary *body = @{
             @"type": @"layout",
             @"payload": @{
                 @"breakpoint": cxxStringToNSString(breakpoint),
                 @"orientation": cxxStringToNSString(orientation),
                 @"screen": @{
-                    @"width": @(width),
-                    @"height": @(height)
+                    @"width": @(screen.width),
+                    @"height": @(screen.height)
+                },
+                @"statusBar": @{
+                    @"width": @(statusBar.width),
+                    @"height": @(statusBar.height)
+                },
+                @"navigationBar": @{
+                    @"width": @(navigationBar.width),
+                    @"height": @(navigationBar.height)
+                },
+                @"insets": @{
+                    @"top": @(insets.top),
+                    @"bottom": @(insets.bottom),
+                    @"left": @(insets.left),
+                    @"right": @(insets.right)
                 }
             }
         };

package/ios/platform/Platform_iOS.h

@@ -1,14 +1,15 @@
 #include <string>
 #include <map>
+#include <UnistylesRuntime.h>
 
 @interface Platform : NSObject
 
-@property (nonatomic, assign) CGFloat initialWidth;
-@property (nonatomic, assign) CGFloat initialHeight;
+@property (nonatomic, assign) Dimensions initialScreen;
 @property (nonatomic, assign) std::string initialColorScheme;
 @property (nonatomic, assign) std::string initialContentSizeCategory;
-@property (nonatomic, assign) std::map<std::string, int> initialInsets;
-@property (nonatomic, assign) std::map<std::string, int> initialStatusBar;
+@property (nonatomic, assign) Insets initialInsets;
+@property (nonatomic, assign) Dimensions initialStatusBar;
+@property (nonatomic, assign) Dimensions initialNavigationBar;
 @property (nonatomic, assign) void* unistylesRuntime;
 
 - (instancetype)init;