Text

Render styled text with semantic HTML on web and native Text on mobile, all with one unified API.

Preview

Interactive Demo

Installation

npm install @native-ui-org/primitives

pnpm add @native-ui-org/primitives

yarn add @native-ui-org/primitives

bun add @native-ui-org/primitives

Overview

Text is a cross-platform text primitive that renders semantic HTML on web while maintaining React Native's Text behavior on mobile.

Feature	Description	Platforms
Text	Standard text rendering with styling	iOS, Android, Web
Semantic	Render as `h1`, `p`, `span` on web with `as`	Web
asChild	Polymorphic rendering for animations	iOS, Android, Web

Setup & Usage Guide

Text works out of the box with no configuration. It's a drop-in replacement for React Native's Text with enhanced web semantics.

1. Install and Import

Install from npm:

npm install @native-ui-org/primitives

Then import from the package:

import { Text } from "@native-ui-org/primitives";

2. Basic Usage

Use Text just like React Native's Text component:

<Text style={{ fontSize: 16, color: "black" }}>
  Hello world
</Text>

3. Semantic HTML (Web Only)

On web, use the as prop to render proper HTML elements:

<Text as="h1" style={{ fontSize: 32, fontWeight: "bold" }}>
  Main Title
</Text>

<Text as="p" style={{ fontSize: 16, lineHeight: 24 }}>
  Paragraph text with semantic meaning.
</Text>

<Text as="span" style={{ color: "blue" }}>
  Inline text
</Text>

4. Polymorphic Components

Use asChild for animations or custom text elements:

import { motion } from "framer-motion";

<Text asChild>
  <motion.span 
    initial={{ opacity: 0 }} 
    animate={{ opacity: 1 }}
  >
    Animated text
  </motion.span>
</Text>

API Reference

Text

The base text component for all platforms.

Prop	Type	Default	Description
`as`	string	—	HTML element to render (`h1`, `p`, `span`, etc) (web only)
`asChild`	boolean	`false`	Render child element without Text wrapper
`style`	`StyleProp<TextStyle>`	—	React Native style prop
`role`	string	—	ARIA role (web only)
`tabIndex`	`0 \| -1`	—	Tab navigation control (web only)
`dir`	`"ltr" \| "rtl" \| "auto"`	—	Text direction (web only)
`aria-*`	string \| boolean	—	Any ARIA attribute (web only)
`...props`	`TextProps`	—	All React Native Text props (press events, etc)

Platform Behavior

Platform	Implementation	Characteristics
iOS / Android	Standard React Native `Text`	Native rendering and performance
Web	Can render as semantic HTML with `as` prop	Better SEO and accessibility
All Platforms	Consistent API	Same props, same behavior

Accessibility

Web:

Semantic HTML improves screen reader experience
Support for ARIA attributes
Proper heading hierarchy with as="h1", etc.

Mobile:

Standard React Native accessibility props
Works with VoiceOver and TalkBack

Version History

Version	Notes
`0.1.0`	Initial release — cross-platform Text with `as` prop and `asChild` polymorphism.

Summary: Text is the foundation for all typography in cross-platform apps. Use it everywhere you'd use React Native's Text, with the added benefit of semantic HTML on web.

Text

On this page