react-native-unistyles 3.5.3 → 3.6.0

package/metro/index.d.ts

@@ -0,0 +1,31 @@
+type MetroConfig = {
+    transformer?: {
+        babelTransformerPath?: string
+    }
+    resolver?: {
+        resolveRequest?: ((...args: Array<any>) => any) | null
+    }
+}
+
+export interface UnistylesMetroOptions {
+    /**
+     * Logs the dependencies detected in every StyleSheet, same as the `debug` option of the Babel plugin
+     */
+    debug?: boolean
+}
+
+/**
+ * Experimental, replaces `react-native-unistyles/plugin` in babel.config.js
+ *
+ * Every `react-native` import (also from node_modules) resolves to Unistyles components
+ * and StyleSheets are processed by the Unistyles Babel plugin, run by Metro.
+ * There is nothing to configure: no `root`, `autoProcessImports`, `autoProcessPaths` or `autoRemapImports`.
+ *
+ * ```js
+ * const { getDefaultConfig } = require('expo/metro-config')
+ * const { withUnistylesConfig } = require('react-native-unistyles/metro')
+ *
+ * module.exports = withUnistylesConfig(getDefaultConfig(__dirname))
+ * ```
+ */
+export declare const withUnistylesConfig: <T extends MetroConfig>(config: T, options?: UnistylesMetroOptions) => T

package/metro/index.js

@@ -0,0 +1,170 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// metro/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  withUnistylesConfig: () => withUnistylesConfig
+});
+module.exports = __toCommonJS(index_exports);
+var import_node_fs = __toESM(require("node:fs"));
+var import_node_path2 = __toESM(require("node:path"));
+
+// 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",
+  "SafeAreaView"
+  // Modal - there is no exposed native handle
+  // TouchableWithoutFeedback - can't accept a ref
+];
+var METRO_UPSTREAM_TRANSFORMER_ENV = "UNISTYLES_METRO_UPSTREAM_TRANSFORMER";
+var METRO_OPTIONS_ENV = "UNISTYLES_METRO_OPTIONS";
+
+// metro/src/resolver.ts
+var import_node_path = __toESM(require("node:path"));
+var DEEP_IMPORTS = [...REACT_NATIVE_COMPONENT_NAMES, "ViewNativeComponent", "TextNativeComponent"];
+var PASSTHROUGH_PACKAGES = ["react-native", "@react-native", "react-native-web"];
+var createResolveRequest = ({ unistylesRoot, upstream, path: path2 = import_node_path.default }) => {
+  const { sep } = path2;
+  const sourceDir = path2.join(unistylesRoot, "src");
+  const componentsDir = path2.join(sourceDir, "components", "native");
+  const componentsIndex = path2.join(componentsDir, "index.ts");
+  const builds = [path2.join(unistylesRoot, "lib", "module"), path2.join(unistylesRoot, "lib", "commonjs")];
+  const getSourcePath = (filePath) => {
+    const build = builds.find((buildDir) => filePath.startsWith(`${buildDir}${sep}`));
+    if (!build) {
+      return void 0;
+    }
+    const modulePath = filePath.slice(build.length + 1).replace(/\.js$/, "").replace(/\.(native|ios|android|web)$/, "");
+    return path2.join(sourceDir, modulePath);
+  };
+  const getPackageName = (filePath) => {
+    const parts = filePath.split(`${sep}node_modules${sep}`);
+    if (parts.length === 1) {
+      return void 0;
+    }
+    const segments = parts.at(-1).split(sep);
+    return segments[0]?.startsWith("@") ? `${segments[0]}${sep}${segments[1]}` : segments[0];
+  };
+  const shouldSwapFrom = (originModulePath) => {
+    if (originModulePath.startsWith(`${unistylesRoot}${sep}`)) {
+      return false;
+    }
+    const packageName = getPackageName(originModulePath);
+    return !PASSTHROUGH_PACKAGES.some((name) => packageName === name || packageName?.startsWith(`${name}${sep}`));
+  };
+  const getDeepImport = (filePath) => {
+    const segments = filePath.split(sep);
+    if (segments.at(-5) === "react-native-web" && segments.at(-4) === "dist" && segments.at(-3) === "exports") {
+      return segments.at(-2);
+    }
+    if (filePath.includes(`${sep}react-native${sep}Libraries${sep}`)) {
+      return segments.at(-1)?.split(".").at(0);
+    }
+    return void 0;
+  };
+  const getSwapTarget = (moduleName, filePath) => {
+    if (moduleName === "react-native" || filePath.endsWith(`${sep}react-native-web${sep}dist${sep}index.js`)) {
+      return componentsIndex;
+    }
+    const deepImport = getDeepImport(filePath);
+    return deepImport && DEEP_IMPORTS.includes(deepImport) ? path2.join(componentsDir, "deep", `${deepImport}.ts`) : void 0;
+  };
+  return (context, moduleName, platform) => {
+    const resolve = upstream ?? context.resolveRequest;
+    const resolution = resolve(context, moduleName, platform);
+    if (resolution.type !== "sourceFile" || !("filePath" in resolution)) {
+      return resolution;
+    }
+    const sourcePath = getSourcePath(resolution.filePath);
+    if (sourcePath) {
+      return resolve(context, sourcePath, platform);
+    }
+    if (!shouldSwapFrom(context.originModulePath)) {
+      return resolution;
+    }
+    const swapTarget = getSwapTarget(moduleName, resolution.filePath);
+    return swapTarget ? { type: "sourceFile", filePath: swapTarget } : resolution;
+  };
+};
+
+// metro/src/index.ts
+var withUnistylesConfig = (config, options = {}) => {
+  const babelTransformerPath = import_node_path2.default.join(__dirname, "babel-transformer.js");
+  const upstreamBabelTransformerPath = config.transformer?.babelTransformerPath;
+  if (upstreamBabelTransformerPath === babelTransformerPath) {
+    throw new Error("Unistyles \u{1F984}: withUnistylesConfig was applied twice to the same Metro config");
+  }
+  if (!upstreamBabelTransformerPath) {
+    throw new Error(
+      "Unistyles \u{1F984}: Metro config has no babelTransformerPath, pass the config returned by getDefaultConfig to withUnistylesConfig"
+    );
+  }
+  const unistylesOptions = {
+    debug: options.debug ?? false
+  };
+  process.env[METRO_UPSTREAM_TRANSFORMER_ENV] = upstreamBabelTransformerPath;
+  process.env[METRO_OPTIONS_ENV] = JSON.stringify(unistylesOptions);
+  return {
+    ...config,
+    transformer: {
+      ...config.transformer,
+      babelTransformerPath,
+      // part of Metro's transform cache key
+      unistyles: unistylesOptions
+    },
+    resolver: {
+      ...config.resolver,
+      resolveRequest: createResolveRequest({
+        unistylesRoot: import_node_fs.default.realpathSync(import_node_path2.default.join(__dirname, "..")),
+        upstream: config.resolver?.resolveRequest
+      })
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withUnistylesConfig
+});

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
-    "test": "NODE_ENV=babel-test jest ./plugin ./src/__tests__",
+    "test": "NODE_ENV=babel-test jest ./plugin ./metro ./src/__tests__",
     "test:coverage": "NODE_ENV=babel-test jest --passWithNoTests --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
-    "format": "oxfmt src plugin repack-plugin",
-    "lint": "oxlint src plugin repack-plugin",
-    "check": "oxfmt src plugin repack-plugin && oxlint --fix src plugin repack-plugin",
-    "check:ci": "oxfmt --check src plugin repack-plugin && oxlint src plugin repack-plugin",
-    "prepare": "bob build && bun run plugin:build && bun run repack:plugin:build",
+    "format": "oxfmt src plugin repack-plugin metro",
+    "lint": "oxlint src plugin repack-plugin metro",
+    "check": "oxfmt src plugin repack-plugin metro && oxlint --fix src plugin repack-plugin metro",
+    "check:ci": "oxfmt --check src plugin repack-plugin metro && oxlint src plugin repack-plugin metro",
+    "prepare": "bob build && bun run plugin:build && bun run repack:plugin:build && bun run metro:build",
     "precommit": "concurrently 'bun run tsc' 'bun run lint' 'bun run check' 'bun run test' 'bun run circular:check'",
     "plugin:build": "node plugin/esbuild.js",
     "repack:plugin:build": "node repack-plugin/esbuild.js",
+    "metro:build": "node metro/esbuild.js",
     "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 src/**/*.ts",
     "components:build": "node build-components.js"
   },
@@ -53,6 +54,10 @@
       "types": "./repack-plugin/index.d.ts",
       "default": "./repack-plugin/index.js"
     },
+    "./metro": {
+      "types": "./metro/index.d.ts",
+      "default": "./metro/index.js"
+    },
     "./package.json": "./package.json",
     "./server": {
       "types": "./lib/typescript/src/server/index.d.ts",
@@ -100,6 +105,7 @@
     "react-native.config.js",
     "Unistyles.podspec",
     "repack-plugin",
+    "metro",
     "unistyles_get_rn_version.rb",
     "!repack-plugin/__tests__",
     "!repack-plugin/src",
@@ -107,6 +113,9 @@
     "!plugin/__tests__",
     "!plugin/src",
     "!plugin/esbuild.js",
+    "!metro/__tests__",
+    "!metro/src",
+    "!metro/esbuild.js",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -115,7 +124,13 @@
     "!android/local.properties",
     "!**/*.spec.ts",
     "!**/*.spec.tsx",
-    "!**/.*"
+    "!**/__tests__",
+    "!**/.*",
+    "!src/unifiber/test",
+    "!src/unifiber/bench",
+    "!src/unifiber/package.json",
+    "!src/unifiber/tsconfig.json",
+    "!src/unifiber/bun.lock"
   ],
   "keywords": [
     "react-native",
@@ -151,10 +166,12 @@
     "dpdm": "4.3.0",
     "esbuild": "0.28.2",
     "jest": "30.5.2",
+    "@babel/core": "7.29.7",
     "@babel/plugin-syntax-jsx": "7.29.7",
     "@babel/runtime": "7.29.7",
     "@react-native/babel-preset": "0.87.1",
     "@react-native/jest-preset": "0.87.1",
+    "@react-native/metro-babel-transformer": "0.87.1",
     "nitrogen": "0.37.1",
     "oxfmt": "0.70.0",
     "oxlint": "1.85.0",
@@ -209,6 +226,7 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
+    "exclude": "{**/{__tests__,__fixtures__,__mocks__}/**,**/unifiber/{test,bench}/**,**/unifiber/*}",
     "targets": [
       "commonjs",
       "module",

package/plugin/index.d.ts

@@ -44,6 +44,13 @@ export interface UnistylesPluginOptions {
      */
     root: string
 
+    /**
+     * Set by react-native-unistyles/metro, don't use it!
+     * Metro picks the files to process and swaps imports in its resolver,
+     * so `root`, `autoProcessImports`, `autoProcessPaths` and `autoRemapImports` are ignored
+     */
+    isMetro?: boolean
+
     /**
      * Example: ['@my-org/styles']
      * Enable this option if you want to process only files containing specific imports.

package/plugin/index.js

@@ -91,6 +91,7 @@ var NATIVE_COMPONENTS_PATHS = {
     }
   ]
 };
+var METRO_UPSTREAM_TRANSFORMER_ENV = "UNISTYLES_METRO_UPSTREAM_TRANSFORMER";
 
 // plugin/src/exotic.ts
 var t2 = __toESM(require("@babel/types"));
@@ -139,6 +140,9 @@ function addUnistylesImport(path2, state) {
   nodesToRemove.forEach((node) => path2.node.body.splice(path2.node.body.indexOf(node), 1));
 }
 function isInsideNodeModules(state) {
+  if (state.opts.isMetro) {
+    return false;
+  }
   return state.file.opts.filename?.includes("node_modules") && !state.file.replaceWithUnistyles;
 }
 function addUnistylesRequire(path2, state) {
@@ -719,6 +723,7 @@ function addDependencies(state, styleName, unistyle, detectedDependencies) {
 
 // plugin/src/variants.ts
 var t5 = __toESM(require("@babel/types"));
+var scopedVariants = /* @__PURE__ */ new WeakMap();
 function extractVariants(path2, state) {
   const maybeVariants = path2.node.body.filter(
     (node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee)
@@ -745,22 +750,29 @@ function extractVariants(path2, state) {
     return;
   }
   const calleeName = callee.object.name;
-  const newUniqueName = path2.scope.generateUidIdentifier(calleeName);
-  const shadowDeclaration = t5.variableDeclaration("const", [
-    t5.variableDeclarator(newUniqueName, t5.identifier(calleeName))
-  ]);
+  const binding = path2.scope.getBinding(calleeName);
+  const existingShadowName = binding && t5.isVariableDeclarator(binding.path.node) ? scopedVariants.get(binding.path.node) : void 0;
+  const shadowName = existingShadowName ?? path2.scope.generateUidIdentifier(calleeName).name;
   const newCallExpression = t5.callExpression(
-    t5.memberExpression(t5.identifier(newUniqueName.name), t5.identifier("useVariants")),
+    t5.memberExpression(t5.identifier(shadowName), t5.identifier("useVariants")),
     node.arguments
   );
-  const finalDeclaration = t5.variableDeclaration("const", [
-    t5.variableDeclarator(t5.identifier(calleeName), newCallExpression)
-  ]);
+  const finalDeclarator = t5.variableDeclarator(t5.identifier(calleeName), newCallExpression);
+  const finalDeclaration = t5.variableDeclaration("const", [finalDeclarator]);
+  scopedVariants.set(finalDeclarator, shadowName);
   const pathIndex = path2.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
   const rest = path2.node.body.slice(pathIndex + 1);
   const statement = t5.blockStatement([finalDeclaration, ...rest]);
-  path2.node.body = [...path2.node.body.slice(0, pathIndex), shadowDeclaration, statement];
   state.file.hasVariants = true;
+  if (existingShadowName) {
+    path2.node.body = [...path2.node.body.slice(0, pathIndex), statement];
+    return;
+  }
+  const shadowDeclaration = t5.variableDeclaration("const", [
+    t5.variableDeclarator(t5.identifier(shadowName), t5.identifier(calleeName))
+  ]);
+  path2.node.body = [...path2.node.body.slice(0, pathIndex), shadowDeclaration, statement];
+  path2.scope.registerDeclaration(path2.get(`body.${pathIndex}`));
 }
 
 // plugin/src/index.ts
@@ -776,13 +788,18 @@ function index_default() {
     visitor: {
       Program: {
         enter(path2, state) {
-          if (!state.opts.root) {
+          if (!state.opts.isMetro && process.env[METRO_UPSTREAM_TRANSFORMER_ENV]) {
+            throw new Error(
+              "Unistyles \u{1F984}: react-native-unistyles/metro is enabled in metro.config.js, remove react-native-unistyles/plugin from babel.config.js"
+            );
+          }
+          if (!state.opts.root && !state.opts.isMetro) {
             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) {
+          const appRoot = toPlatformPath(import_node_path2.default.join(state.file.opts.root, state.opts.root ?? ""));
+          if (!state.opts.isMetro && 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"
             );
@@ -797,7 +814,7 @@ function index_default() {
           state.file.styleSheetLocalName = "";
           state.file.reactNativeCommonJSName = "";
           state.reactNativeImports = {};
-          state.file.forceProcessing = state.filename?.includes(appRoot) ?? false;
+          state.file.forceProcessing = state.opts.isMetro || (state.filename?.includes(appRoot) ?? false);
           path2.traverse({
             BlockStatement(blockPath) {
               if (isInsideNodeModules(state)) {
@@ -808,7 +825,7 @@ function index_default() {
           });
         },
         exit(path2, state) {
-          if (isInsideNodeModules(state)) {
+          if (state.opts.isMetro || isInsideNodeModules(state)) {
             return;
           }
           if (state.file.addUnistylesRequire) {
@@ -851,7 +868,7 @@ function index_default() {
         });
       },
       ImportDeclaration(path2, state) {
-        const exoticImport = REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find(
+        const exoticImport = state.opts.isMetro ? void 0 : REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find(
           (exotic) => state.filename?.includes(exotic.path)
         );
         if (exoticImport) {
@@ -869,6 +886,9 @@ function index_default() {
             }
           });
         }
+        if (state.opts.isMetro) {
+          return;
+        }
         if (importSource === "react-native") {
           path2.node.specifiers.forEach((specifier) => {
             if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && REACT_NATIVE_COMPONENT_NAMES.includes(specifier.imported.name)) {
@@ -892,7 +912,7 @@ function index_default() {
         }
       },
       MemberExpression(path2, state) {
-        if (isInsideNodeModules(state)) {
+        if (state.opts.isMetro || isInsideNodeModules(state)) {
           return;
         }
         if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.object)) {

package/src/components/native/deep/ActivityIndicator.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the ActivityIndicator module of react-native or react-native-web here
+export { ActivityIndicator, ActivityIndicator as default } from '../ActivityIndicator'

package/src/components/native/deep/Animated.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Animated module of react-native or react-native-web here
+export { Animated, Animated as default } from '../Animated'

package/src/components/native/deep/FlatList.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the FlatList module of react-native or react-native-web here
+export { FlatList, FlatList as default } from '../FlatList'

package/src/components/native/deep/Image.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Image module of react-native or react-native-web here
+export { Image, Image as default } from '../Image'

package/src/components/native/deep/ImageBackground.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the ImageBackground module of react-native or react-native-web here
+export { ImageBackground, ImageBackground as default } from '../ImageBackground'

package/src/components/native/deep/KeyboardAvoidingView.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the KeyboardAvoidingView module of react-native or react-native-web here
+export { KeyboardAvoidingView, KeyboardAvoidingView as default } from '../KeyboardAvoidingView'

package/src/components/native/deep/Pressable.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Pressable module of react-native or react-native-web here
+export { Pressable, Pressable as default } from '../Pressable'

package/src/components/native/deep/RefreshControl.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the RefreshControl module of react-native or react-native-web here
+export { RefreshControl, RefreshControl as default } from '../RefreshControl'

package/src/components/native/deep/SafeAreaView.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the SafeAreaView module of react-native or react-native-web here
+export { SafeAreaView, SafeAreaView as default } from '../SafeAreaView'

package/src/components/native/deep/ScrollView.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the ScrollView module of react-native or react-native-web here
+export { ScrollView, ScrollView as default } from '../ScrollView'

package/src/components/native/deep/SectionList.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the SectionList module of react-native or react-native-web here
+export { SectionList, SectionList as default } from '../SectionList'

package/src/components/native/deep/Switch.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Switch module of react-native or react-native-web here
+export { Switch, Switch as default } from '../Switch'

package/src/components/native/deep/Text.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Text module of react-native or react-native-web here
+export { Text, Text as default } from '../Text'

package/src/components/native/deep/TextInput.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the TextInput module of react-native or react-native-web here
+export { TextInput, TextInput as default } from '../TextInput'

package/src/components/native/deep/TextNativeComponent.ts

@@ -0,0 +1,5 @@
+// react-native-unistyles/metro resolves direct imports of react-native/Libraries/Text/TextNativeComponent here,
+// its other exports (eg. NativeVirtualText) stay untouched
+// @ts-ignore deep imports are typed only by some React Native versions
+export * from 'react-native/Libraries/Text/TextNativeComponent'
+export { NativeText } from '../NativeText'

package/src/components/native/deep/TouchableHighlight.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the TouchableHighlight module of react-native or react-native-web here
+export { TouchableHighlight, TouchableHighlight as default } from '../TouchableHighlight'

package/src/components/native/deep/TouchableOpacity.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the TouchableOpacity module of react-native or react-native-web here
+export { TouchableOpacity, TouchableOpacity as default } from '../TouchableOpacity'

package/src/components/native/deep/View.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the View module of react-native or react-native-web here
+export { View, View as default } from '../View'

package/src/components/native/deep/ViewNativeComponent.ts

@@ -0,0 +1,5 @@
+// react-native-unistyles/metro resolves direct imports of react-native/Libraries/Components/View/ViewNativeComponent here,
+// its other exports stay untouched
+// @ts-ignore deep imports are typed only by some React Native versions
+export * from 'react-native/Libraries/Components/View/ViewNativeComponent'
+export { NativeView as default } from '../NativeView'

package/src/components/native/deep/VirtualizedList.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the VirtualizedList module of react-native or react-native-web here
+export { VirtualizedList, VirtualizedList as default } from '../VirtualizedList'

package/src/components/native/index.ts

@@ -0,0 +1,41 @@
+// react-native-unistyles/metro resolves every `react-native` import (react-native-web on web) to this module,
+// so it exposes every export of react-native and swaps the components Unistyles can update.
+// Imports from this folder are Unistyles' own, they reach the real react-native
+const ReactNative: Record<string, unknown> = require('react-native')
+
+// lazy, like react-native's own exports
+const UNISTYLES_COMPONENTS: Record<string, () => unknown> = {
+    ActivityIndicator: () => require('./ActivityIndicator').ActivityIndicator,
+    Animated: () => require('./Animated').Animated,
+    FlatList: () => require('./FlatList').FlatList,
+    Image: () => require('./Image').Image,
+    ImageBackground: () => require('./ImageBackground').ImageBackground,
+    KeyboardAvoidingView: () => require('./KeyboardAvoidingView').KeyboardAvoidingView,
+    Pressable: () => require('./Pressable').Pressable,
+    RefreshControl: () => require('./RefreshControl').RefreshControl,
+    SafeAreaView: () => require('./SafeAreaView').SafeAreaView,
+    ScrollView: () => require('./ScrollView').ScrollView,
+    SectionList: () => require('./SectionList').SectionList,
+    Switch: () => require('./Switch').Switch,
+    Text: () => require('./Text').Text,
+    TextInput: () => require('./TextInput').TextInput,
+    TouchableHighlight: () => require('./TouchableHighlight').TouchableHighlight,
+    TouchableOpacity: () => require('./TouchableOpacity').TouchableOpacity,
+    View: () => require('./View').View,
+    VirtualizedList: () => require('./VirtualizedList').VirtualizedList,
+    unstable_NativeText: () => require('./NativeText').NativeText,
+    unstable_NativeView: () => require('./NativeView').NativeView,
+}
+
+// Object.keys doesn't call react-native's getters. Unistyles components are added even if missing,
+// react-native-web and React Native before 0.83 don't export unstable_NativeView / unstable_NativeText
+const exportNames = new Set(Object.keys(ReactNative).concat(Object.keys(UNISTYLES_COMPONENTS)))
+
+exportNames.forEach((name) => {
+    // CommonJS without the __esModule flag, like react-native, so a default import still gets every export
+    // @ts-ignore module is provided by Metro
+    Object.defineProperty(module.exports, name, {
+        enumerable: true,
+        get: UNISTYLES_COMPONENTS[name] ?? (() => ReactNative[name]),
+    })
+})

package/src/core/createUnistylesActivityIndicator.tsx

@@ -2,18 +2,21 @@ import type { ActivityIndicator } from 'react-native'
 
 import React, { useContext } from 'react'
 
-import { isAndroid } from '../common'
 import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
+import { Fiber } from '../unifiber/src'
 import { copyComponentProperties } from '../utils'
+import { hasUnistyles } from './hasUnistyles'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-const getWrapperHandle = (ref: any) => {
-    const spinner = ref?.__internalInstanceHandle
+const { getHostFor, getParentHost } = Fiber
+
+const getWrapperHandle = (ref: unknown) => {
+    const spinner = getHostFor(ref)
 
     return {
-        __internalInstanceHandle: isAndroid ? spinner?.return?.return : spinner?.return,
+        __internalInstanceHandle: spinner && getParentHost(spinner),
     }
 }
 
@@ -21,6 +24,10 @@ export const createUnistylesActivityIndicator = (Component: typeof ActivityIndic
     const UnistylesActivityIndicator = (props: any) => {
         const scope = useContext(ScopedThemeContext)
 
+        if (!hasUnistyles(props.style)) {
+            return <Component {...props} />
+        }
+
         return (
             <Component
                 {...props}

package/src/core/createUnistylesElement.native.tsx

@@ -5,6 +5,7 @@ import React, { useContext, useRef } from 'react'
 import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
+import { hasUnistyles } from './hasUnistyles'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
@@ -13,6 +14,10 @@ export const createUnistylesElement = (Component: any) => {
         const scrollViewRef = useRef<ScrollView>(null)
         const scope = useContext(ScopedThemeContext)
 
+        if (!hasUnistyles(props.style)) {
+            return <Component {...props} />
+        }
+
         return (
             <Component
                 {...props}