Question: How can I provide multiple variants a props to a custom component that uses multiple RestyleComponents?

[alexanderblackh]

I've created a custom Button component that looks like the following:

export interface ButtonProps {
  label?: string;
  onPress: () => any;
}

type iProps = SpacingProps<Theme> &
  BorderProps<Theme> &
  BackgroundColorProps<Theme> &
  ButtonProps &
  VariantProps<Theme, 'buttonVariants'>;

const variant = createVariant<Theme>({
  themeKey: 'buttonVariants',
  defaults: {
    color: 'testColor',
    margin: {
      phone: 's',
      tablet: 'm',
    },
    backgroundColor: 'mainForeground',
  },
});

const Button = ({onPress, label, ...props}: iProps): JSX.Element => {
  const restyledProps = useRestyle([variant as any], props);

  return (
    <TouchableOpacity onPress={onPress}>
      <Box
        justifyContent="center"
        alignItems="center"
        {...restyledProps}>
        <Text variant="button">{label}</Text>
      </Box>
    </TouchableOpacity>
  );
};

How can I make it so that when I call <Button variant="primary" ... /> I can do:
<Button variant="primary" textVariant="button2" ..../>

I know I could do it manually on the ButtonProps interface, but I'd like a more intelligent way of doing this dynamically.

[erpriliano]

I've the exact same problem.. hopefully there will be an answer soon. By the way in my case

const Profile = ({ onPress, imgUrl, label, ...rest }: ProfileProps) => {
  const props = useRestyle(restyleFunctions, rest);

  return (
    <Box marginHorizontal="s">
      <TouchableOpacity onPress={onPress}>
        <Box {...props}>
          <Avatar rounded size="large" source={{ uri: imgUrl }} />
        </Box>
      </TouchableOpacity>
      <Text variant="body" textAlign="center" marginTop="s">
        {label}
      </Text>
    </Box>
  );
};

For now, I only can do 'restyle' in the component that is wrapped inside the <Box> ... </Box> component since I use the {...props} only in that component. But I want to be able to do 'restyle' also in the most outer component as well as in the text component so I can call <Profile textVariant="..." outerBoxVariant="..." />

[denisprado]

Can I see your Avatar component, @erpriliano? Do you use variants to determine the size?

[nelyousfi]

Why are you using useRestyle? useRestyle will take the restyle props and transform them to a react native props that can be used by a react native component such as View.

So, passing something like:

useRestyle([spacing], {margin: 'm'})

will return something like:

{ style: { margin: value of m in the theme } }

Instead, you can have something like:

import React from 'react';
import {
  createBox,
  createRestyleComponent,
  createText,
  createVariant,
  ThemeProvider,
  VariantProps,
} from '@shopify/restyle';
import {TouchableOpacity} from 'react-native';
import theme, {Theme} from './styles/theme';

const Box = createBox<Theme>();
const Text = createText<Theme>();

type Props = VariantProps<Theme, 'cardVariants'> &
  VariantProps<Theme, 'textVariants', 'textVariants'> & {
    label: string;
    onPress: () => void;
  };

const cardVariant = createVariant<Theme, 'cardVariants'>({
  themeKey: 'cardVariants',
});

const Card = createRestyleComponent<
  VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
  Theme
>([cardVariant], Box);

const Button = ({onPress, label, textVariants, variant}: Props) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Card variant={variant} justifyContent="center" alignItems="center">
        <Text variant={textVariants}>{label}</Text>
      </Card>
    </TouchableOpacity>
  );
};

export default () => (
  <ThemeProvider theme={theme}>
    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
      <Button
        label={'Press Me'}
        variant={'primary'}
        textVariants={'button2'}
        onPress={() => {}}
      />
    </Box>
  </ThemeProvider>
);

If you want to change the name of the prop from the default (which is variant), you can just add a 3rd type as string literal to VariantProps (like we did for textVariants), so instead you will have something like:

VariantProps<Theme, 'cardVariants', 'buttonVariant'>

And if you want to add more props to your button to behave like a box, you can just do something like:

type Props = BoxProps<Theme> &
  VariantProps<Theme, 'cardVariants'> &
  VariantProps<Theme, 'textVariants', 'textVariants'> & {
    label: string;
    onPress: () => void;
  };

...

const Button = ({onPress, label, textVariants, variant, ...rest}: Props) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Card
        variant={variant}
        justifyContent="center"
        alignItems="center"
        {...rest}>
        <Text variant={textVariants}>{label}</Text>
      </Card>
    </TouchableOpacity>
  );
};

export default () => (
  <ThemeProvider theme={theme}>
    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
      <Button
        borderRadius={18}
        margin={'m'}
        label={'Press Me'}
        variant={'primary'}
        textVariants={'button2'}
        onPress={() => {}}
      />
    </Box>
  </ThemeProvider>
);

The same with any restyle function you want.

[carlosriveroib]

Hi, I need some help. I don't understand this library at all.

I would like to achieve something like this

const theme = createTheme({
  ...,
  buttonVariants: {
    secondary: {
      backgroundColor: 'green',
    },
    size: {
      xl: {
        height: 48
      }
    }
  },
  buttonLabelVariants: {
    secondary: {
      color: 'black'
    },
    size: {
      xl: {
        fontSize: 24
      }
    }
  }
})

const Button = ({ children, size, variant, ...props }) => {
  return (
    <Pressable size={size} variant={variant} {...props}>
      <Text size={size} variant={variant}>{children}</Text>
    </Pressable>
  )
}

const App = () => {
  return (
    <Button variant="secondary" size="xl" onPress={() => {}}>Button text</Button>
  )
}

I know how I create theme is wrong.
I want to use the same variant props, like in this case "secondary" to define some buttons styles and some text styles, also size prop to define the font size of the text and the height of the button.
The rest ...props should be native PressableProps

Is it anything like that possible??

Thank you very much in advance

[fortmarek]

Instead of relying on the Theme directly, I think it'd be better to define custom props for Button that would be a discriminated union.

Something like this might work better:

interface ButtonSecondaryProps {
  variant: 'secondary';
  size: Theme['buttonVariants']['secondary'];
}

type ButtonProps = ButtonSecondaryProps | ...;

We don't currently support scoping the Theme as you suggest.

[carlosriveroib]

Thank you, I'll give a try

[AdityaTarale]

Hi there! 👋 I'm currently working on a React Native project and using the createVariant and createRestyleComponent functions from the restyle library for styling. I've encountered an issue when trying to apply multiple variants to my Input component.

Here's a simplified version of my code:

import React, { type FC, type PropsWithChildren, type ReactElement } from 'react';
import { TextInput, type TextInputProps } from 'react-native';
import {
  backgroundColor,
  type BackgroundColorProps,
  border,
  type BorderProps,
  createRestyleComponent,
  createVariant,
  spacing,
  type SpacingProps,
  type VariantProps
} from '@shopify/restyle';

import { type Theme } from '@/theme';

type Props = VariantProps<Theme, 'inputVariantsBase'> &
  VariantProps<Theme, 'inputVariantDisabledState', 'disabled'> &
  VariantProps<Theme, 'inputVariantFocusedState', 'focused'> &
  VariantProps<Theme, 'inputVariantErrorState', 'error'> &
  BackgroundColorProps<Theme> &
  BorderProps<Theme> &
  SpacingProps<Theme> &
  PropsWithChildren;

const variant = createVariant({ themeKey: 'inputVariantsBase' });
const disabled = createVariant({ themeKey: 'inputVariantDisabledState' });
const focused = createVariant({ themeKey: 'inputVariantFocusedState' });
const error = createVariant({ themeKey: 'inputVariantErrorState' });

const RestyleView = createRestyleComponent<Props, Theme>([
  variant,
  disabled,
  focused,
  error,
  backgroundColor,
  border,
  spacing
]);

type InputProps = TextInputProps &
  Pick<Props, Exclude<keyof Props, 'disabled' | 'focused' | 'error'>> & {
    disabled?: boolean;
    focused?: boolean;
    error?: boolean;
  };

export const Input: FC<InputProps> = ({
  variant = 'outline',
  disabled = false,
  focused = false,
  error = false,
  ...rest
}): ReactElement => {
  return (
    <RestyleView
      variant={variant}
      {...(focused && { focused: `${variant}Focused` })}
      {...(error && { error: `${variant}Error` })}
      {...(disabled && { disabled: `${variant}Disabled` })}>
      <TextInput {...rest} placeholder="Type something" />
    </RestyleView>
  );
};

I'm trying to use multiple variants in my Input component, for example:

<Input variant="underlined" error={true} />
<Input variant="outline" disabled={true} />

Below input styles which we are using

export const inputVariantsBase = {
  defaults: {
    backgroundColor: 'lightGray',
    borderColor: 'gray',
    paddingHorizontal: 'smm'
  },
  outline: {
    borderWidth: 1,
    borderRadius: 'rounded'
  },
  underlined: {
    borderBottomWidth: 1
  }
};

export const inputVariantDisabledState = {
  defaults: {},
  outlineDisabled: {
    backgroundColor: 'black',
    borderColor: 'black'
  },
  underlinedDisabled: {
    backgroundColor: 'black',
    borderColor: 'black'
  }
};

export const inputVariantFocusedState = {
  defaults: {},
  outlineFocused: {
    borderColor: 'primary'
  },
  underlinedFocused: {
    borderColor: 'primary'
  }
};

export const inputVariantErrorState = {
  defaults: {},
  outlineError: {
    borderColor: 'danger'
  },
  underlinedError: {
    borderColor: 'danger'
  }
};

However, it seems that only one variant is applied at a time. Is there a specific way to correctly apply multiple variants using the createVariant and createRestyleComponent functions? Any guidance or examples would be greatly appreciated!

Thanks in advance for your help! 🙏

[AdityaTarale]

got the solution for the issue from discord

You need to pass a property to createVariant otherwise it will just use the default, which is variant and they will all be conflicting. Something like eg errorVariant, and then you’ll be able to pass the variant type to the component under that prop.

const variant = createVariant({ themeKey: 'inputVariantsBase', property: 'variant' });
const disabled = createVariant({ themeKey: 'inputVariantDisabledState', property: 'disabledVariant' });
const focused = createVariant({ themeKey: 'inputVariantFocusedState' property: 'focusedVariant' });
const error = createVariant({ themeKey: 'inputVariantErrorState' property: 'errorVariant' });

Something like this, just using simple property names for the example but they can be anything, they don't have to contain the word variant. Then you'd use them like:

<Input variant="underlined" errorVariant="outlineError" />
<Input variant="outline" />

credit to @ergusto discord