Text

The Text component is a fundamental building block for displaying text in your React Native applications. It is designed to render styled text with various customization options, making it versatile for a wide range of use cases.

Expo component example

Text component

Installation

To use the Input component, make sure first that you have initiated the library.

CLI

This command will add the Input component file to your project and install any necessary dependencies.

npx mallaui@latest add Text

Manual

Copy and paste the following code into your project. Make sure to install the necessary dependencies first and update path to match your project setup.

Text.tsx

import {Text as DefaultText, StyleSheet, TextProps, TextStyle} from 'react-native';
import {useStyles} from '../../styles/useStyles';
import {AppTheme} from '../../styles/theme';
import {FC, ReactNode} from 'react';

const defaultStyles = (theme: AppTheme) => ({
  colors: StyleSheet.create({
    primary: {
      color: theme.colors.app.foreground
    },
    secondary: {
      color: theme.colors.app.mutedForeground
    },
    destructive: {
      color: theme.colors.app.destructive
    }
  }),
  fontWeights: StyleSheet.create({
    light: {
      fontWeight: '300'
    },
    regular: {
      fontWeight: '400'
    },
    medium: {
      fontWeight: '500'
    },
    bold: {
      fontWeight: '700'
    }
  }),
  sizes: StyleSheet.create({
    xxl: {
      fontSize: 29,
      lineHeight: 40
    },
    xl: {
      fontSize: 24,
      lineHeight: 36
    },
    lg: {
      fontSize: 20,
      lineHeight: 32
    },
    md: {
      fontSize: 16,
      lineHeight: 24
    },
    sm: {
      fontSize: 14,
      lineHeight: 20
    },
    xs: {
      fontSize: 12,
      lineHeight: 16
    },
    xxs: {
      fontSize: 10,
      lineHeight: 12
    }
  })
});

interface ITextProps extends TextProps {
  /**
   * The color of the text.
   * @default 'primary'
   */
  color?: keyof ReturnType<typeof defaultStyles>['colors'];

  /**
   * The size of the text.
   * @default 'md'
   */
  size?: keyof ReturnType<typeof defaultStyles>['sizes'];

  /**
   * The weight of the text.
   * @default 'regular'
   */
  fontWeight?: keyof ReturnType<typeof defaultStyles>['fontWeights'];

  children: ReactNode;
}

const Text: FC<ITextProps> = ({
  style,
  children,
  color = 'primary',
  size = 'md',
  fontWeight = 'regular',
  ...otherProps
}) => {
  const styles = useStyles(defaultStyles);

  return (
    <DefaultText
      style={[
        styles.colors[color],
        styles.sizes[size],
        styles.fontWeights[fontWeight],
        style
      ]}
      {...otherProps}
    >
      {children}
    </DefaultText>
  );
};

Text.displayName = 'Text';

export {Text};

Usage

import { Text } from './components/ui/Text'

<Text>Hello world</Text>

Properties

Name
size
Type
'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
Description
The size of the text.
Name
color
Type
'primary' | 'secondary' | 'destructive'
Description
The color of the text.
Name
fontWeight
Type
'light' | 'regular' | 'medium' | 'bold'
Description
The weight of the text.