@@ -8,17 +8,11 @@ Drop‑in, high‑performance Text for React Native (Fabric). Native iOS renderi
88
99## Features
1010
11- - Native iOS rendering: UITextView/TextKit for smooth selection and layout.
12- - Rich styling fragments: nested styles merged into native attributed text.
13- - Precise measurement: per‑line metrics via ` onTextLayout ` ; supports ` numberOfLines ` .
14- - Ellipsis & wrapping: ` ellipsizeMode ` (` head ` | ` middle ` | ` tail ` | ` clip ` ) and iOS ` lineBreakStrategyIOS ` .
15- - Typography: ` fontFamily ` , ` fontWeight ` , ` fontStyle ` , ` letterSpacing ` , ` lineHeight ` .
16- - Text alignment & transform: ` textAlign ` , ` textTransform ` .
17- - Decorations: ` textDecorationLine ` , ` textDecorationStyle ` , ` textDecorationColor ` .
18- - Dynamic Type: ` allowFontScaling ` , ` dynamicTypeRamp ` , ` maxFontSizeMultiplier ` .
19- - Selection & press: ` selectable ` , ` selectionColor ` , ` onPress ` , ` onPressIn ` , ` onPressOut ` .
20- - Color parsing: decimal ARGB, named colors, hex (#rgb/#rgba/#rrggbb/#rrggbbaa, ` 0x... ` ), and ` rgb()/rgba() ` .
21- - Works with RN Text: use NitroText inside RN ` <Text> ` and vice‑versa.
11+ - Works on both iOS and Android(currently fallback to RN ` Text ` )
12+ - Native iOS TextKit renderer (Fabric)
13+ - Nested fragments merge into a single native text view
14+ - Supports only the New Architecture
15+ - Selection: selectable by default, iOS ` selectionColor `
2216
2317## Requirements
2418
@@ -28,7 +22,7 @@ Drop‑in, high‑performance Text for React Native (Fabric). Native iOS renderi
2822## Installation
2923
3024``` bash
31- bun add react-native-nitro-text react-native-nitro-modules
25+ yarn add react-native-nitro-text react-native-nitro-modules
3226```
3327
3428iOS
@@ -41,8 +35,6 @@ That’s it. Nitro autolinking registers the view and codegen output.
4135
4236## Usage
4337
44- Basic
45-
4638``` tsx
4739import { NitroText } from ' react-native-nitro-text'
4840
@@ -55,114 +47,20 @@ export function Title() {
5547}
5648```
5749
58- Rich text (nested fragments)
59-
60- ``` tsx
61- <NitroText style = { { fontSize: 16 , lineHeight: 24 }} >
62- Welcome to <NitroText style = { { fontWeight: ' bold' }} >bold</NitroText > and{ ' ' }
63- <NitroText style = { { fontStyle: ' italic' , color: ' #6f42c1' }} >italic</NitroText >
64- { ' ' } text with colors and sizes.
65- }</NitroText >
66- ```
67-
68- Line limiting and measurement
69-
70- ``` tsx
71- <NitroText
72- numberOfLines = { 2 }
73- ellipsizeMode = " tail"
74- style = { { fontSize: 16 }}
75- >
76- This long text will be truncated with an ellipsis when it exceeds two lines.
77- </NitroText >
78-
79- // Per‑line layout metrics (iOS)
80- <NitroText
81- onTextLayout = { (e ) => console .log (' lines' , e .lines )}
82- style = { { fontSize: 16 }}
83- >
84- Measure my layout after rendering
85- </NitroText >
86- ```
87-
88- Mixed with RN Text
89-
90- ``` tsx
91- <Text >
92- RN <NitroText style = { { fontWeight: ' bold' }} >meets Nitro</NitroText > inside
93- one paragraph.
94- </Text >
95- ```
96-
97- ## Props
98-
99- Unless noted, props mirror React Native Text style behavior through the ` style ` prop.
100-
101- - ` style ` : supports ` color ` , ` backgroundColor ` (applies as fragment highlight), ` fontSize ` , ` fontWeight ` ,
102- ` fontStyle ` , ` fontFamily ` , ` lineHeight ` , ` letterSpacing ` , ` textAlign ` , ` textTransform ` ,
103- ` textDecorationLine ` , ` textDecorationStyle ` , ` textDecorationColor ` .
104- - ` numberOfLines?: number ` : limits visible lines.
105- - ` ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip' ` : truncation behavior when ` numberOfLines ` is set.
106- - ` selectable?: boolean ` (default ` true ` ): enables native selection.
107- - ` selectionColor?: string ` : caret/selection handle tint color (iOS).
108- - ` allowFontScaling?: boolean ` (default ` true ` ): enable Dynamic Type scaling.
109- - ` dynamicTypeRamp?: DynamicTypeRamp ` : iOS UIFontMetrics text style to scale against.
110- - ` maxFontSizeMultiplier?: number ` : caps Dynamic Type scaling multiplier.
111- - ` lineBreakStrategyIOS?: 'none' | 'standard' | 'hangul-word' | 'push-out' ` : iOS line break strategy.
112- - ` onTextLayout?(event) ` : per‑line layout metrics ` { lines: Array<{ text, x, y, width, height, descender, capHeight, ascender, xHeight }> } ` .
113- - ` onPress?() ` , ` onPressIn?() ` , ` onPressOut?() ` : press events.
114-
115- Note: Nested ` <NitroText> ` elements produce styling fragments merged natively.
116-
11750## Platform Support
11851
119- - iOS (Fabric)
120-
121- ## Parity Roadmap
122-
123- Status toward React Native ` Text ` parity. Checked = implemented, unchecked = planned.
124-
125- - [x] Core styles: ` color ` , ` fontSize ` , ` fontWeight ` , ` fontStyle ` , ` lineHeight ` , ` letterSpacing `
126- - [x] Layout/behavior: ` numberOfLines ` , ` ellipsizeMode ` (head/middle/tail/clip), nested spans
127- - [x] Alignment/transform: ` textAlign ` , ` textTransform `
128- - [x] Decorations: ` textDecorationLine ` , ` textDecorationStyle ` , ` textDecorationColor `
129- - [x] Color parsing: decimal ARGB, named colors, hex, ` rgb()/rgba() `
130- - [x] Native selection: iOS selection handles/caret; ` selectionColor `
131- - [x] Measurement: per‑line metrics via ` onTextLayout `
132- - [x] ` fontFamily ` (system families and custom names)
133- - [x] Dynamic Type: ` allowFontScaling ` , ` dynamicTypeRamp ` , ` maxFontSizeMultiplier `
134- - [x] iOS ` lineBreakStrategyIOS `
135- - [ ] ` fontVariant ` (small‑caps, tabular‑nums, oldstyle‑nums, etc.)
136- - [ ] ` hyphenationFactor `
137- - [ ] ` onLongPress ` parity in native path
138- - [ ] Accessibility: roles/labels/hints, nested span accessibility
139- - [ ] Bidi/RTL: ` writingDirection ` , mixed LTR/RTL validation
140- - [ ] Text shadows: ` textShadow* `
141- - [ ] Baseline/typography: ligatures, kerning fine‑tuning
142- - [ ] Inline attachments (inline images/icons) where feasible
143-
144- Priorities: fontFamily, letterSpacing/decoration/shadows, ellipsizeMode parity, press events.
145-
146- ## Text vs NitroText
147-
148- | Aspect | RN ` Text ` | ` NitroText ` |
149- | ----------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
150- | Rendering engine | Platform text primitives via RN | Native iOS TextKit/UITextView via Fabric (reduced JS overhead) |
151- | Performance | General‑purpose, solid for most cases | Optimized for rich text and large lists; faster layout/measurement and smoother selection |
152- | Props coverage | Full RN ` Text ` surface | Core styles, alignment/transform, nested fragments, selection, single‑line ` numberOfLines ` ; rest tracked in roadmap |
153- | Selection | Functional selection behavior | Native iOS selection with precise caret/handles and smooth interaction | | |
154- | Platform support | iOS, Android, Web (via RN impls) | iOS (Fabric) today; Android planned |
155- | Recommended usage | Broad, cross‑platform text needs | Heavy/nested styled text and list performance; native selection/measurement focus |
52+ - iOS
53+ - Android (not implemented yet) - At the moment NitroText fallback to RN ` Text ` .
15654
15755## Why NitroText?
15856
159- NitroText uses Nitro Modules + Fabric to render natively with minimal JS overhead. Text selection, layout, and styling are handled in native code (Swift/C++/Obj‑C++), delivering smooth performance in complex lists and rich text scenarios .
57+ Custom native text view with minimal JS overhead and native iOS selection. Great for heavy/nested styled text and large lists .
16058
16159## Development
16260
163- - ` bun run build ` — typecheck and build package.
164- - ` bun run codegen ` — regenerate Nitrogen codegen outputs.
165- - Example app in ` example/ ` (run pods in ` example/ios ` and start RN).
61+ - ` bun run build ` — typecheck and build package
62+ - ` bun run codegen ` — regenerate codegen outputs
63+ - Example app in ` example/ `
16664
16765## Credits
16866
0 commit comments