Skip to content

Commit 9a2fed8

Browse files
authored
Merge pull request #32 from patrickkabwe/perf/ios-setFragments-optimizations
docs(README): keep the docs simple
2 parents ade2d1c + 94936ae commit 9a2fed8

1 file changed

Lines changed: 12 additions & 114 deletions

File tree

README.md

Lines changed: 12 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -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

3428
iOS
@@ -41,8 +35,6 @@ That’s it. Nitro autolinking registers the view and codegen output.
4135

4236
## Usage
4337

44-
Basic
45-
4638
```tsx
4739
import { 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

Comments
 (0)