Text

Display, nest, style, and handle touch events for text.

Installation

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