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