Un componente Text que es mucho más completo y eficiente tanto para iOS como para Android.

Características

• Funciona tanto en iOS como en Android (actualmente vuelve a RN Text en Android)
• Renderizado nativo en iOS con selección suave.
• Fragmentos anidados se fusionan en una sola vista de texto nativa
• Renderizado de Markdown y HTML (próximamente).
• Soporta solo la Nueva Arquitectura

Requisitos

• React Native v0.78.0 o superior (Fabric/Nitro Views)
• Node 18+ (se recomienda Node 20+)

Instalación

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

iOS

cd ios && pod install && cd ..

Eso es todo. Ahora puedes usar el componente NitroText en tu aplicación.

Uso

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

Selección

iOS usa selección nativa. En Android, NitroText actualmente vuelve a usar Text de React Native.

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.
    
  )
}

Renderizado HTML

NitroText puede analizar cadenas HTML como hijos y CSS en línea cuando pasas 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}
}

Menú de selección personalizado

NitroText soporta elementos de menú personalizados que aparecen cuando se selecciona texto. Pasa una propiedad menus con un arreglo de elementos de menú, cada uno con un title y una función de devolución de llamada action.

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.
    
  )
}

Soporte de Plataforma

• iOS
• Android - Por el momento NitroText vuelve a usar Text de RN.

¿Por qué NitroText?

Vista de texto nativa personalizada con mínima sobrecarga de JS y selección nativa en iOS. Ideal para texto con estilos complejos/anidados y listas grandes. Es un reemplazo directo para el componente Text de RN.

Desarrollo

• bun run build — verifica tipos y compila el paquete
• bun run codegen — regenera las salidas de codegen
• Aplicación de ejemplo en example/

Créditos

Creado con create-nitro-module.

Contribuciones

¡PRs bienvenidos! Por favor, abre un issue primero para cambios mayores.

💬 Para soporte rápido, únete a nuestro canal de Discord

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