fix: default variant not being applied when setting variant property name

src/composeRestyleFunctions.ts

@@ -23,10 +23,12 @@ const composeRestyleFunctions = <
     },
     [],
   );
-
-  const properties = flattenedRestyleFunctions.map(styleFunc => {
-    return styleFunc.property;
-  });
+  const variantProp = flattenedRestyleFunctions.find(
+    item => item.variant === true,
+  );
+  const properties = flattenedRestyleFunctions.map(
+    styleFunc => styleFunc.property,
+  );
   const propertiesMap = properties.reduce(
     (acc, prop) => ({...acc, [prop]: true}),
     {} as Record<keyof TProps, true>,
@@ -62,6 +64,7 @@ const composeRestyleFunctions = <
     buildStyle,
     properties,
     propertiesMap,
+    variantProp: variantProp ? variantProp.property : 'variant',
   };
 };
 

src/hooks/useRestyle.ts

@@ -1,22 +1,30 @@
 import {useMemo} from 'react';
 import {StyleProp} from 'react-native';
 
-import {BaseTheme, RNStyle, Dimensions} from '../types';
+import {
+  BaseTheme,
+  RNStyle,
+  Dimensions,
+  RestyleFunctionContainer,
+} from '../types';
 import {getKeys} from '../typeHelpers';
 
 import useDimensions from './useDimensions';
 import useTheme from './useTheme';
 
 const filterRestyleProps = <
   TRestyleProps,
-  TProps extends Record<string, unknown> & TRestyleProps
+  TProps extends Record<string, unknown> & TRestyleProps,
+  Theme extends BaseTheme
 >(
   componentProps: TProps,
   omitPropertiesMap: Record<keyof TProps, boolean>,
+  variant: RestyleFunctionContainer<TProps, Theme>['property'],
 ) => {
-  const props = omitPropertiesMap.variant
-    ? {variant: 'defaults', ...componentProps}
+  const props = omitPropertiesMap[variant]
+    ? {[variant]: 'defaults', ...componentProps}
     : componentProps;
+
   return getKeys(props).reduce(
     ({cleanProps, restyleProps, serializedRestyleProps}, key) => {
       if (omitPropertiesMap[key as keyof TProps]) {
@@ -59,6 +67,7 @@ const useRestyle = <
     ) => RNStyle;
     properties: (keyof TProps)[];
     propertiesMap: Record<keyof TProps, boolean>;
+    variantProp: RestyleFunctionContainer<TProps, Theme>['property'];
   },
   props: TProps,
 ) => {
@@ -68,6 +77,7 @@ const useRestyle = <
   const {cleanProps, restyleProps, serializedRestyleProps} = filterRestyleProps(
     props,
     composedRestyleFunction.propertiesMap,
+    composedRestyleFunction.variantProp,
   );
 
   const calculatedStyle = useMemo(() => {

src/test/createRestyleComponent.test.tsx

@@ -74,6 +74,10 @@ const Component = createRestyleComponent<
 const cardVariant = createVariant<ThemeWithVariant, 'cardVariants'>({
   themeKey: 'cardVariants',
 });
+const cardVariantRenamed = createVariant({
+  themeKey: 'cardVariants',
+  property: 'size',
+});
 const ComponentWithVariant = createRestyleComponent<
   BackgroundColorProps<ThemeWithVariant> &
     SpacingProps<ThemeWithVariant> &
@@ -82,6 +86,14 @@ const ComponentWithVariant = createRestyleComponent<
     ViewProps,
   ThemeWithVariant
 >([backgroundColor, spacing, opacity, cardVariant]);
+const ComponentWithRenamedVariant = createRestyleComponent<
+  BackgroundColorProps<ThemeWithVariant> &
+    SpacingProps<ThemeWithVariant> &
+    OpacityProps<ThemeWithVariant> &
+    VariantProps<ThemeWithVariant, 'cardVariants', 'size'> &
+    ViewProps,
+  ThemeWithVariant
+>([backgroundColor, spacing, opacity, cardVariantRenamed]);
 
 describe('createRestyleComponent', () => {
   describe('creates a component that', () => {
@@ -169,7 +181,35 @@ describe('createRestyleComponent', () => {
       );
     });
 
-    it('passes styles from default variant when no variant prop is defined', () => {
+    it('passes styles from default variant', () => {
+      const {root} = render(
+        <ThemeProvider theme={themeWithVariant}>
+          <ComponentWithVariant />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props.style).toStrictEqual([
+        {
+          alignItems: 'flex-start',
+          backgroundColor: '#FFB6C1',
+        },
+      ]);
+    });
+
+    it('passes styles from specified default variant', () => {
+      const {root} = render(
+        <ThemeProvider theme={themeWithVariant}>
+          <ComponentWithVariant variant="regular" />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props.style).toStrictEqual([
+        {
+          alignItems: 'center',
+          backgroundColor: '#E0FFFF',
+        },
+      ]);
+    });
+
+    it('passes styles from default variant with style prop', () => {
       const {root} = render(
         <ThemeProvider theme={themeWithVariant}>
           <ComponentWithVariant margin="s" />
@@ -184,7 +224,7 @@ describe('createRestyleComponent', () => {
       ]);
     });
 
-    it('passes styles from the defined variant', () => {
+    it('passes styles from the specified variant with style prop', () => {
       const {root} = render(
         <ThemeProvider theme={themeWithVariant}>
           <ComponentWithVariant variant="regular" margin="s" />
@@ -198,5 +238,63 @@ describe('createRestyleComponent', () => {
         },
       ]);
     });
+
+    it('passes styles from renamed default variant', () => {
+      const {root} = render(
+        <ThemeProvider theme={themeWithVariant}>
+          <ComponentWithRenamedVariant />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props.style).toStrictEqual([
+        {
+          alignItems: 'flex-start',
+          backgroundColor: '#FFB6C1',
+        },
+      ]);
+    });
+
+    it('passes styles from specified renamed variant', () => {
+      const {root} = render(
+        <ThemeProvider theme={themeWithVariant}>
+          <ComponentWithRenamedVariant size="regular" />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props.style).toStrictEqual([
+        {
+          alignItems: 'center',
+          backgroundColor: '#E0FFFF',
+        },
+      ]);
+    });
+
+    it('passes styles from renamed default variant with style prop', () => {
+      const {root} = render(
+        <ThemeProvider theme={themeWithVariant}>
+          <ComponentWithRenamedVariant margin="s" />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props.style).toStrictEqual([
+        {
+          alignItems: 'flex-start',
+          backgroundColor: '#FFB6C1',
+          margin: 8,
+        },
+      ]);
+    });
+
+    it('passes styles from specified renamed variant with style prop', () => {
+      const {root} = render(
+        <ThemeProvider theme={themeWithVariant}>
+          <ComponentWithRenamedVariant size="regular" margin="s" />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props.style).toStrictEqual([
+        {
+          alignItems: 'center',
+          backgroundColor: '#E0FFFF',
+          margin: 8,
+        },
+      ]);
+    });
   });
 });