CraftReactNativeCraftReactNative

Typography

Text variants and typography system.

View theme source
heading132px / 32px / 900
The quick brown fox jumps over the lazy dog
heading224px / 30px / 800
The quick brown fox jumps over the lazy dog
heading318px / 25px / 700
The quick brown fox jumps over the lazy dog
body116px / 20px / 400
The quick brown fox jumps over the lazy dog
body214px / 18px / 400
The quick brown fox jumps over the lazy dog
body312px / 15px / 400
The quick brown fox jumps over the lazy dog
body410px / 12px / 400
The quick brown fox jumps over the lazy dog

Available text variants

Headings: heading1, heading2, heading3 Body: body1, body2, body3, body4

Usage

import { StyleSheet } from 'react-native-unistyles';
import { Text } from 'react-native';
 
const MyComponent = () => {
  return (
    <>
      <Text style={styles.heading}>Title</Text>
      <Text style={styles.body}>Content</Text>
    </>
  );
};
 
const styles = StyleSheet.create(theme => ({
  heading: {
    fontSize: theme.textVariants.heading1.fontSize,
    lineHeight: theme.textVariants.heading1.lineHeight,
    fontWeight: theme.textVariants.heading1.fontWeight,
    color: theme.colors.contentPrimary,
  },
  body: {
    fontSize: theme.textVariants.body1.fontSize,
    lineHeight: theme.textVariants.body1.lineHeight,
    fontWeight: theme.textVariants.body1.fontWeight,
    color: theme.colors.contentPrimary,
  },
}));

Using the Text component

import { Text } from '@/craftrn-ui/components/Text';
 
<Text variant="heading1">Title</Text>
<Text variant="body1" color="contentPrimary">Content</Text>

Colors

Learn about the color token system used throughout CraftReactNative components and templates.

Spacing

Spacing tokens for consistent padding, margins, and gaps.

On this page