Skip to content

Commit c0e28ae

Browse files
authored
Merge branch 'main' into dependabot/npm_and_yarn/babel-ca6f0c6ed4
2 parents 3913977 + bcf72bf commit c0e28ae

5 files changed

Lines changed: 61 additions & 26 deletions

File tree

README.md

Lines changed: 51 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
1-
<div>
2-
<img width="2652" height="611" alt="Group 18 1" src="https://github.com/user-attachments/assets/72c83d81-d887-4f91-9197-19007990bfa1" />
1+
<div align="center">
2+
<h1>react-native-nitro-text</h1>
33
</div>
44

5-
<br />
5+
<p align="center">
6+
A Text component that is much richer and performant for both iOS and Android.
7+
</p>
68

7-
[![Version](https://img.shields.io/npm/v/react-native-nitro-text.svg)](https://www.npmjs.com/package/react-native-nitro-text)
8-
[![Downloads](https://img.shields.io/npm/dm/react-native-nitro-text.svg)](https://www.npmjs.com/package/react-native-nitro-text)
9-
[![License](https://img.shields.io/npm/l/react-native-nitro-text.svg)](https://github.com/patrickkabwe/react-native-nitro-text/LICENSE)
9+
10+
<div align="center">
11+
12+
https://github.com/user-attachments/assets/57f56b3f-3988-4235-af83-a5f2cfd82121
13+
14+
</div>
15+
16+
<div align="center">
17+
18+
[![npm version](https://img.shields.io/npm/v/react-native-nitro-text?style=for-the-badge)](https://www.npmjs.org/package/react-native-nitro-text)
19+
[![npm downloads](https://img.shields.io/npm/dt/react-native-nitro-text.svg?style=for-the-badge)](https://www.npmjs.org/package/react-native-nitro-text)
20+
[![npm downloads](https://img.shields.io/npm/dm/react-native-nitro-text.svg?style=for-the-badge)](https://www.npmjs.org/package/react-native-nitro-text)
21+
[![mit licence](https://img.shields.io/dub/l/vibe-d.svg?style=for-the-badge)](https://github.com/patrickkabwe/react-native-nitro-text/blob/main/LICENSE)
22+
23+
</div>
24+
25+
---
1026

1127
## Features
1228

13-
- Works on both iOS and Android(currently fallback to RN `Text`)
14-
- Native iOS TextKit renderer (Fabric)
29+
- Works on both iOS and Android(currently fallback to RN `Text` on Android)
30+
- Native iOS rendering with smooth selection.
1531
- Nested fragments merge into a single native text view
32+
- Rendering Markdown and HTML (coming soon).
1633
- Supports only the New Architecture
17-
- Selection: selectable by default, iOS `selectionColor`
1834

1935
## Requirements
2036

@@ -30,37 +46,55 @@ yarn add react-native-nitro-text react-native-nitro-modules
3046
iOS
3147

3248
```bash
33-
cd ios && pod install && cd -
49+
cd ios && pod install && cd ..
3450
```
3551

36-
That’s it. Nitro autolinking registers the view and codegen output.
52+
That’s it. You can now use the `NitroText` component in your app.
3753

3854
## Usage
3955

4056
```tsx
41-
import { NitroText } from 'react-native-nitro-text'
57+
import { NitroText as Text } from 'react-native-nitro-text'
4258

4359
export function Title() {
4460
return (
45-
<NitroText style={{ fontSize: 24, fontWeight: 'bold' }}>
61+
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>
4662
🚀 NitroText Showcase
47-
</NitroText>
63+
</Text>
64+
)
65+
}
66+
```
67+
68+
## Selection
69+
70+
iOS uses native selection. On Android, NitroText currently falls back to React Native `Text`.
71+
72+
```tsx
73+
import { NitroText as Text } from 'react-native-nitro-text'
74+
75+
export function SelectionExample() {
76+
return (
77+
<Text selectable style={{ fontSize: 16, lineHeight: 22 }}>
78+
Long-press to select this text. NitroText supports smooth selection,
79+
even with <Text style={{ fontWeight: '600' }}>inline styles</Text> and
80+
longer paragraphs.
81+
</Text>
4882
)
4983
}
5084
```
5185

5286
## Platform Support
5387

5488
- iOS
55-
- Android (not implemented yet) - At the moment NitroText fallback to RN `Text`.
89+
- Android - At the moment `NitroText` fallback to RN `Text`.
5690

5791
## Why NitroText?
5892

59-
Custom native text view with minimal JS overhead and native iOS selection. Great for heavy/nested styled text and large lists.
93+
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.
6094

6195
## Development
6296

63-
- `bun run build` — typecheck and build package
97+
- `bun run build` — typecheck and build the package
6498
- `bun run codegen` — regenerate codegen outputs
6599
- Example app in `example/`
66100

example/ios/Podfile.lock

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ PODS:
55
- FBLazyVector (0.81.4)
66
- fmt (11.0.2)
77
- glog (0.3.5)
8-
- hermes-engine (0.81.1):
9-
- hermes-engine/Pre-built (= 0.81.1)
10-
- hermes-engine/Pre-built (0.81.1)
8+
- hermes-engine (0.81.4):
9+
- hermes-engine/Pre-built (= 0.81.4)
10+
- hermes-engine/Pre-built (0.81.4)
1111
- NitroModules (0.29.4):
1212
- boost
1313
- DoubleConversion
@@ -2642,9 +2642,9 @@ SPEC CHECKSUMS:
26422642
FBLazyVector: 941bef1c8eeabd9fe1f501e30a5220beee913886
26432643
fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
26442644
glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
2645-
hermes-engine: 4f8246b1f6d79f625e0d99472d1f3a71da4d28ca
2645+
hermes-engine: 35c763d57c9832d0eef764316ca1c4d043581394
26462646
NitroModules: 8d96528777600e967d371fd62b7eb183e9204530
2647-
NitroText: 17e2d9ccc7cadd5760d6dad948f3cb6ef8f6558b
2647+
NitroText: 3b45eefe7bc7e19e256e2d6f18be4a1068b4d35e
26482648
RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
26492649
RCTDeprecation: c0ed3249a97243002615517dff789bf4666cf585
26502650
RCTRequired: 58719f5124f9267b5f9649c08bf23d9aea845b23

ios/HybridNitroText.swift

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@ class HybridNitroText: HybridNitroTextSpec, NitroTextViewDelegate {
113113

114114
var selectionColor: String? {
115115
didSet {
116-
if let v = selectionColor, let c = ColorParser.parse(v) {
117-
textView.tintColor = c
116+
if let v = selectionColor, let color = ColorParser.parse(v) {
117+
textView.tintColor = color
118118
}
119119
}
120120
}

ios/NitroTextView.swift

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,9 @@ final class NitroTextView: UITextView {
7272

7373
override func layoutSubviews() {
7474
super.layoutSubviews()
75+
guard let delegate = nitroTextDelegate else { return }
7576
if let layout = computeTextLayoutEvent() {
76-
nitroTextDelegate?.onNitroTextLayout(layout)
77+
delegate.onNitroTextLayout(layout)
7778
}
7879
}
7980

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-native-nitro-text",
33
"version": "0.1.0",
4-
"description": "Drop‑in, high‑performance Text for React Native (Fabric). Native iOS rendering with smooth selection, rich styling fragments, precise measurement, and line limiting.",
4+
"description": "A Text component that is much richer and performant for both iOS and Android.",
55
"main": "./lib/commonjs/index.js",
66
"module": "./lib/module/index.js",
77
"types": "./lib/typescript/src/index.d.ts",

0 commit comments

Comments
 (0)