@gluestack-ui/nativewind-utils
v1.0.23
Published
A utility function package for @gluestack-ui/nativewind
Downloads
18,933
Readme
@gluestack-ui/nativewind-utils
A utility function package for @gluestack-ui/nativewind
Installation
To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
npx install @gluestack-ui/nativewind-utils
Usage
// import the tva
import { tva } from '@gluestack-ui/nativewind-utils/tva';
// Understanding the API
const buttonStyle = tva({
base: 'bg-primary-500',
variants: {
size: {
lg: 'w-6 h-6',
md: 'w-5 h-5',
sm: 'w-4 h-4',
},
},
});
const buttonText = tva({
base: 'text-white',
parentVariants: {
size: {
lg: 'text-lg',
md: 'text-md',
sm: 'text-sm',
},
},
});
// Using the in component
export default ({ size, ...props }) => (
<Pressable className={buttonStyle({ size })} {...props}>
<Text className={buttonText({ parentVariants: { size } })}>
Hello World!
</Text>
</Pressable>
);