react-native-nitro-text
A Text component that is much richer and performant for both iOS and Android.
https://github.com/user-attachments/assets/57f56b3f-3988-4235-af83-a5f2cfd82121
[](https://www.npmjs.org/package/react-native-nitro-text)
[](https://discord.gg/7KXUyHjz)
[](https://www.npmjs.org/package/react-native-nitro-text)
[](https://www.npmjs.org/package/react-native-nitro-text)
[](https://github.com/patrickkabwe/react-native-nitro-text/blob/main/LICENSE)
---
## 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
```bash
yarn add react-native-nitro-text react-native-nitro-modules
```
iOS
```bash
cd ios && pod install && cd ..
```
Thatβs it. You can now use the `NitroText` component in your app.
## Usage
```tsx
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`.
```tsx
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"`.
```tsx
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.
```tsx
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](https://github.com/patrickkabwe/create-nitro-module).
## Contributing
PRs welcome! Please open an issue first for major changes.
> π¬ For quick support, join our [Discord channel](https://discord.gg/7KXUyHjz)