Skip to main content

Text

Elevate your app’s UI with the Shadow UI Text component — a flexible React Native text component offering a wide range of variants, colors, and formatting options for smooth and consistent design.

Vector icon

Usage​

import {Text} from "@/components";
import React from "react";

export const Example = () => {
  return <Text color="primary" variant="heading1"/>;
};

export default Example;

Props​

Text Props​

Extends the Text Props from React Native.

Variant​

Type: number

Variant specifies the appropriate text style based on the type's role and size. Available variants include:

Heading: heading1, heading2 , heading3

B1: b1bold, b1semiBold , b1medium, b1regular

B2: b2bold, b2semiBold , b2medium, b2regular

B3: b3bold, b3semiBold , b3medium, b3regular

B4: b4bold, b4semiBold , b4medium, b4regular

B5: b5bold, b5semiBold , b5medium, b5regular

Base: base

color​

Type: string

Specifies the color of the text. The color should match a name defined in the theme's color object.

children (required)​

Type: React.ReactNode

Style​

Type: StyleProp<TextStyle>