react-native-unistyles 3.0.0-nightly-20250513 → 3.0.0-nightly-20250526

package/src/core/createUnistylesElement.native.tsx

@@ -1,43 +1,15 @@
-import React, { useLayoutEffect, useRef } from 'react'
+import React from 'react'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-const getNativeRef = (Component: any, ref: any) => {
-    switch (Component.name) {
-        case 'KeyboardAvoidingView':
-            return ref.viewRef?.current
-        case 'FlatList':
-            return ref.getNativeScrollRef?.()
-        case 'VirtualizedList':
-            return ref.getScrollRef?.()
-        default:
-            return ref
-    }
-}
-
 export const createUnistylesElement = (Component: any) => {
     const UnistylesComponent = React.forwardRef((props, forwardedRef) => {
-        const storedRef = useRef<unknown>(null)
-
-        useLayoutEffect(() => {
-            return () => {
-                if (storedRef.current) {
-                    // @ts-ignore
-                    UnistylesShadowRegistry.remove(storedRef.current)
-                }
-            }
-        }, [])
-
         return (
             <Component
                 {...props}
                 ref={(ref: unknown) => {
-                    if (ref) {
-                        storedRef.current = getNativeRef(Component, ref)
-                    }
-
                     // @ts-ignore we don't know the type of the component
                     maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
 

package/src/core/createUnistylesImageBackground.tsx

@@ -1,5 +1,5 @@
-import React, { useLayoutEffect, useRef } from 'react'
-import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
+import React from 'react'
+import type { ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -7,17 +7,6 @@ import { maybeWarnAboutMultipleUnistyles } from './warn'
 
 export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
     const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
-        const storedImageRef = useRef<Image | null>(null)
-
-        useLayoutEffect(() => {
-            return () => {
-                if (storedImageRef.current) {
-                    // @ts-ignore
-                    UnistylesShadowRegistry.remove(storedImageRef.current)
-                }
-            }
-        }, [])
-
         // @ts-expect-error we don't know the type of the component
         maybeWarnAboutMultipleUnistyles(props.style, 'ImageBackground')
         // @ts-ignore we don't know the type of the component
@@ -37,21 +26,17 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                         () => {
                             // @ts-expect-error - this is hidden from TS
                             UnistylesShadowRegistry.remove(ref)
-
-                            if (storedImageRef.current) {
-                                // @ts-expect-error - this is hidden from TS
-                                UnistylesShadowRegistry.remove(storedImageRef.current)
-                            }
                         }
                     )
                 }}
                 imageRef={ref => {
-                    if (ref) {
-                        storedImageRef.current = ref
-                    }
-
                     // @ts-expect-error web types are not compatible with RN styles
                     UnistylesShadowRegistry.add(ref, props.imageStyle)
+
+                    return () => {
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    }
                 }}
             />
         )

package/src/index.ts

@@ -1,3 +1,11 @@
+import React from 'react'
+
+const [majorReactVersions] = React.version.split('.').map(Number.parseInt)
+
+if (majorReactVersions === undefined || majorReactVersions < 19) {
+    throw new Error('Unistyles 🦄: To enable full Fabric power you need to use React 19.0.0 or higher')
+}
+
 export { StyleSheet, UnistylesRuntime, StatusBar, NavigationBar } from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'

package/src/reanimated/useAnimatedTheme.native.ts

@@ -1,10 +1,10 @@
 import { useEffect } from 'react'
-import { useSharedValue } from 'react-native-reanimated'
+import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
 import type { UnistylesTheme } from '../types'
 
 export const useAnimatedTheme = () => {
-    const theme = useSharedValue<UnistylesTheme>(UnistylesRuntime.getTheme())
+    const theme = useSharedValue(UnistylesRuntime.getTheme())
 
     useEffect(() => {
         // @ts-ignore this is hidden from TS
@@ -17,5 +17,5 @@ export const useAnimatedTheme = () => {
         return () => dispose()
     }, [])
 
-    return theme
+    return theme as SharedValue<UnistylesTheme>
 }

package/src/reanimated/useAnimatedTheme.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react'
-import { useSharedValue } from 'react-native-reanimated'
+import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 import { UnistyleDependency, UnistylesRuntime } from '../specs'
 import type { UnistylesTheme } from '../types'
 import { services } from '../web/services'
 
 export const useAnimatedTheme = () => {
-    const theme = useSharedValue<UnistylesTheme>(UnistylesRuntime.getTheme())
+    const theme = useSharedValue(UnistylesRuntime.getTheme())
 
     useEffect(() => {
         const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
@@ -15,5 +15,5 @@ export const useAnimatedTheme = () => {
         }
     }, [])
 
-    return theme
+    return theme as SharedValue<UnistylesTheme>
 }

package/src/web/css/core.ts

@@ -34,8 +34,16 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
         }
 
         if (typeof styleValue === 'object') {
-            const allBreakpoints = Object.keys(value)
             Object.entries(styleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
+                const allBreakpoints = Object.entries(value)
+                    .filter(([_, value]) => {
+                        if (typeof value !== 'object' || value === null) {
+                            return false
+                        }
+
+                        return breakpointStyleKey in value
+                    })
+                    .map(([key]) => key)
                 const mediaQuery = getMediaQuery(styleKey, allBreakpoints)
 
                 state.set({

package/src/web/shadowRegistry.ts

@@ -20,7 +20,7 @@ export class UnistylesShadowRegistry {
     constructor(private services: UnistylesServices) {}
 
     add = (ref: any, hash?: string) => {
-        if (!(ref instanceof HTMLElement) || !hash) {
+        if (isServer() || !(ref instanceof HTMLElement) || !hash) {
             return
         }
 

package/web/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "../lib/commonjs/web-only/index",
+    "module": "../lib/module/web-only/index",
+    "react-native": "../src/web-only/index",
+    "types": "../lib/typescript/src/web-only/index"
+}

package/cxx/core/UnistylesCommitHook.cpp

@@ -1,59 +0,0 @@
-#include "UnistylesCommitHook.h"
-
-using namespace margelo::nitro::unistyles;
-using namespace facebook::react;
-
-core::UnistylesCommitHook::~UnistylesCommitHook() noexcept {
-    _uiManager->unregisterCommitHook(*this);
-}
-
-void core::UnistylesCommitHook::commitHookWasRegistered(const UIManager &uiManager) noexcept {}
-void core::UnistylesCommitHook::commitHookWasUnregistered(const UIManager &uiManager) noexcept {}
-
-RootShadowNode::Unshared core::UnistylesCommitHook::shadowTreeWillCommit(
-    const ShadowTree &shadowTree,
-    const RootShadowNode::Shared &oldRootShadowNode,
-    const RootShadowNode::Unshared &newRootShadowNode
-) noexcept {
-    RootShadowNode::Unshared rootNode = newRootShadowNode;
-    auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(newRootShadowNode);
-
-    // this is Unistyles commit, we don't need to override it
-    if (unistylesRootNode->hasUnistylesCommitTrait()) {
-        unistylesRootNode->removeUnistylesCommitTrait();
-        unistylesRootNode->addUnistylesMountTrait();
-
-        return newRootShadowNode;
-    }
-
-    auto& registry = core::UnistylesRegistry::get();
-
-    if (registry.trafficController.shouldStop()) {
-        registry.trafficController.resumeUnistylesTraffic();
-
-        return newRootShadowNode;
-    }
-
-    // this is React Native / Reanimated commit
-    // merge Unistyles updates before it completes
-
-    return registry.trafficController.withLock([&](){
-        auto& shadowLeafUpdates = registry.trafficController.getUpdates();
-
-        // oops, no updates from Unistyles yet, skip it!
-        if (shadowLeafUpdates.size() == 0) {
-            return newRootShadowNode;
-        }
-
-        auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(*rootNode, shadowLeafUpdates);
-
-        registry.trafficController.stopUnistylesTraffic();
-
-        // we have few updates, so merge it
-        return std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
-            *rootNode,
-            shadowLeafUpdates,
-            affectedNodes
-        ));
-    });
-}

package/cxx/core/UnistylesCommitHook.h

@@ -1,27 +0,0 @@
-#pragma once
-
-#include <react/renderer/uimanager/UIManager.h>
-#include <react/renderer/uimanager/UIManagerCommitHook.h>
-#include "ShadowTreeManager.h"
-#include "ShadowTrafficController.h"
-
-namespace margelo::nitro::unistyles::core {
-
-using namespace facebook::react;
-
-struct UnistylesCommitHook : public UIManagerCommitHook {
-    UnistylesCommitHook(std::shared_ptr<UIManager> uiManager) : _uiManager{uiManager} {
-        _uiManager->registerCommitHook(*this);
-    }
-
-    ~UnistylesCommitHook() noexcept override;
-
-    void commitHookWasRegistered(const UIManager &uiManager) noexcept override;
-    void commitHookWasUnregistered(const UIManager &uiManager) noexcept override;
-    RootShadowNode::Unshared shadowTreeWillCommit(const ShadowTree &shadowTree, const RootShadowNode::Shared &oldRootShadowNode, const RootShadowNode::Unshared &newRootShadowNode) noexcept override;
-
-private:
-    std::shared_ptr<UIManager> _uiManager;
-};
-
-}

package/cxx/core/UnistylesMountHook.cpp

@@ -1,26 +0,0 @@
-#include "UnistylesMountHook.h"
-
-using namespace margelo::nitro::unistyles;
-using namespace facebook::react;
-
-core::UnistylesMountHook::~UnistylesMountHook() noexcept {
-    _uiManager->unregisterMountHook(*this);
-}
-
-void core::UnistylesMountHook::shadowTreeDidMount(RootShadowNode::Shared const &rootShadowNode, double mountTime) noexcept {
-    auto rootNode = std::const_pointer_cast<RootShadowNode>(rootShadowNode);
-    auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(rootNode);
-
-    // if this is Unistyles commit, do nothing
-    if (unistylesRootNode->hasUnistylesMountTrait()) {
-        unistylesRootNode->removeUnistylesMountTrait();
-
-        return;
-    }
-
-    // this is React Native or Reanimated commit
-    // one more time merge Unistyles changes
-    auto& registry = core::UnistylesRegistry::get();
-
-    registry.trafficController.stopUnistylesTraffic();
-}

package/cxx/core/UnistylesMountHook.h

@@ -1,24 +0,0 @@
-#pragma once
-
-#include <react/renderer/uimanager/UIManager.h>
-#include <react/renderer/uimanager/UIManagerMountHook.h>
-#include "ShadowTreeManager.h"
-
-namespace margelo::nitro::unistyles::core {
-
-using namespace facebook::react;
-
-struct UnistylesMountHook : public UIManagerMountHook {
-    UnistylesMountHook(std::shared_ptr<UIManager> uiManager): _uiManager{uiManager} {
-        _uiManager->registerMountHook(*this);
-    }
-
-    ~UnistylesMountHook() noexcept override;
-
-    void shadowTreeDidMount(RootShadowNode::Shared const &rootShadowNode, double mountTime) noexcept override;
-
-private:
-    std::shared_ptr<UIManager> _uiManager;
-};
-
-}

package/lib/module/package.json

@@ -1 +0,0 @@
-{"type":"module"}