react-native-unistyles 3.0.0-rc.4 → 3.0.0

package/lib/typescript/src/web-only/getWebProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getWebProps.d.ts","sourceRoot":"","sources":["../../../../src/web-only/getWebProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,EAAE,OAAO,EAAmB,MAAM,UAAU,CAAA;AAGxD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,SAAS,CAAC,OAAO,CAAC;;;CAYvD,CAAA"}
+{"version":3,"file":"getWebProps.d.ts","sourceRoot":"","sources":["../../../../src/web-only/getWebProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,EAAE,OAAO,EAAmB,MAAM,UAAU,CAAA;AAGxD,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;;;CAYvD,CAAA"}

package/nitrogen/generated/ios/Unistyles-Swift-Cxx-Umbrella.hpp

@@ -45,6 +45,7 @@ namespace margelo::nitro::unistyles { struct UnistylesNativeMiniRuntime; }
 #include <NitroModules/ArrayBufferHolder.hpp>
 #include <NitroModules/AnyMapHolder.hpp>
 #include <NitroModules/RuntimeError.hpp>
+#include <NitroModules/DateToChronoDate.hpp>
 
 // Forward declarations of Swift defined types
 // Forward declaration of `HybridNativePlatformSpec_cxx` to properly resolve imports.

package/nitrogen/generated/shared/c++/HybridUnistylesRuntimeSpec.cpp

@@ -26,6 +26,8 @@ namespace margelo::nitro::unistyles {
       prototype.registerHybridGetter("pixelRatio", &HybridUnistylesRuntimeSpec::getPixelRatio);
       prototype.registerHybridGetter("fontScale", &HybridUnistylesRuntimeSpec::getFontScale);
       prototype.registerHybridGetter("rtl", &HybridUnistylesRuntimeSpec::getRtl);
+      prototype.registerHybridGetter("isLandscape", &HybridUnistylesRuntimeSpec::getIsLandscape);
+      prototype.registerHybridGetter("isPortrait", &HybridUnistylesRuntimeSpec::getIsPortrait);
       prototype.registerHybridGetter("miniRuntime", &HybridUnistylesRuntimeSpec::getMiniRuntime);
       prototype.registerHybridMethod("setTheme", &HybridUnistylesRuntimeSpec::setTheme);
       prototype.registerHybridMethod("setAdaptiveThemes", &HybridUnistylesRuntimeSpec::setAdaptiveThemes);

package/nitrogen/generated/shared/c++/HybridUnistylesRuntimeSpec.hpp

@@ -72,6 +72,8 @@ namespace margelo::nitro::unistyles {
       virtual double getPixelRatio() = 0;
       virtual double getFontScale() = 0;
       virtual bool getRtl() = 0;
+      virtual bool getIsLandscape() = 0;
+      virtual bool getIsPortrait() = 0;
       virtual UnistylesCxxMiniRuntime getMiniRuntime() = 0;
 
     public:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-rc.4",
+  "version": "3.0.0",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin",
@@ -9,10 +9,11 @@
     "lint": "biome lint",
     "check": "biome check --write",
     "check:ci": "biome check",
-    "prepare": "husky && bob build && yarn plugin:build",
+    "prepare": "husky && bob build && yarn plugin:build && yarn repack:plugin:build",
     "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn check' 'yarn test' 'yarn circular:check'",
     "release": "release-it",
     "plugin:build": "node plugin/esbuild.js",
+    "repack:plugin:build": "node repack-plugin/esbuild.js",
     "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 src/**/*.ts",
     "components:build": "node build-components.js"
   },
@@ -46,6 +47,11 @@
       "types": "./plugin/index.d.ts",
       "default": "./plugin/index.js"
     },
+    "./repack-plugin": {
+      "import": "./repack-plugin/index.js",
+      "types": "./repack-plugin/index.d.ts",
+      "default": "./repack-plugin/index.js"
+    },
     "./package.json": "./package.json",
     "./server": {
       "types": "./lib/typescript/src/server/index.d.ts",
@@ -84,6 +90,11 @@
     "reanimated",
     "react-native.config.js",
     "Unistyles.podspec",
+    "repack-plugin",
+    "get_rn_version.rb",
+    "!repack-plugin/__tests__",
+    "!repack-plugin/src",
+    "!repack-plugin/esbuild.js",
     "!plugin/__tests__",
     "!plugin/src",
     "!plugin/esbuild.js",
@@ -116,35 +127,37 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@babel/core": "7.26.9",
-    "@babel/plugin-syntax-jsx": "7.25.9",
-    "@babel/preset-flow": "7.25.9",
-    "@babel/preset-typescript": "7.26.0",
-    "@babel/types": "7.26.9",
+    "@babel/core": "7.27.1",
+    "@babel/plugin-syntax-jsx": "7.27.1",
+    "@babel/preset-flow": "7.27.1",
+    "@babel/preset-typescript": "7.27.1",
+    "@babel/types": "7.27.1",
     "@biomejs/biome": "1.9.4",
-    "@commitlint/config-conventional": "19.7.1",
-    "@react-native/normalize-colors": "0.78.0",
+    "@callstack/repack": "5.1.0",
+    "@commitlint/config-conventional": "19.8.1",
+    "@react-native/normalize-colors": "0.79.2",
     "@release-it/conventional-changelog": "8.0.2",
+    "@rspack/core": "1.3.10",
     "@types/jest": "29.5.14",
-    "@types/react": "19.0.10",
+    "@types/react": "19.1.4",
     "babel-plugin-tester": "11.0.4",
-    "commitlint": "19.7.1",
+    "commitlint": "19.8.1",
     "concurrently": "9.1.2",
     "dpdm": "3.14.0",
-    "esbuild": "0.25.0",
+    "esbuild": "0.25.4",
     "husky": "9.1.7",
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
-    "nitro-codegen": "0.25.2",
-    "react": "18.3.1",
-    "react-native": "0.77.1",
-    "react-native-builder-bob": "0.37.0",
-    "react-native-nitro-modules": "0.25.2",
+    "nitro-codegen": "0.26.2",
+    "react": "19.1.0",
+    "react-native": "0.79.2",
+    "react-native-builder-bob": "0.40.10",
+    "react-native-nitro-modules": "0.26.2",
     "react-native-reanimated": "3.17.5",
-    "react-native-web": "0.19.13",
-    "react-test-renderer": "18.3.1",
+    "react-native-web": "0.20.0",
+    "react-test-renderer": "19.1.0",
     "release-it": "17.11.0",
-    "typescript": "5.7.3"
+    "typescript": "5.8.3"
   },
   "peerDependencies": {
     "@react-native/normalize-colors": "*",
@@ -222,8 +235,5 @@
     "name": "TurboUnistyles",
     "type": "modules",
     "jsSrcsDir": "./src/specs/TurboUnistyles"
-  },
-  "resolutions": {
-    "@babel/types": "7.26.8"
   }
 }

package/plugin/index.d.ts

@@ -37,11 +37,12 @@ export interface RemapConfig {
 
 export interface UnistylesPluginOptions {
     /**
-     * Example: 'src' or 'apps/mobile'
-     * Add this option if some of your components don't have `react-native-unistyles` import.
-     * Babel plugin will automatically process all files under this root.
+     * Required from RC.5
+     * Example: 'src' or 'app'
+     * Add root folder of your project. All files under this folder will be processed by the Babel plugin.
+     * If you need to process extra folders, use with `autoProcessPaths` option.
      */
-    autoProcessRoot?: string,
+    root: string,
 
     /**
     * Example: ['@codemask/styles']
@@ -103,7 +104,7 @@ export interface UnistylesPluginOptions {
     * Defaults to:
     *
     * ```ts
-    * ['react-native-reanimated/src/component', 'react-native-gesture-handler/src/components']
+    * ['react-native-reanimated/src/component']
     * ```
     */
     autoProcessPaths?: Array<string>,

package/plugin/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
+var import_node_path2 = __toESM(require("node:path"));
 var t6 = __toESM(require("@babel/types"));
 
 // plugin/src/consts.ts
@@ -59,10 +60,7 @@ var REACT_NATIVE_COMPONENT_NAMES = [
 ];
 var REPLACE_WITH_UNISTYLES_PATHS = [
   "react-native-reanimated/src/component",
-  "react-native-reanimated/lib/module/component",
-  "react-native-gesture-handler/lib/module/components",
-  "react-native-gesture-handler/lib/commonjs/components",
-  "react-native-gesture-handler/src/components"
+  "react-native-reanimated/lib/module/component"
 ];
 var REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = [];
 var NATIVE_COMPONENTS_PATHS = {
@@ -165,7 +163,7 @@ function addUnistylesRequire(path2, state) {
       t2.variableDeclarator(
         t2.identifier(uniqueName),
         t2.callExpression(t2.identifier("require"), [
-          t2.stringLiteral(`react-native-unistyles/src/components/native/${componentName}`)
+          t2.stringLiteral(`react-native-unistyles/components/native/${componentName}`)
         ])
       )
     ]);
@@ -724,6 +722,13 @@ function index_default() {
     visitor: {
       Program: {
         enter(path2, state) {
+          if (!state.opts.root) {
+            throw new Error("Unistyles \u{1F984}: Babel plugin requires `root` option to be set. Please check https://www.unistyl.es/v3/other/babel-plugin#extra-configuration");
+          }
+          const appRoot = toPlatformPath(import_node_path2.default.join(state.file.opts.root, state.opts.root));
+          if (state.file.opts.root === appRoot) {
+            throw new Error("Unistyles \u{1F984}: Root option can't resolve to project root as it will include node_modules folder. Please check https://www.unistyl.es/v3/other/babel-plugin#extra-configuration");
+          }
           state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((path3) => state.filename?.includes(path3));
           state.file.hasAnyUnistyle = false;
           state.file.hasUnistylesImport = false;
@@ -733,7 +738,7 @@ function index_default() {
           state.file.reactNativeCommonJSName = "";
           state.file.tagNumber = 0;
           state.reactNativeImports = {};
-          state.file.forceProcessing = state.opts.autoProcessRoot && state.filename ? state.filename.includes(toPlatformPath(`${state.file.opts.root}/${state.opts.autoProcessRoot}/`)) : false;
+          state.file.forceProcessing = state.filename?.includes(appRoot) ?? false;
           path2.traverse({
             BlockStatement(blockPath) {
               if (isInsideNodeModules(state)) {

package/repack-plugin/index.d.ts

@@ -0,0 +1,19 @@
+import type {Compiler,LoaderContext,RspackPluginInstance } from '@rspack/core'
+import type { UnistylesPluginOptions } from 'react-native-unistyles/plugin'
+
+export declare const BASE_REPACK_EXCLUDE_PATHS: Array<RegExp>
+interface ConstructorParams {
+    ruleExcludePaths?: Array<RegExp>
+    unistylesPluginOptions?: UnistylesPluginOptions
+}
+
+export declare class RepackUnistylePlugin implements RspackPluginInstance {
+    private ruleExcludePaths
+    private unistylesPluginOptions
+    constructor({ ruleExcludePaths, unistylesPluginOptions }?: ConstructorParams)
+    apply(compiler: Compiler): void
+}
+
+declare function unistylesLoader(this: LoaderContext<UnistylesLoaderOptions>, source: string): void;
+
+export default unistylesLoader

package/repack-plugin/index.js

@@ -0,0 +1,149 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// repack-plugin/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BASE_REPACK_EXCLUDE_PATHS: () => BASE_REPACK_EXCLUDE_PATHS,
+  RepackUnistylePlugin: () => RepackUnistylePlugin,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_repack = require("@callstack/repack");
+
+// repack-plugin/src/loader.ts
+var import_core = require("@babel/core");
+
+// plugin/src/consts.ts
+var REACT_NATIVE_COMPONENT_NAMES = [
+  "ActivityIndicator",
+  "View",
+  "Text",
+  "Image",
+  "ImageBackground",
+  "KeyboardAvoidingView",
+  "Pressable",
+  "ScrollView",
+  "FlatList",
+  "SectionList",
+  "Switch",
+  "TextInput",
+  "RefreshControl",
+  "TouchableHighlight",
+  "TouchableOpacity",
+  "VirtualizedList",
+  "Animated"
+  // Modal - there is no exposed native handle
+  // TouchableWithoutFeedback - can't accept a ref
+];
+var REPLACE_WITH_UNISTYLES_PATHS = [
+  "react-native-reanimated/src/component",
+  "react-native-reanimated/lib/module/component"
+];
+
+// repack-plugin/src/loader.ts
+var importName = "react-native-unistyles";
+var UNISTYLES_REGEX = new RegExp(
+  [...REACT_NATIVE_COMPONENT_NAMES, ...REPLACE_WITH_UNISTYLES_PATHS, importName].join("|")
+);
+function unistylesLoader(source) {
+  this.cacheable();
+  const callback = this.async();
+  const options = this.getOptions();
+  if (!UNISTYLES_REGEX.test(source)) {
+    callback(null, source);
+    return;
+  }
+  const unistylesOptions = options.unistylesPluginOptions;
+  const unistylesPlugin = unistylesOptions ? ["react-native-unistyles/plugin", unistylesOptions] : "react-native-unistyles/plugin";
+  const babelPlugins = options.babelPlugins ?? [];
+  (0, import_core.transform)(
+    source,
+    {
+      filename: this.resourcePath,
+      babelrc: false,
+      configFile: false,
+      compact: false,
+      comments: true,
+      plugins: [...babelPlugins, unistylesPlugin]
+    },
+    (err, result) => {
+      if (err) {
+        callback(err);
+        return;
+      }
+      callback(null, result.code, result.map);
+      return;
+    }
+  );
+}
+
+// repack-plugin/src/index.ts
+var BASE_REPACK_EXCLUDE_PATHS = (0, import_repack.getModulePaths)([
+  "react",
+  "react-native",
+  "@react-native",
+  "react-native-macos",
+  "react-native-windows",
+  "react-native-tvos",
+  "@callstack/react-native-visionos",
+  "@module-federation",
+  "react-native-unistyles",
+  "whatwg-fetch",
+  "@callstack",
+  "react-native-nitro-modules",
+  "@callstack/repack"
+]);
+var getUnistyleModuleRules = (excludePathLoader, unistylesPluginOptions) => {
+  const createRule = (test, babelPlugins) => ({
+    test,
+    use: {
+      loader: "react-native-unistyles/repack-plugin",
+      options: {
+        babelPlugins,
+        unistylesPluginOptions
+      }
+    }
+  });
+  return {
+    exclude: excludePathLoader,
+    oneOf: [
+      createRule(/\.[cm]?ts$/, [["@babel/plugin-syntax-typescript", { isTSX: false, allowNamespaces: true }]]),
+      createRule(/\.[cm]?tsx$/, [["@babel/plugin-syntax-typescript", { isTSX: true, allowNamespaces: true }]]),
+      createRule(/\.[cm]?jsx?$/, ["babel-plugin-syntax-hermes-parser"])
+    ]
+  };
+};
+var RepackUnistylePlugin = class {
+  ruleExcludePaths;
+  unistylesPluginOptions;
+  constructor({ ruleExcludePaths = BASE_REPACK_EXCLUDE_PATHS, unistylesPluginOptions } = {}) {
+    this.ruleExcludePaths = ruleExcludePaths;
+    this.unistylesPluginOptions = unistylesPluginOptions;
+  }
+  apply(compiler) {
+    compiler.options.module.rules.push(getUnistyleModuleRules(this.ruleExcludePaths, this.unistylesPluginOptions));
+  }
+};
+var index_default = unistylesLoader;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BASE_REPACK_EXCLUDE_PATHS,
+  RepackUnistylePlugin
+});

package/src/components/AdaptiveTheme.tsx

@@ -0,0 +1,34 @@
+import React, { useLayoutEffect } from 'react'
+import type { PropsWithChildren } from 'react'
+import { useUnistyles } from '../core'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+import { ApplyScopedTheme } from './ApplyScopedTheme'
+
+interface AdaptiveThemeProps extends PropsWithChildren {
+    previousScopedTheme?: string
+}
+
+export const AdaptiveTheme: React.FunctionComponent<AdaptiveThemeProps> = ({
+    children,
+    previousScopedTheme
+}) => {
+    const { rt } = useUnistyles()
+    const name = (rt.colorScheme === 'dark' ? 'light' : 'dark') as keyof UnistylesThemes
+    const mappedChildren = [
+        <ApplyScopedTheme key={name} name={name} />,
+        children,
+        <ApplyScopedTheme key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
+    ]
+
+    useLayoutEffect(() => {
+        // this will affect only scoped styles as other styles are not yet mounted
+        UnistylesShadowRegistry.flush()
+    })
+
+    return (
+        <React.Fragment key={name}>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/ApplyScopedTheme.tsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+
+type ApplyScopedThemeProps = {
+    name?: keyof UnistylesThemes
+}
+
+export const ApplyScopedTheme: React.FunctionComponent<ApplyScopedThemeProps> = ({ name }) => {
+    UnistylesShadowRegistry.setScopedTheme(name)
+
+    useLayoutEffect(() => {
+        UnistylesShadowRegistry.setScopedTheme(name)
+    })
+
+    return null
+}

package/src/components/NamedTheme.tsx

@@ -0,0 +1,33 @@
+import React, { useLayoutEffect } from 'react'
+import type { PropsWithChildren } from 'react'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+import { ApplyScopedTheme } from './ApplyScopedTheme'
+
+interface NamedThemeProps extends PropsWithChildren {
+    name: keyof UnistylesThemes | undefined,
+    previousScopedTheme?: string
+}
+
+export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({
+    name,
+    children,
+    previousScopedTheme
+}) => {
+    const mappedChildren = [
+        <ApplyScopedTheme key='apply' name={name} />,
+        children,
+        <ApplyScopedTheme key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
+    ]
+
+    useLayoutEffect(() => {
+        // this will affect only scoped styles as other styles are not yet mounted
+        UnistylesShadowRegistry.flush()
+    })
+
+    return (
+        <React.Fragment>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/ScopedTheme.tsx

@@ -1,32 +1,59 @@
-import React, { useLayoutEffect } from 'react'
+import React from 'react'
 import type { UnistylesThemes } from '../global'
-import { UnistylesShadowRegistry } from '../specs'
+import { UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
+import { AdaptiveTheme } from './AdaptiveTheme'
+import { NamedTheme } from './NamedTheme'
 
 type ThemeProps = {
-    name: keyof UnistylesThemes
+    name: keyof UnistylesThemes,
+    invertedAdaptive?: never
+    reset?: never
+} | {
+    name?: never,
+    invertedAdaptive: boolean,
+    reset?: never
+} | {
+    name?: never,
+    invertedAdaptive?: never,
+    reset: boolean
 }
 
-const Apply = ({ name }: { name?: keyof UnistylesThemes }) => {
-    UnistylesShadowRegistry.setScopedTheme(name)
-
-    useLayoutEffect(() => {
-        UnistylesShadowRegistry.setScopedTheme(name)
-    })
-
-    return null
-}
-
-export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({ name, children }) => {
+export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({
+    name,
+    children,
+    invertedAdaptive,
+    reset
+}) => {
+    const hasAdaptiveThemes = UnistylesRuntime.hasAdaptiveThemes
+    const isAdaptiveTheme = invertedAdaptive && hasAdaptiveThemes
     const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
-    const mappedChildren = [
-        <Apply key={name} name={name} />,
-        children,
-        <Apply key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
-    ]
 
-    return (
-        <React.Fragment>
-            {mappedChildren}
-        </React.Fragment>
-    )
+    switch (true) {
+        case name !== undefined:
+            return (
+                <NamedTheme
+                    name={name as keyof UnistylesThemes}
+                    previousScopedTheme={previousScopedTheme}
+                >
+                    {children}
+                </NamedTheme>
+            )
+        case isAdaptiveTheme:
+            return (
+                <AdaptiveTheme previousScopedTheme={previousScopedTheme}>
+                    {children}
+                </AdaptiveTheme>
+            )
+        case reset:
+            return (
+                <NamedTheme
+                    name={undefined}
+                    previousScopedTheme={previousScopedTheme}
+                >
+                    {children}
+                </NamedTheme>
+            )
+        default:
+            return children
+    }
 }

package/src/core/createUnistylesElement.native.tsx

@@ -1,49 +1,39 @@
-import React, { useLayoutEffect, useRef } from 'react'
+import React, { useRef } from 'react'
+import type { ScrollView } from 'react-native'
 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)
-                }
-            }
-        }, [])
+    const UnistylesComponent = (props: any) => {
+        const scrollViewRef = useRef<ScrollView>(null)
 
         return (
             <Component
                 {...props}
                 ref={(ref: unknown) => {
-                    if (ref) {
-                        storedRef.current = getNativeRef(Component, ref)
+                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+
+                    // https://github.com/facebook/react-native/issues/51878
+                    // tested with ScrollView, REA ScrolLView and Animated ScrollView
+                    const isScrollView = Component.displayName === 'ScrollView'
+
+                    if (isScrollView && ref) {
+                        scrollViewRef.current = ref as ScrollView
                     }
 
-                    // @ts-ignore we don't know the type of the component
-                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+                    if (isScrollView && !ref) {
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.remove(scrollViewRef.current)
+                        scrollViewRef.current = null
+
+                        return
+                    }
 
                     return passForwardedRef(
                         ref,
-                        forwardedRef,
+                        props.ref,
                         () => {
                             // @ts-ignore this is hidden from TS
                             UnistylesShadowRegistry.add(ref, props.style)
@@ -56,7 +46,7 @@ export const createUnistylesElement = (Component: any) => {
                 }}
             />
         )
-    })
+    }
 
     return copyComponentProperties(Component, UnistylesComponent)
 }