@thiagobueno/rn-selectable-text 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -49
- package/package.json +158 -161
package/README.md
CHANGED
|
@@ -1,23 +1,26 @@
|
|
|
1
|
-
Disclaimer -
|
|
2
|
-
|
|
3
|
-
I tested this code in my own projects, but this code has been with heavy assistance from Claude Code. If you see a problem - submit a ticket!
|
|
4
|
-
|
|
5
1
|
# rn-selectable-text
|
|
6
2
|
|
|
7
|
-
|
|
3
|
+
[](https://badge.fury.io/js/@thiagobueno%2Frn-selectable-text)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
A highly stable, Fabric-compatible React Native library for custom text selection menus. Redesigned from the ground up for **React Native 0.81+** and the **New Architecture**.
|
|
8
7
|
|
|
9
|
-
The `SelectableTextView` component wraps your text content and provides custom menu options that appear when users select text. It
|
|
8
|
+
The `SelectableTextView` component wraps your text content and provides custom native menu options that appear when users select text. It elegantly handles nested text styling, cross-platform event handling, and modern OS requirements.
|
|
10
9
|
|
|
11
|
-
##
|
|
10
|
+
## 🚀 Why use this package? (Key Fixes)
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
- Support
|
|
15
|
-
-
|
|
12
|
+
This library was heavily refactored to solve critical issues present in older selectable text libraries:
|
|
13
|
+
- **True Fabric Support:** Fully compatible with React Native's New Architecture (C++ Codegen).
|
|
14
|
+
- **iOS 16+ Stability:** Replaces the deprecated and crash-prone `UIMenuController` with the modern `UIEditMenuInteraction` API.
|
|
15
|
+
- **Bypasses iOS Menu Suppression:** Safely mocks copy selectors to prevent the modern iOS engine from suppressing your custom menu.
|
|
16
|
+
- **View Recycling Poisoning Fix:** Solves the severe Fabric bug where sibling UI elements (like icons and buttons) would randomly disappear from the screen due to improper native state cleanups.
|
|
16
17
|
|
|
17
|
-
## Installation
|
|
18
|
+
## 📦 Installation
|
|
18
19
|
|
|
19
20
|
```sh
|
|
20
21
|
yarn add @thiagobueno/rn-selectable-text
|
|
22
|
+
# or
|
|
23
|
+
npm install @thiagobueno/rn-selectable-text
|
|
21
24
|
```
|
|
22
25
|
|
|
23
26
|
For iOS, run pod install:
|
|
@@ -25,12 +28,12 @@ For iOS, run pod install:
|
|
|
25
28
|
cd ios && pod install
|
|
26
29
|
```
|
|
27
30
|
|
|
28
|
-
## Usage
|
|
31
|
+
## 🛠 Usage
|
|
29
32
|
|
|
30
33
|
### Basic Example
|
|
31
34
|
|
|
32
35
|
```tsx
|
|
33
|
-
import React
|
|
36
|
+
import React from 'react';
|
|
34
37
|
import { View, Text, Alert } from 'react-native';
|
|
35
38
|
import { SelectableTextView } from '@thiagobueno/rn-selectable-text';
|
|
36
39
|
|
|
@@ -45,48 +48,78 @@ export default function App() {
|
|
|
45
48
|
};
|
|
46
49
|
|
|
47
50
|
return (
|
|
48
|
-
<View>
|
|
49
|
-
|
|
51
|
+
<View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
|
|
50
52
|
<SelectableTextView
|
|
51
|
-
menuOptions={['
|
|
53
|
+
menuOptions={['Save', 'Share', 'Copy']}
|
|
52
54
|
onSelection={handleSelection}
|
|
53
|
-
style={{ margin: 20 }}
|
|
54
55
|
>
|
|
55
|
-
<Text
|
|
56
|
+
<Text style={{ fontSize: 18, color: '#333' }}>
|
|
57
|
+
Highlight this text to see the custom native menu!
|
|
58
|
+
</Text>
|
|
56
59
|
</SelectableTextView>
|
|
57
60
|
</View>
|
|
58
61
|
);
|
|
59
62
|
}
|
|
60
63
|
```
|
|
61
64
|
|
|
62
|
-
### Advanced Example
|
|
65
|
+
### Advanced Example (Nested Text & Index Mapping)
|
|
66
|
+
|
|
67
|
+
When dealing with internationalization (i18n) or dynamic menus, it's highly recommended to map your selections by index rather than relying on the translated string.
|
|
63
68
|
|
|
64
69
|
```jsx
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
70
|
+
import React from 'react';
|
|
71
|
+
import { View, Text } from 'react-native';
|
|
72
|
+
import { SelectableTextView } from '@thiagobueno/rn-selectable-text';
|
|
73
|
+
|
|
74
|
+
const MENU_OPTIONS = ['Save Note', 'Edit Text', 'Highlight Content'];
|
|
75
|
+
|
|
76
|
+
export default function AdvancedApp() {
|
|
77
|
+
|
|
78
|
+
const handleSelection = ({ chosenOption, highlightedText }) => {
|
|
79
|
+
const actionIndex = MENU_OPTIONS.indexOf(chosenOption);
|
|
80
|
+
|
|
81
|
+
switch(actionIndex) {
|
|
82
|
+
case 0:
|
|
83
|
+
console.log('Action: Save Note - Text:', highlightedText);
|
|
84
|
+
break;
|
|
85
|
+
case 1:
|
|
86
|
+
console.log('Action: Edit Text - Text:', highlightedText);
|
|
87
|
+
break;
|
|
88
|
+
case 2:
|
|
89
|
+
console.log('Action: Highlight Content - Text:', highlightedText);
|
|
90
|
+
break;
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<View style={{ padding: 20 }}>
|
|
96
|
+
<SelectableTextView
|
|
97
|
+
menuOptions={MENU_OPTIONS}
|
|
98
|
+
onSelection={handleSelection}
|
|
99
|
+
>
|
|
100
|
+
<Text style={{ color: 'black', fontSize: 16 }}>
|
|
101
|
+
This text is black, but{' '}
|
|
102
|
+
<Text style={{ fontWeight: 'bold', color: 'blue' }}>
|
|
103
|
+
this part is bold and blue
|
|
104
|
+
</Text>{' '}
|
|
105
|
+
and this is black again. The entire block is selectable!
|
|
106
|
+
</Text>
|
|
107
|
+
</SelectableTextView>
|
|
108
|
+
</View>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
78
111
|
```
|
|
79
112
|
|
|
80
|
-
## API Reference
|
|
113
|
+
## 📖 API Reference
|
|
81
114
|
|
|
82
115
|
### SelectableTextView Props
|
|
83
116
|
|
|
84
117
|
| Prop | Type | Required | Description |
|
|
85
118
|
| ------------- | --------------------------------- | -------- | ------------------------------------------- |
|
|
86
119
|
| `children` | `React.ReactNode` | Yes | Text components to make selectable |
|
|
87
|
-
| `menuOptions` | `string[]` | Yes | Array of menu option strings
|
|
88
|
-
| `onSelection` | `(event: SelectionEvent) => void` | No | Callback fired when menu option is
|
|
89
|
-
| `style` | `ViewStyle` | No | Style object for the container
|
|
120
|
+
| `menuOptions` | `string[]` | Yes | Array of custom menu option strings |
|
|
121
|
+
| `onSelection` | `(event: SelectionEvent) => void` | No | Callback fired when a menu option is tapped |
|
|
122
|
+
| `style` | `ViewStyle` | No | Style object for the native container |
|
|
90
123
|
|
|
91
124
|
### SelectionEvent
|
|
92
125
|
|
|
@@ -94,26 +127,23 @@ The `onSelection` callback receives an event object with:
|
|
|
94
127
|
|
|
95
128
|
```typescript
|
|
96
129
|
interface SelectionEvent {
|
|
97
|
-
chosenOption: string; // The menu option
|
|
98
|
-
highlightedText: string; // The text
|
|
130
|
+
chosenOption: string; // The exact string of the menu option selected
|
|
131
|
+
highlightedText: string; // The specific text highlighted by the user
|
|
99
132
|
}
|
|
100
133
|
```
|
|
101
134
|
|
|
102
|
-
## Requirements
|
|
135
|
+
## ⚙️ Requirements
|
|
103
136
|
|
|
104
137
|
- React Native 0.81.1+
|
|
105
|
-
- iOS
|
|
138
|
+
- iOS 15.1+ (Optimized for modern APIs)
|
|
106
139
|
- Android API level 21+
|
|
107
|
-
- React Native's
|
|
108
|
-
|
|
109
|
-
## Platform Differences
|
|
110
|
-
|
|
111
|
-
The library handles platform differences internally:
|
|
112
|
-
- **iOS**: Uses direct event handlers for optimal performance
|
|
113
|
-
- **Android**: Uses DeviceEventEmitter for reliable event delivery
|
|
140
|
+
- React Native's New Architecture (Fabric) enabled
|
|
114
141
|
|
|
115
|
-
|
|
142
|
+
## 🔄 Platform Differences
|
|
116
143
|
|
|
117
|
-
|
|
144
|
+
The library handles platform differences internally, providing the same API and functionality for both:
|
|
145
|
+
- **iOS**: Uses direct event handlers and the modern `UIEditMenuInteraction` API for optimal performance.
|
|
146
|
+
- **Android**: Uses `DeviceEventEmitter` for reliable event delivery and bridges native selection to the JS thread.
|
|
118
147
|
|
|
148
|
+
## ⚖️ License
|
|
119
149
|
MIT
|
package/package.json
CHANGED
|
@@ -1,170 +1,167 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
"name": "@thiagobueno/rn-selectable-text",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "A library for custom text selection menus",
|
|
6
|
+
"main": "./lib/module/index.js",
|
|
7
|
+
"types": "./lib/typescript/src/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"source": "./src/index.tsx",
|
|
11
|
+
"types": "./lib/typescript/src/index.d.ts",
|
|
12
|
+
"default": "./lib/module/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./package.json": "./package.json"
|
|
13
15
|
},
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"prepare": "bob build",
|
|
42
|
-
"release": "release-it --only-version"
|
|
43
|
-
},
|
|
44
|
-
"keywords": [
|
|
45
|
-
"react-native",
|
|
46
|
-
"ios",
|
|
47
|
-
"android"
|
|
48
|
-
],
|
|
49
|
-
"repository": {
|
|
50
|
-
"type": "git",
|
|
51
|
-
"url": "git+https://github.com/thiagobueno/rn-selectable-text.git"
|
|
52
|
-
},
|
|
53
|
-
"author": "Thiago Bueno (https://github.com/thiagobueno)",
|
|
54
|
-
"license": "MIT",
|
|
55
|
-
"bugs": {
|
|
56
|
-
"url": "https://github.com/thiagobueno/rn-selectable-text/issues"
|
|
57
|
-
},
|
|
58
|
-
"homepage": "https://github.com/thiagobueno/rn-selectable-text#readme",
|
|
59
|
-
"publishConfig": {
|
|
60
|
-
"registry": "https://registry.npmjs.org/"
|
|
61
|
-
},
|
|
62
|
-
"devDependencies": {
|
|
63
|
-
"@commitlint/config-conventional": "^19.8.1",
|
|
64
|
-
"@eslint/compat": "^1.3.2",
|
|
65
|
-
"@eslint/eslintrc": "^3.3.1",
|
|
66
|
-
"@eslint/js": "^9.35.0",
|
|
67
|
-
"@evilmartians/lefthook": "^1.12.3",
|
|
68
|
-
"@react-native-community/cli": "20.0.1",
|
|
69
|
-
"@react-native/babel-preset": "0.81.1",
|
|
70
|
-
"@react-native/eslint-config": "^0.81.1",
|
|
71
|
-
"@release-it/conventional-changelog": "^10.0.1",
|
|
72
|
-
"@types/jest": "^29.5.14",
|
|
73
|
-
"@types/react": "^19.1.0",
|
|
74
|
-
"commitlint": "^19.8.1",
|
|
75
|
-
"del-cli": "^6.0.0",
|
|
76
|
-
"eslint": "^9.35.0",
|
|
77
|
-
"eslint-config-prettier": "^10.1.8",
|
|
78
|
-
"eslint-plugin-prettier": "^5.5.4",
|
|
79
|
-
"jest": "^29.7.0",
|
|
80
|
-
"prettier": "^3.6.2",
|
|
81
|
-
"react": "19.1.0",
|
|
82
|
-
"react-native": "0.81.1",
|
|
83
|
-
"react-native-builder-bob": "^0.40.13",
|
|
84
|
-
"release-it": "^19.0.4",
|
|
85
|
-
"turbo": "^2.5.6",
|
|
86
|
-
"typescript": "^5.9.2"
|
|
87
|
-
},
|
|
88
|
-
"peerDependencies": {
|
|
89
|
-
"react": "*",
|
|
90
|
-
"react-native": "*"
|
|
91
|
-
},
|
|
92
|
-
"workspaces": [
|
|
93
|
-
"example"
|
|
94
|
-
],
|
|
95
|
-
"packageManager": "yarn@3.6.1",
|
|
96
|
-
"jest": {
|
|
97
|
-
"preset": "react-native",
|
|
98
|
-
"modulePathIgnorePatterns": [
|
|
99
|
-
"<rootDir>/example/node_modules",
|
|
100
|
-
"<rootDir>/lib/"
|
|
101
|
-
]
|
|
102
|
-
},
|
|
103
|
-
"commitlint": {
|
|
104
|
-
"extends": [
|
|
105
|
-
"@commitlint/config-conventional"
|
|
106
|
-
]
|
|
107
|
-
},
|
|
108
|
-
"release-it": {
|
|
109
|
-
"git": {
|
|
110
|
-
"commitMessage": "chore: release ${version}",
|
|
111
|
-
"tagName": "v${version}"
|
|
16
|
+
"files": [
|
|
17
|
+
"src",
|
|
18
|
+
"lib",
|
|
19
|
+
"android",
|
|
20
|
+
"ios",
|
|
21
|
+
"cpp",
|
|
22
|
+
"*.podspec",
|
|
23
|
+
"react-native.config.js",
|
|
24
|
+
"!ios/build",
|
|
25
|
+
"!android/build",
|
|
26
|
+
"!android/gradle",
|
|
27
|
+
"!android/gradlew",
|
|
28
|
+
"!android/gradlew.bat",
|
|
29
|
+
"!android/local.properties",
|
|
30
|
+
"!**/__tests__",
|
|
31
|
+
"!**/__fixtures__",
|
|
32
|
+
"!**/__mocks__",
|
|
33
|
+
"!**/.*"
|
|
34
|
+
],
|
|
35
|
+
"scripts": {
|
|
36
|
+
"example": "yarn workspace rn-selectable-text-example",
|
|
37
|
+
"test": "jest",
|
|
38
|
+
"typecheck": "tsc",
|
|
39
|
+
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
40
|
+
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
|
|
41
|
+
"prepare": "bob build",
|
|
42
|
+
"release": "release-it --only-version"
|
|
112
43
|
},
|
|
113
|
-
"
|
|
114
|
-
|
|
44
|
+
"keywords": [
|
|
45
|
+
"react-native",
|
|
46
|
+
"ios",
|
|
47
|
+
"android"
|
|
48
|
+
],
|
|
49
|
+
"repository": {
|
|
50
|
+
"type": "git",
|
|
51
|
+
"url": "git+https://github.com/thiagobueno/rn-selectable-text.git"
|
|
115
52
|
},
|
|
116
|
-
"
|
|
117
|
-
|
|
53
|
+
"author": "Thiago Bueno (https://github.com/thiagobueno)",
|
|
54
|
+
"license": "MIT",
|
|
55
|
+
"bugs": {
|
|
56
|
+
"url": "https://github.com/thiagobueno/rn-selectable-text/issues"
|
|
118
57
|
},
|
|
119
|
-
"
|
|
120
|
-
|
|
121
|
-
"
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
"
|
|
140
|
-
|
|
141
|
-
|
|
58
|
+
"homepage": "https://github.com/thiagobueno/rn-selectable-text#readme",
|
|
59
|
+
"devDependencies": {
|
|
60
|
+
"@commitlint/config-conventional": "^19.8.1",
|
|
61
|
+
"@eslint/compat": "^1.3.2",
|
|
62
|
+
"@eslint/eslintrc": "^3.3.1",
|
|
63
|
+
"@eslint/js": "^9.35.0",
|
|
64
|
+
"@evilmartians/lefthook": "^1.12.3",
|
|
65
|
+
"@react-native-community/cli": "20.0.1",
|
|
66
|
+
"@react-native/babel-preset": "0.81.1",
|
|
67
|
+
"@react-native/eslint-config": "^0.81.1",
|
|
68
|
+
"@release-it/conventional-changelog": "^10.0.1",
|
|
69
|
+
"@types/jest": "^29.5.14",
|
|
70
|
+
"@types/react": "^19.1.0",
|
|
71
|
+
"commitlint": "^19.8.1",
|
|
72
|
+
"del-cli": "^6.0.0",
|
|
73
|
+
"eslint": "^9.35.0",
|
|
74
|
+
"eslint-config-prettier": "^10.1.8",
|
|
75
|
+
"eslint-plugin-prettier": "^5.5.4",
|
|
76
|
+
"jest": "^29.7.0",
|
|
77
|
+
"prettier": "^3.6.2",
|
|
78
|
+
"react": "19.1.0",
|
|
79
|
+
"react-native": "0.81.1",
|
|
80
|
+
"react-native-builder-bob": "^0.40.13",
|
|
81
|
+
"release-it": "^19.0.4",
|
|
82
|
+
"turbo": "^2.5.6",
|
|
83
|
+
"typescript": "^5.9.2"
|
|
84
|
+
},
|
|
85
|
+
"peerDependencies": {
|
|
86
|
+
"react": "*",
|
|
87
|
+
"react-native": "*"
|
|
88
|
+
},
|
|
89
|
+
"workspaces": [
|
|
90
|
+
"example"
|
|
91
|
+
],
|
|
92
|
+
"packageManager": "yarn@3.6.1",
|
|
93
|
+
"jest": {
|
|
94
|
+
"preset": "react-native",
|
|
95
|
+
"modulePathIgnorePatterns": [
|
|
96
|
+
"<rootDir>/example/node_modules",
|
|
97
|
+
"<rootDir>/lib/"
|
|
98
|
+
]
|
|
99
|
+
},
|
|
100
|
+
"commitlint": {
|
|
101
|
+
"extends": [
|
|
102
|
+
"@commitlint/config-conventional"
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
"release-it": {
|
|
106
|
+
"git": {
|
|
107
|
+
"commitMessage": "chore: release ${version}",
|
|
108
|
+
"tagName": "v${version}"
|
|
109
|
+
},
|
|
110
|
+
"npm": {
|
|
111
|
+
"publish": true
|
|
112
|
+
},
|
|
113
|
+
"github": {
|
|
114
|
+
"release": true
|
|
115
|
+
},
|
|
116
|
+
"plugins": {
|
|
117
|
+
"@release-it/conventional-changelog": {
|
|
118
|
+
"preset": {
|
|
119
|
+
"name": "angular"
|
|
120
|
+
}
|
|
121
|
+
}
|
|
142
122
|
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
"
|
|
146
|
-
|
|
147
|
-
|
|
123
|
+
},
|
|
124
|
+
"prettier": {
|
|
125
|
+
"quoteProps": "consistent",
|
|
126
|
+
"singleQuote": true,
|
|
127
|
+
"tabWidth": 2,
|
|
128
|
+
"trailingComma": "es5",
|
|
129
|
+
"useTabs": false
|
|
130
|
+
},
|
|
131
|
+
"react-native-builder-bob": {
|
|
132
|
+
"source": "src",
|
|
133
|
+
"output": "lib",
|
|
134
|
+
"targets": [
|
|
135
|
+
[
|
|
136
|
+
"module",
|
|
137
|
+
{
|
|
138
|
+
"esm": true
|
|
139
|
+
}
|
|
140
|
+
],
|
|
141
|
+
[
|
|
142
|
+
"typescript",
|
|
143
|
+
{
|
|
144
|
+
"project": "tsconfig.build.json"
|
|
145
|
+
}
|
|
146
|
+
]
|
|
147
|
+
]
|
|
148
|
+
},
|
|
149
|
+
"codegenConfig": {
|
|
150
|
+
"name": "SelectableTextViewSpec",
|
|
151
|
+
"type": "all",
|
|
152
|
+
"jsSrcsDir": "src",
|
|
153
|
+
"android": {
|
|
154
|
+
"javaPackageName": "com.selectabletext"
|
|
155
|
+
},
|
|
156
|
+
"ios": {
|
|
157
|
+
"componentProvider": {
|
|
158
|
+
"SelectableTextView": "SelectableTextView"
|
|
159
|
+
}
|
|
148
160
|
}
|
|
149
|
-
]
|
|
150
|
-
]
|
|
151
|
-
},
|
|
152
|
-
"codegenConfig": {
|
|
153
|
-
"name": "SelectableTextViewSpec",
|
|
154
|
-
"type": "all",
|
|
155
|
-
"jsSrcsDir": "src",
|
|
156
|
-
"android": {
|
|
157
|
-
"javaPackageName": "com.selectabletext"
|
|
158
161
|
},
|
|
159
|
-
"
|
|
160
|
-
|
|
161
|
-
"
|
|
162
|
-
|
|
162
|
+
"create-react-native-library": {
|
|
163
|
+
"languages": "kotlin-objc",
|
|
164
|
+
"type": "fabric-view",
|
|
165
|
+
"version": "0.54.2"
|
|
163
166
|
}
|
|
164
|
-
|
|
165
|
-
"create-react-native-library": {
|
|
166
|
-
"languages": "kotlin-objc",
|
|
167
|
-
"type": "fabric-view",
|
|
168
|
-
"version": "0.54.2"
|
|
169
|
-
}
|
|
170
|
-
}
|
|
167
|
+
}
|