Component

Text

Theme-aware typography primitive with variants, colors, and font weights.

←→

React Native

Typography scale

Theme-aware text variants.

Heading 1

Heading 2

Heading 3

Secondary body copy

import { Text } from '@sohantalukder/rn-kit';

export function SectionTitle() {
  return (
    <>
      <Text variant="heading3" weight="semibold">
        Payment methods
      </Text>
      <Text color="secondary">
        Manage saved cards and bank accounts.
      </Text>
    </>
  );
}

Live component

headingsbodycolorsweights

Use semantic variants consistently.
Avoid one-off font sizes inside screens.

Usage

import { Text } from '@sohantalukder/rn-kit';

import { Text } from '@sohantalukder/rn-kit';

export function SectionTitle() {
  return (
    <>
      <Text variant="heading3" weight="semibold">
        Payment methods
      </Text>
      <Text color="secondary">
        Manage saved cards and bank accounts.
      </Text>
    </>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

childrenReactNode-Content rendered inside the component surface.

variant"headings" | "body" | "colors" | "weights"defaultApplies a typography preset from the theme.

colorTextColorthemeApplies a semantic text color token.

weightTextWeightregularFont weight token applied to text content.

Theme

Text reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

headings
body
colors
weights

Best Practices

Use semantic variants consistently.
Avoid one-off font sizes inside screens.