Text

A minimal RNText wrapper with automatic light/dark color switching — a copy-paste starting point, not a shipped library component. Extend it with variants, font presets, or accessibility wrappers as your design system grows.

Text.tsx

import { Text as RNText } from 'react-native';
import { createComponent } from 'react-native-small-ui';

const Text = createComponent(RNText, {
  _light: {
    color: '#111',
  },
  _dark: {
    color: '#eee',
  },
});

Reference implementation

This component is not exported by the library. It is a starting point — copy it into your project and adapt it. The library provides the factory (createComponent); you own the design.

---

Usage

Every React Native style prop is available directly on the component. The _light and _dark props in the base definition apply automatically based on the active color scheme — no useColorMode call needed at the call site.

// Basic — base color mode styles apply
<Text>Hello world</Text>

// Spacing and size via style props
<Text marginTop={12} fontSize={16} lineHeight={24}>
  Body text
</Text>

// Per-instance color override — _light/_dark work inline too
<Text _light={{ color: '#666' }} _dark={{ color: '#aaa' }}>
  Secondary text
</Text>

---

Adding variants

For apps with a type scale, add a preset variant directly to the base definition. All variant props are type-inferred — no manual declarations needed.

import { Text as RNText } from 'react-native';
import { createComponent } from 'react-native-small-ui';

const Text = createComponent(RNText, {
  _light: { color: '#111' },
  _dark:  { color: '#eee' },
  variants: {
    preset: {
      h1:   { fontSize: 34, lineHeight: 41, fontWeight: '700' },
      h2:   { fontSize: 28, lineHeight: 34, fontWeight: '600' },
      body: { fontSize: 16, lineHeight: 24 },
      caption: { fontSize: 12, lineHeight: 18 },
    },
  },
  defaultVariants: { preset: 'body' },
});

// Variant prop is autocompleted: preset?
<Text preset="h1">Page title</Text>
<Text preset="caption" _light={{ color: '#888' }}>Last updated today</Text>

See the Typography component for a fuller example that pairs font weight with size and adds an accessibility wrapper.

---

React Native Text quirks

RNText has a few platform behaviours worth knowing before you wrap it:

Behaviour	Detail
Font inheritance	Unlike the web, RNText does not inherit fontFamily or fontSize from a parent View. Set them explicitly on every text component.
numberOfLines + ellipsizeMode	Truncation props are passed directly to the component — they work the same way as on a bare RNText.
selectable	Text is not selectable by default on mobile. Pass selectable as a prop when needed.
Android font weight	Fractional weights (e.g. ‘500’) are mapped to the nearest available typeface. Use a custom fontFamily for precise weight control on Android.

---

How it works

createComponent merges _light and _dark styles at render time using the active color scheme from useColorMode — no extra hook or context provider required at the call site. Direct style props (like marginTop={12}) always win over base styles on conflict.

See createComponent for the full API: platform props (_ios, _android), the variant system, .extend(), and .withSlots().