Un composant Text beaucoup plus riche et performant pour iOS et Android.

Fonctionnalités

• Fonctionne à la fois sur iOS et Android (actuellement retour à RN Text sur Android)
• Rendu natif iOS avec sélection fluide.
• Les fragments imbriqués fusionnent en une seule vue texte native
• Rendu Markdown et HTML (bientôt disponible).
• Prend en charge uniquement la Nouvelle Architecture

Exigences

• React Native v0.78.0 ou supérieur (Fabric/Nitro Views)
• Node 18+ (Node 20+ recommandé)

Installation

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

iOS

cd ios && pod install && cd ..

C’est tout. Vous pouvez maintenant utiliser le composant NitroText dans votre application.

Utilisation

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

Sélection

iOS utilise la sélection native. Sur Android, NitroText revient actuellement à 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.
    
  )
}

Rendu HTML

NitroText peut analyser les chaînes HTML enfants et le CSS en ligne lorsque vous passez 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}
}

Menu de sélection personnalisé

NitroText prend en charge les éléments de menu personnalisés qui apparaissent lorsque le texte est sélectionné. Passez une propriété menus avec un tableau d'éléments de menu, chacun contenant un title et un rappel 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.
    
  )
}

Support de plateforme

• iOS
• Android - Pour le moment NitroText revient à RN Text.

Pourquoi NitroText ?

Vue de texte native personnalisée avec un minimum de surcharge JS et une sélection native iOS. Idéal pour un texte lourd/imbriqué stylisé et de grandes listes. C’est un remplacement direct du composant RN Text.

Développement

• bun run build — vérifie les types et construit le package
• bun run codegen — régénère les sorties du codegen
• Application exemple dans example/

Crédits

Démarré avec create-nitro-module.

Contribution

Les PR sont les bienvenues ! Veuillez ouvrir un ticket avant pour les changements majeurs.

💬 Pour un support rapide, rejoignez notre canal Discord

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