react-native-unistyles 3.0.0-beta.8 → 3.0.0-experimental-2025051402

package/plugin/index.js

@@ -59,6 +59,9 @@ 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"
 ];
 var REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = [];
@@ -80,10 +83,10 @@ var NATIVE_COMPONENTS_PATHS = {
 
 // plugin/src/exotic.ts
 var t = __toESM(require("@babel/types"));
-function handleExoticImport(path, state, exoticImport) {
-  const specifiers = path.node.specifiers;
-  const source = path.node.source;
-  if (path.node.importKind !== "value") {
+function handleExoticImport(path2, state, exoticImport) {
+  const specifiers = path2.node.specifiers;
+  const source = path2.node.source;
+  if (path2.node.importKind !== "value") {
     return;
   }
   specifiers.forEach((specifier) => {
@@ -101,7 +104,7 @@ function handleExoticImport(path, state, exoticImport) {
             state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/components/native/${rule.mapTo}`) ?? "" : `react-native-unistyles/components/native/${rule.mapTo}`
           )
         );
-        path.replaceWith(newImport);
+        path2.replaceWith(newImport);
       } else {
         const newImport = t.importDeclaration(
           [t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
@@ -109,11 +112,11 @@ function handleExoticImport(path, state, exoticImport) {
             state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/components/native/${rule.mapTo}`) ?? "" : `react-native-unistyles/components/native/${rule.mapTo}`
           )
         );
-        path.node.specifiers = specifiers.filter((s) => s !== specifier);
-        if (path.node.specifiers.length === 0) {
-          path.replaceWith(newImport);
+        path2.node.specifiers = specifiers.filter((s) => s !== specifier);
+        if (path2.node.specifiers.length === 0) {
+          path2.replaceWith(newImport);
         } else {
-          path.insertBefore(newImport);
+          path2.insertBefore(newImport);
         }
       }
       return;
@@ -123,12 +126,12 @@ function handleExoticImport(path, state, exoticImport) {
 
 // plugin/src/import.ts
 var t2 = __toESM(require("@babel/types"));
-function addUnistylesImport(path, state) {
+function addUnistylesImport(path2, state) {
   const localNames = Object.keys(state.reactNativeImports);
   const names = Object.values(state.reactNativeImports);
   const pairs = Object.entries(state.reactNativeImports);
   const nodesToRemove = [];
-  path.node.body.forEach((node) => {
+  path2.node.body.forEach((node) => {
     if (t2.isImportDeclaration(node) && node.source.value === "react-native") {
       node.specifiers = node.specifiers.filter((specifier) => !localNames.some((name) => name === specifier.local.name));
       if (node.specifiers.length === 0) {
@@ -137,7 +140,7 @@ function addUnistylesImport(path, state) {
     }
   });
   names.forEach((name) => {
-    const rnWebImport = path.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`);
+    const rnWebImport = path2.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`);
     if (rnWebImport) {
       rnWebImport.specifiers = [];
     }
@@ -149,18 +152,41 @@ function addUnistylesImport(path, state) {
         state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/src/components/native/${name}`) ?? "" : `react-native-unistyles/components/native/${name}`
       )
     );
-    path.node.body.unshift(newImport);
+    path2.node.body.unshift(newImport);
   });
-  nodesToRemove.forEach((node) => path.node.body.splice(path.node.body.indexOf(node), 1));
+  nodesToRemove.forEach((node) => path2.node.body.splice(path2.node.body.indexOf(node), 1));
 }
 function isInsideNodeModules(state) {
-  return state.file.opts.filename?.includes("node_modules");
+  return state.file.opts.filename?.includes("node_modules") && !state.file.replaceWithUnistyles;
 }
+function addUnistylesRequire(path2, state) {
+  Object.entries(state.reactNativeImports).forEach(([componentName, uniqueName]) => {
+    const newRequire = t2.variableDeclaration("const", [
+      t2.variableDeclarator(
+        t2.identifier(uniqueName),
+        t2.callExpression(t2.identifier("require"), [
+          t2.stringLiteral(`react-native-unistyles/src/components/native/${componentName}`)
+        ])
+      )
+    ]);
+    path2.node.body.unshift(newRequire);
+  });
+}
+
+// plugin/src/paths.ts
+var import_node_path = __toESM(require("node:path"));
+var isWindows = process.platform === "win32";
+var toWinPath = (pathString) => {
+  return import_node_path.default.normalize(pathString).replace(/\//g, "\\");
+};
+var toPlatformPath = (pathString) => {
+  return isWindows ? toWinPath(pathString) : pathString;
+};
 
 // plugin/src/ref.ts
 var t3 = __toESM(require("@babel/types"));
-function hasStringRef(path) {
-  return path.node.openingElement.attributes.find(
+function hasStringRef(path2) {
+  return path2.node.openingElement.attributes.find(
     (attr) => t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: "ref" }) && t3.isStringLiteral(attr.value)
   );
 }
@@ -182,7 +208,8 @@ var UnistyleDependency = {
   FontScale: 11,
   StatusBar: 12,
   NavigationBar: 13,
-  Ime: 14
+  Ime: 14,
+  Rtl: 15
 };
 function getProperty(property) {
   if (!property) {
@@ -265,6 +292,9 @@ function toUnistylesDependency(dependency) {
     case "variants": {
       return UnistyleDependency.Variants;
     }
+    case "rtl": {
+      return UnistyleDependency.Rtl;
+    }
     default:
       return null;
   }
@@ -293,28 +323,47 @@ function stringToUniqueId(str) {
   const absHash = Math.abs(hash);
   return absHash % 1e9;
 }
-function isUnistylesStyleSheet(path, state) {
-  const { callee } = path.node;
-  if (t4.isMemberExpression(callee) && t4.isIdentifier(callee.property)) {
-    return callee.property.name === "create" && t4.isIdentifier(callee.object) && callee.object.name === state.file.styleSheetLocalName;
+function isUnistylesStyleSheet(path2, state) {
+  const { callee } = path2.node;
+  if (!t4.isMemberExpression(callee) || !t4.isIdentifier(callee.property)) {
+    return false;
+  }
+  const isImport = callee.property.name === "create" && t4.isIdentifier(callee.object) && callee.object.name === state.file.styleSheetLocalName;
+  const isRequire = state.file.hasUnistylesImport && callee.property.name === "create" && t4.isMemberExpression(callee.object) && t4.isIdentifier(callee.object.property) && t4.isIdentifier(callee.object.object) && callee.object.object.name === state.file.styleSheetLocalName && callee.object.property.name === "StyleSheet";
+  return isImport || isRequire;
+}
+function isUnistylesCommonJSRequire(path2, state) {
+  const isRequire = t4.isIdentifier(path2.node.callee) && path2.node.arguments.length > 0 && t4.isStringLiteral(path2.node.arguments[0]) && path2.node.arguments[0].value === "react-native-unistyles";
+  if (isRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
+    state.file.hasUnistylesImport = true;
+    state.file.styleSheetLocalName = path2.parent.id.name;
+  }
+  return isRequire;
+}
+function isReactNativeCommonJSRequire(path2, state) {
+  const isRequire = t4.isIdentifier(path2.node.callee) && path2.node.arguments.length > 0 && path2.node.callee.name === "require";
+  const requireImportName = path2.node.arguments.find((node) => t4.isStringLiteral(node));
+  const isReactNativeRequire = isRequire && requireImportName && (requireImportName.value === "react-native" || requireImportName.value === "react-native-web/dist/index");
+  if (isReactNativeRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
+    state.file.reactNativeCommonJSName = path2.parent.id.name;
   }
-  return false;
+  return isRequire;
 }
-function isKindOfStyleSheet(path, state) {
+function isKindOfStyleSheet(path2, state) {
   if (!state.file.forceProcessing && !state.file.hasUnistylesImport) {
     return false;
   }
-  const { callee } = path.node;
+  const { callee } = path2.node;
   return t4.isMemberExpression(callee) && t4.isIdentifier(callee.property) && callee.property.name === "create" && t4.isIdentifier(callee.object);
 }
-function addStyleSheetTag(path, state) {
+function addStyleSheetTag(path2, state) {
   const str = state.filename?.replace(state.cwd, "") ?? "";
   const uniqueId = stringToUniqueId(str) + ++state.file.tagNumber;
-  path.node.arguments.push(t4.numericLiteral(uniqueId));
+  path2.node.arguments.push(t4.numericLiteral(uniqueId));
 }
-function getStylesDependenciesFromObject(path) {
+function getStylesDependenciesFromObject(path2) {
   const detectedStylesWithVariants = /* @__PURE__ */ new Set();
-  const stylesheet = path.node.arguments[0];
+  const stylesheet = path2.node.arguments[0];
   if (t4.isObjectExpression(stylesheet)) {
     stylesheet?.properties.forEach((property) => {
       if (!t4.isObjectProperty(property) || !t4.isIdentifier(property.key)) {
@@ -359,8 +408,7 @@ function getStylesDependenciesFromObject(path) {
     return acc;
   }, {});
 }
-function getStylesDependenciesFromFunction(path) {
-  const funcPath = path.get("arguments.0");
+function getStylesDependenciesFromFunction(funcPath) {
   if (!funcPath) {
     return;
   }
@@ -614,8 +662,8 @@ function addDependencies(state, styleName, unistyle, detectedDependencies) {
 
 // plugin/src/variants.ts
 var t5 = __toESM(require("@babel/types"));
-function extractVariants(path, state) {
-  const maybeVariants = path.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
+function extractVariants(path2, state) {
+  const maybeVariants = path2.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
   if (maybeVariants.length === 0) {
     return;
   }
@@ -638,7 +686,7 @@ function extractVariants(path, state) {
     return;
   }
   const calleeName = callee.object.name;
-  const newUniqueName = path.scope.generateUidIdentifier(calleeName);
+  const newUniqueName = path2.scope.generateUidIdentifier(calleeName);
   const shadowDeclaration = t5.variableDeclaration("const", [
     t5.variableDeclarator(newUniqueName, t5.identifier(calleeName))
   ]);
@@ -649,14 +697,14 @@ function extractVariants(path, state) {
   const finalDeclaration = t5.variableDeclaration("const", [
     t5.variableDeclarator(t5.identifier(calleeName), newCallExpression)
   ]);
-  const pathIndex = path.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
-  const rest = path.node.body.slice(pathIndex + 1);
+  const pathIndex = path2.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
+  const rest = path2.node.body.slice(pathIndex + 1);
   const statement = t5.blockStatement([
     finalDeclaration,
     ...rest
   ]);
-  path.node.body = [
-    ...path.node.body.slice(0, pathIndex),
+  path2.node.body = [
+    ...path2.node.body.slice(0, pathIndex),
     shadowDeclaration,
     statement
   ];
@@ -665,52 +713,71 @@ function extractVariants(path, state) {
 
 // plugin/src/index.ts
 function index_default() {
+  if (process.env.NODE_ENV === "test") {
+    return {
+      name: "babel-react-native-unistyles",
+      visitor: {}
+    };
+  }
   return {
     name: "babel-react-native-unistyles",
     visitor: {
       Program: {
-        enter(_, state) {
-          state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.concat(state.opts.autoProcessPaths ?? []).some((path) => state.filename?.includes(path));
+        enter(path2, state) {
+          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;
+          state.file.addUnistylesRequire = false;
           state.file.hasVariants = false;
           state.file.styleSheetLocalName = "";
+          state.file.reactNativeCommonJSName = "";
           state.file.tagNumber = 0;
           state.reactNativeImports = {};
-          state.file.forceProcessing = state.opts.autoProcessRoot && state.filename ? state.filename.includes(`${state.file.opts.root}/${state.opts.autoProcessRoot}/`) : false;
+          state.file.forceProcessing = state.opts.autoProcessRoot && state.filename ? state.filename.includes(toPlatformPath(`${state.file.opts.root}/${state.opts.autoProcessRoot}/`)) : false;
+          path2.traverse({
+            BlockStatement(blockPath) {
+              if (isInsideNodeModules(state)) {
+                return;
+              }
+              extractVariants(blockPath, state);
+            }
+          });
         },
-        exit(path, state) {
-          if (isInsideNodeModules(state) && !state.file.replaceWithUnistyles) {
+        exit(path2, state) {
+          if (isInsideNodeModules(state)) {
             return;
           }
+          if (state.file.addUnistylesRequire) {
+            return addUnistylesRequire(path2, state);
+          }
           if (state.file.hasAnyUnistyle || state.file.hasVariants || state.file.replaceWithUnistyles || state.file.forceProcessing) {
-            addUnistylesImport(path, state);
+            addUnistylesImport(path2, state);
           }
         }
       },
-      FunctionDeclaration(path, state) {
+      FunctionDeclaration(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        const componentName = path.node.id ? path.node.id.name : null;
+        const componentName = path2.node.id ? path2.node.id.name : null;
         if (componentName) {
           state.file.hasVariants = false;
         }
       },
-      ClassDeclaration(path, state) {
+      ClassDeclaration(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        const componentName = path.node.id ? path.node.id.name : null;
+        const componentName = path2.node.id ? path2.node.id.name : null;
         if (componentName) {
           state.file.hasVariants = false;
         }
       },
-      VariableDeclaration(path, state) {
+      VariableDeclaration(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        path.node.declarations.forEach((declaration) => {
+        path2.node.declarations.forEach((declaration) => {
           if (t6.isArrowFunctionExpression(declaration.init) || t6.isFunctionExpression(declaration.init)) {
             const componentName = declaration.id && t6.isIdentifier(declaration.id) ? declaration.id.name : null;
             if (componentName) {
@@ -719,63 +786,83 @@ function index_default() {
           }
         });
       },
-      ImportDeclaration(path, state) {
+      ImportDeclaration(path2, state) {
         const exoticImport = REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find((exotic) => state.filename?.includes(exotic.path));
         if (exoticImport) {
-          return handleExoticImport(path, state, exoticImport);
+          return handleExoticImport(path2, state, exoticImport);
         }
-        if (isInsideNodeModules(state) && !state.file.replaceWithUnistyles) {
+        if (isInsideNodeModules(state)) {
           return;
         }
-        const importSource = path.node.source.value;
+        const importSource = path2.node.source.value;
         if (importSource.includes("react-native-unistyles")) {
           state.file.hasUnistylesImport = true;
-          path.node.specifiers.forEach((specifier) => {
+          path2.node.specifiers.forEach((specifier) => {
             if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && specifier.imported.name === "StyleSheet") {
               state.file.styleSheetLocalName = specifier.local.name;
             }
           });
         }
         if (importSource === "react-native") {
-          path.node.specifiers.forEach((specifier) => {
+          path2.node.specifiers.forEach((specifier) => {
             if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && REACT_NATIVE_COMPONENT_NAMES.includes(specifier.imported.name)) {
               state.reactNativeImports[specifier.local.name] = specifier.imported.name;
             }
           });
         }
         if (importSource.includes("react-native/Libraries")) {
-          handleExoticImport(path, state, NATIVE_COMPONENTS_PATHS);
+          handleExoticImport(path2, state, NATIVE_COMPONENTS_PATHS);
         }
         if (!state.file.forceProcessing && Array.isArray(state.opts.autoProcessImports)) {
           state.file.forceProcessing = state.opts.autoProcessImports.includes(importSource);
         }
       },
-      JSXElement(path, state) {
+      JSXElement(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        if (hasStringRef(path)) {
+        if (hasStringRef(path2)) {
           throw new Error("Detected string based ref which is not supported by Unistyles.");
         }
       },
-      BlockStatement(path, state) {
+      MemberExpression(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        extractVariants(path, state);
+        if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.object)) {
+          return;
+        }
+        if (path2.node.object.name !== state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.property)) {
+          return;
+        }
+        if (!REACT_NATIVE_COMPONENT_NAMES.includes(path2.node.property.name)) {
+          return;
+        }
+        if (!state.reactNativeImports[path2.node.property.name]) {
+          const uniqueId = path2.scope.generateUidIdentifier(`reactNativeUnistyles_${path2.node.property.name}`);
+          state.reactNativeImports[path2.node.property.name] = uniqueId.name;
+          state.file.addUnistylesRequire = true;
+        }
+        path2.node.object.name = state.reactNativeImports[path2.node.property.name];
       },
-      CallExpression(path, state) {
+      CallExpression(path2, state) {
         if (isInsideNodeModules(state)) {
           return;
         }
-        if (!isUnistylesStyleSheet(path, state) && !isKindOfStyleSheet(path, state)) {
+        if (isUnistylesCommonJSRequire(path2, state)) {
+          return;
+        }
+        if (isReactNativeCommonJSRequire(path2, state)) {
+          return;
+        }
+        if (!isUnistylesStyleSheet(path2, state) && !isKindOfStyleSheet(path2, state)) {
           return;
         }
         state.file.hasAnyUnistyle = true;
-        addStyleSheetTag(path, state);
-        const arg = path.node.arguments[0];
+        addStyleSheetTag(path2, state);
+        const arg = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.node.arguments[0].right : path2.node.arguments[0];
         if (t6.isObjectExpression(arg)) {
-          const detectedDependencies = getStylesDependenciesFromObject(path);
+          const detectedDependencies = getStylesDependenciesFromObject(path2);
           if (detectedDependencies) {
             if (t6.isObjectExpression(arg)) {
               arg.properties.forEach((property) => {
@@ -787,7 +874,8 @@ function index_default() {
           }
         }
         if (t6.isArrowFunctionExpression(arg) || t6.isFunctionExpression(arg)) {
-          const detectedDependencies = getStylesDependenciesFromFunction(path);
+          const funcPath = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.get("arguments.0.right") : path2.get("arguments.0");
+          const detectedDependencies = getStylesDependenciesFromFunction(funcPath);
           if (detectedDependencies) {
             const body = t6.isBlockStatement(arg.body) ? arg.body.body.find((statement) => t6.isReturnStatement(statement))?.argument : arg.body;
             if (t6.isObjectExpression(body)) {

package/reanimated/package.json

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

package/server/package.json

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

package/src/components/native/Image.native.tsx

@@ -0,0 +1,4 @@
+import { Image as NativeImage } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Image = createUnistylesElement(NativeImage)

package/src/components/native/Image.tsx

@@ -1,4 +1,37 @@
-import { Image as NativeImage } from 'react-native'
-import { createUnistylesElement } from '../../core'
+import React, { type ComponentProps, forwardRef } from 'react'
+import { type ImageStyle, Image as NativeImage, type StyleProp, type ViewStyle } from 'react-native'
+import { getClassName } from '../../core'
+import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
+import type { UnistylesValues } from '../../types'
+import { copyComponentProperties } from '../../utils'
+import { checkForProp } from '../../web/utils'
+import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
 
-export const Image = createUnistylesElement(NativeImage)
+type Props = ComponentProps<typeof NativeImage> & {
+    style?: UnistylesValues
+    imageStyle?: UnistylesValues
+}
+
+const UnistylesImage = forwardRef<unknown, Props>((props, forwardedRef) => {
+    const classNames = getClassName(props.style)
+    const ref = createUnistylesRef(classNames, forwardedRef)
+    const hasWidthStyle = checkForProp(props.style, 'width')
+    const hasHeightStyle = checkForProp(props.style, 'height')
+
+    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'Image')
+
+    return (
+        <NativeImage
+            {...props}
+            style={[
+                classNames,
+                // Clear inline width and height extracted from source
+                hasWidthStyle && { width: '' },
+                hasHeightStyle && { height: '' }
+            ] as StyleProp<ImageStyle>}
+            ref={ref}
+        />
+    )
+})
+
+export const Image = copyComponentProperties(NativeImage, UnistylesImage)

package/src/components/native/ImageBackground.tsx

@@ -2,10 +2,11 @@ import React from 'react'
 import { forwardRef } from 'react'
 import { type ImageStyle, ImageBackground as NativeImageBackground, type StyleProp, type ViewStyle } from 'react-native'
 import { getClassName } from '../../core'
+import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
-import { UnistylesShadowRegistry } from '../../web'
-import { isServer } from '../../web/utils'
+import { keyInObject } from '../../web/utils'
+import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
 
 type Props = {
     style?: UnistylesValues
@@ -13,44 +14,28 @@ type Props = {
 }
 
 const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
-    let storedRef: NativeImageBackground | null = null
-    let storedImageRef: NativeImageBackground | null = null
     const styleClassNames = getClassName(props.style)
     const imageClassNames = getClassName(props.imageStyle)
+    const ref = createUnistylesRef(styleClassNames, forwardedRef)
+    const imageRef = createUnistylesRef(imageClassNames)
+    const hasWidthStyle = typeof props.imageStyle === 'object' && keyInObject(props.imageStyle, 'width')
+    const hasHeightStyle = typeof props.imageStyle === 'object' && keyInObject(props.imageStyle, 'height')
+
+    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'ImageBackground')
+    maybeWarnAboutMultipleUnistyles(props.imageStyle as ViewStyle, 'ImageBackground')
 
     return (
         <NativeImageBackground
             {...props}
             style={styleClassNames as StyleProp<ViewStyle>}
-            imageStyle={imageClassNames as StyleProp<ImageStyle>}
-            ref={isServer() ? undefined : ref => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash)
-                }
-
-                storedRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-            imageRef={isServer() ? undefined : ref => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
-                }
-
-                storedImageRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
-            }}
+            imageStyle={[
+                imageClassNames,
+                // Clear inline width and height extracted from source
+                hasWidthStyle && { width: '' },
+                hasHeightStyle && { height: '' }
+            ] as StyleProp<ImageStyle>}
+            ref={ref}
+            imageRef={imageRef}
         />
     )
 })

package/src/components/native/Pressable.native.tsx

@@ -50,10 +50,18 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                     storedRef.current = ref
                 }
 
-                // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(storedRef.current, unistyles)
-
-                return passForwardedRef(props, ref, forwardedRef)
+                return passForwardedRef(
+                    ref,
+                    forwardedRef,
+                    () => {
+                        // @ts-expect-error - this is hidden from TS
+                        UnistylesShadowRegistry.add(ref, unistyles)
+                    },
+                    () => {
+                        // @ts-expect-error - this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    }
+                )
             }}
             style={state => {
                 const isPropStyleAFunction = typeof style === 'function'

package/src/core/createUnistylesElement.native.tsx

@@ -38,15 +38,21 @@ export const createUnistylesElement = (Component: any) => {
                         storedRef.current = getNativeRef(Component, ref)
                     }
 
-                    passForwardedRef(props, ref, forwardedRef)
-
                     // @ts-ignore we don't know the type of the component
                     maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
 
-                    return () => {
-                        // @ts-ignore
-                        UnistylesShadowRegistry.remove(ref)
-                    }
+                    return passForwardedRef(
+                        ref,
+                        forwardedRef,
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.add(ref, props.style)
+                        },
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.remove(ref)
+                        }
+                    )
                 }}
             />
         )