Text
Display, nest, style, and handle touch events for text.
Installation
1
Run the following command:
npx nwui-cli@latest add text
🚀
1
Copy/paste the following code to the specified file path:
~/components/nativewindui/Text.tsx
import { VariantProps, cva } from 'class-variance-authority';
import * as React from 'react';
import { Text as RNText } from 'react-native';
import { cn } from '~/lib/cn';
const textVariants = cva('text-foreground', {
variants: {
variant: {
largeTitle: 'text-4xl',
title1: 'text-2xl',
title2: 'text-[22px] leading-7',
title3: 'text-xl',
heading: 'text-[17px] leading-6 font-semibold',
body: 'text-[17px] leading-6',
callout: 'text-base',
subhead: 'text-[15px] leading-6',
footnote: 'text-[13px] leading-5',
caption1: 'text-xs',
caption2: 'text-[11px] leading-4',
},
color: {
primary: '',
secondary: 'text-secondary-foreground/90',
tertiary: 'text-muted-foreground/90',
quarternary: 'text-muted-foreground/50',
},
},
defaultVariants: {
variant: 'body',
color: 'primary',
},
});
const TextClassContext = React.createContext<string | undefined>(undefined);
function Text({
className,
variant,
color,
...props
}: React.ComponentPropsWithoutRef<typeof RNText> & VariantProps<typeof textVariants>) {
const textClassName = React.useContext(TextClassContext);
return (
<RNText className={cn(textVariants({ variant, color }), textClassName, className)} {...props} />
);
}
export { Text, TextClassContext, textVariants };
🚢
Usage
index.tsx
import { View } from 'react-native';
import { Text } from '~/components/nativewindui/Text';
function TextExample() {
return (
<View className="gap-2">
<Text variant="largeTitle" className="text-center">
Large Title
</Text>
<Text variant="title1" className="text-center">
Title 1
</Text>
<Text variant="title2" className="text-center">
Title 2
</Text>
<Text variant="title3" className="text-center">
Title 3
</Text>
<Text variant="heading" className="text-center">
Heading
</Text>
<Text variant="body" className="text-center">
Body
</Text>
<Text variant="callout" className="text-center">
Callout
</Text>
<Text variant="subhead" className="text-center">
Subhead
</Text>
<Text variant="footnote" className="text-center">
Footnote
</Text>
<Text variant="caption1" className="text-center">
Caption 1
</Text>
<Text variant="caption2" className="text-center">
Caption 2
</Text>
</View>
);
}
© Ronin Technologies LLC 2024