react-native-nitro-text

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

NitroText.mp4

---

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{NitroTextasText}from'react-native-nitro-text'exportfunctionTitle(){return(<Textstyle={{fontSize: 24,fontWeight: 'bold'}}>
🚀 NitroText Showcase
</Text>)}

Selection

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

import{NitroTextasText}from'react-native-nitro-text'exportfunctionSelectionExample(){return(<Textselectablestyle={{fontSize: 16,lineHeight: 22}}>
Long-press to select this text. NitroText supports smooth selection,
even with <Textstyle={{fontWeight: '600'}}>inline styles</Text> and
longer paragraphs.
</Text>)}

HTML rendering

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

import{NitroText}from'react-native-nitro-text'exportfunctionHtmlExample(){consthtml=` <div> <h2>Renderer demo</h2> <p>This text comes from <strong>HTML</strong> with <em>semantic</em> tags.</p> <p><span style="color: #ff6347; font-weight: bold;">Inline CSS works too.</span></p> </div> `return<NitroTextrenderer="html">{html}</NitroText>}

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'exportfunctionMenuExample(){constmenus=useMemo(()=>[{title: 'Copy',action: ()=>console.log('Copy action')},{title: 'Share',action: ()=>console.log('Share action')},{title: 'Translate',action: ()=>console.log('Translate action')},],[])return(<NitroTextselectablemenus={menus}style={{fontSize: 16}}>
Select this text to see custom menu options appear in the selection menu.
</NitroText>)}

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