Text

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

import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import { View, ScrollView, Pressable } from 'react-native';

import { Text } from '~/components/nativewindui/Text';
import { useColorScheme } from '~/lib/useColorScheme';

export default function TextScreen() {
  const { colors } = useColorScheme();
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativeWindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerRight() {
            return (
              <Pressable className="opacity-80 active:opacity-40">
                <View className="opacity-90">
                  <Icon name="cog-outline" color={colors.foreground} />
                </View>
              </Pressable>
            );
          },
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Text
          </Text>

          <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>
        </View>
      </ScrollView>
    </>
  );
}

Installation

Run the following command:

npx nwui-cli@latest add text

🚀

Ship.

Add the following dependencies to your project:

npx expo install react-native-uitextview

Copy/paste the following code to the specified file path:

~/components/nativewindui/Text.tsx

Download

import { VariantProps, cva } from 'class-variance-authority';
import { cssInterop } from 'nativewind';
import * as React from 'react';
import { UITextView } from 'react-native-uitextview';

import { cn } from '~/lib/cn';

cssInterop(UITextView, { className: 'style' });

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 UITextView> & VariantProps<typeof textVariants>) {
  const textClassName = React.useContext(TextClassContext);
  return (
    <UITextView
      className={cn(textVariants({ variant, color }), textClassName, className)}
      {...props}
    />
  );
}

export { Text, TextClassContext, textVariants };

🛸

Ship.

Usage

import { Text } from '~/components/nativewindui/Text';

<Text>Body</Text>

Props

Text

Inherits all the props from bluesky-social's react-native-uitextview

Prop	Type	Default	Description
variant	"largeTitle" \| "title1" \| "title2" \| "title3" \| "heading" \| "body" \| "callout" \| "subhead" \| "footnote" \| "caption1" \| "caption2"	body	Defines the text style variant.
color	"primary" \| "secondary" \| "tertiary" \| "quarternary"	primary	Defines the text color.

Utils

TextClassContext: A context that provides a class name to its Text children.