A Text component that is much richer and performant for both iOS and Android.

Features

• Works on both iOS and Android(currently fallback to RN Text on Android)
• Native iOS rendering with smooth selection.
• Nested fragments merge into a single native text view
• Rendering Markdown and HTML (coming soon).
• Supports only the New Architecture

Requirements

• React Native v0.78.0 or higher (Fabric/Nitro Views)
• Node 18+ (Node 20+ recommended)

Installation

yarn add react-native-nitro-text react-native-nitro-modules

iOS

cd ios && pod install && cd ..

That’s it. You can now use the NitroText component in your app.

Usage

import { NitroText as Text } from 'react-native-nitro-text'
export function Title() {
  return (
    
      🚀 NitroText Showcase
    
  )
}

Selection

iOS uses native selection. On Android, NitroText currently falls back to React Native Text.

import { NitroText as Text } from 'react-native-nitro-text'
export function SelectionExample() {
  return (
    
      Long-press to select this text. NitroText supports smooth selection,
      even with inline styles and
      longer paragraphs.
    
  )
}

HTML rendering

NitroText can parse HTML string children and inline CSS when you pass renderer="html".

import { NitroText } from 'react-native-nitro-text'
export function HtmlExample() {
  const html = 
    

      
Renderer demo
This text comes from HTML with semantic tags.

      
Inline CSS works too.
    

  
  return {html}
}

Custom selection menu

NitroText supports custom menu items that appear when text is selected. Pass a menus prop with an array of menu items, each containing a title and action callback.

import { NitroText } from 'react-native-nitro-text'
import { useMemo } from 'react'
export function MenuExample() {
  const menus = useMemo(
    () => [
      { 
        title: 'Copy', 
        action: () => console.log('Copy action') 
      },
      { 
        title: 'Share', 
        action: () => console.log('Share action') 
      },
      { 
        title: 'Translate', 
        action: () => console.log('Translate action') 
      },
    ],
    []
  )
  return (
    
      Select this text to see custom menu options appear in the selection menu.
    
  )
}

Platform Support

• iOS
• Android - At the moment NitroText fallback to RN Text.

Why NitroText?

Custom native text view with minimal JS overhead and native iOS selection. Great for heavy/nested styled text and large lists. It's a drop-in replacement for RN Text component.

Development

• bun run build — typecheck and build the package
• bun run codegen — regenerate codegen outputs
• Example app in example/

Credits

Bootstrapped with create-nitro-module.

Contributing

PRs welcome! Please open an issue first for major changes.

💬 For quick support, join our Discord channel

--- Tranlated By Open Ai Tx | Last indexed: 2026-05-13 ---