react-native-unistyles 3.0.0-rc.3 → 3.0.0-rc.5

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.themeName === '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,
+    previousScopedTheme?: string
+}
+
+export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({
+    name,
+    children,
+    previousScopedTheme
+}) => {
+    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>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/ScopedTheme.tsx

@@ -1,32 +1,52 @@
-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?: boolean
+} | {
+    name?: undefined,
+    invertedAdaptive: true
 }
 
-const Apply = ({ name }: { name?: keyof UnistylesThemes }) => {
-    UnistylesShadowRegistry.setScopedTheme(name)
+export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({
+    name,
+    children,
+    invertedAdaptive
+}) => {
+    const hasAdaptiveThemes = UnistylesRuntime.hasAdaptiveThemes
+    const isAdaptiveTheme = invertedAdaptive && hasAdaptiveThemes
 
-    useLayoutEffect(() => {
-        UnistylesShadowRegistry.setScopedTheme(name)
-    })
+    if (invertedAdaptive && !hasAdaptiveThemes) {
+        return children
+    }
 
-    return null
-}
+    if (!invertedAdaptive && !name) {
+        if (__DEV__) {
+            console.error('ScopedTheme: name or invertedAdaptive must be provided')
+        }
+
+        return null
+    }
 
-export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({ name, children }) => {
     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>
-    )
+
+    return isAdaptiveTheme
+        ? (
+            <AdaptiveTheme previousScopedTheme={previousScopedTheme}>
+                {children}
+            </AdaptiveTheme>
+        )
+        : (
+            <NamedTheme
+                name={name as keyof UnistylesThemes}
+                previousScopedTheme={previousScopedTheme}
+            >
+                {children}
+            </NamedTheme>
+        )
+
 }

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)
 }

package/src/core/createUnistylesElement.tsx

@@ -34,14 +34,14 @@ const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef
 }
 
 export const createUnistylesElement = (Component: any) => {
-    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
+    const UnistylesComponent = (props: any) => {
         return (
             <Component
                 {...props}
-                {...buildUnistylesProps(Component, props, forwardedRef)}
+                {...buildUnistylesProps(Component, props, props.ref)}
             />
         )
-    })
+    }
 
     return copyComponentProperties(Component, UnistylesComponent)
 }

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/core/parseBoxShadow.ts

@@ -0,0 +1,87 @@
+import { processColor } from 'react-native'
+
+type BoxShadow = {
+    inset?: boolean
+    offsetX?: number
+    offsetY?: number
+    blurRadius?: number
+    spreadDistance?: number
+    color?: string
+}
+
+const isValue = (str: string | undefined) => str && (str === '0' || str.endsWith('px'))
+
+const parseBoxShadow = (str: string): BoxShadow | undefined => {
+    if (str === 'none') {
+        return undefined
+    }
+
+    // split by space, but not if it's inside of ()
+    const parts = str.split(/\s+(?![^(]*\))/)
+    const lastIndex = parts.length - 1
+    const insetIndex = parts.findIndex(part => part === 'inset')
+
+    // inset can only be at the start or end
+    if (![-1, 0, lastIndex].includes(insetIndex)) {
+        return undefined
+    }
+
+    // if there is no inset, color can only be at the start or end
+    const maybeColorsIndexes = insetIndex === -1
+        ? [0, lastIndex]
+        : insetIndex === lastIndex
+            ? [0, lastIndex - 1]
+            : [1, lastIndex]
+
+    const colorIndex = maybeColorsIndexes.find(index => !isValue(parts[index])) ?? -1
+    const maybeColor = colorIndex !== -1
+        ? parts[colorIndex]
+        : undefined
+    const color = maybeColor && processColor(maybeColor)
+        ? parts[colorIndex]
+        : undefined
+    const values = parts.filter((_, index) => index !== colorIndex && index !== insetIndex)
+
+    // at this point there can be only 4 values
+    if (values.length > 4) {
+        return undefined
+    }
+
+    const [offsetX, offsetY, blurRadius, spreadRadius] = values
+
+    if (!isValue(offsetX) || !isValue(offsetY)) {
+        return undefined
+    }
+
+    const blurRadiusValue = isValue(blurRadius)
+        ? Number.parseFloat(blurRadius as string)
+        : undefined
+
+    if (blurRadiusValue !== undefined && blurRadiusValue < 0) {
+        return undefined
+    }
+
+    return {
+        inset: insetIndex !== -1
+            ? true
+            : undefined,
+        offsetX: Number.parseFloat(offsetX as string),
+        offsetY: Number.parseFloat(offsetY as string),
+        blurRadius: blurRadiusValue ?? 0,
+        spreadDistance: spreadRadius
+            ? Number.parseFloat(spreadRadius as string)
+            : 0,
+        color
+    }
+}
+
+export const parseBoxShadowString = (str: string): Array<BoxShadow> => {
+    const parts = str
+        .split(/,(?![^()]*\))/)
+        .map(part => part.trim().replace('\n', ''))
+        .filter(Boolean)
+        .map(parseBoxShadow)
+        .filter(Boolean) as Array<BoxShadow>
+
+    return parts
+}

package/src/core/withUnistyles/withUnistyles.native.tsx

@@ -26,6 +26,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
+
     const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
         const styles = Array.isArray(styleProps)
             ? styleProps.flat()

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/mocks.ts

@@ -65,6 +65,8 @@ jest.mock('react-native-unistyles', () => {
         colorScheme: 'unspecified' as ColorScheme,
         contentSizeCategory: 'Medium' as IOSContentSizeCategory,
         orientation: 'portrait' as Orientation,
+        isPortrait: true,
+        isLandscape: false,
         breakpoints: {},
         dispose: () => { },
         equals: () => false,
@@ -91,7 +93,7 @@ jest.mock('react-native-unistyles', () => {
         pixelRatio: 0,
         rtl: false,
         getTheme: () => {
-            return {} as UnistylesTheme
+            return (Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme
         },
         setTheme: () => {},
         updateTheme: () => {},
@@ -200,7 +202,8 @@ jest.mock('react-native-unistyles', () => {
                 }
             },
             jsMethods: {
-                processColor: () => null
+                processColor: () => null,
+                parseBoxShadowString: () => []
             },
             hairlineWidth: 1,
             unid: -1,

package/src/reanimated/index.ts

@@ -0,0 +1,2 @@
+export { useAnimatedTheme } from './useAnimatedTheme'
+export { useAnimatedVariantColor } from './variant'

package/src/reanimated/useAnimatedTheme.native.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+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(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        // @ts-ignore this is hidden from TS
+        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+            if (changedDependencies.includes(UnistyleDependency.Theme)) {
+                theme.set(UnistylesRuntime.getTheme())
+            }
+        })
+
+        return () => dispose()
+    }, [])
+
+    return theme as SharedValue<UnistylesTheme>
+}

package/src/reanimated/useAnimatedTheme.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+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(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
+
+        return () => {
+            dispose()
+        }
+    }, [])
+
+    return theme as SharedValue<UnistylesTheme>
+}

package/src/reanimated/variant/index.ts

@@ -0,0 +1 @@
+export * from './useAnimatedVariantColor'

package/src/reanimated/variant/types.ts

@@ -0,0 +1,14 @@
+export type ColorKeys<T> = {
+    [K in keyof T]: K extends string
+        ? K extends `${string}color${string}` | `${string}Color${string}`
+            ? K
+            : never
+        : never
+}[keyof T]
+
+export type UseUpdateVariantColorConfig<T extends Record<string, any>> = {
+    animateCallback?: (from: string, to: string) => void,
+    colorKey: ColorKeys<T>,
+    style: T,
+    secretKey: string | undefined
+}