Disclaimer -

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!

react-native-selectable-text

A React Native library for custom text selection menus, redesigned from the ground up for React Native 0.81.1 with full support for the new architecture (Fabric).

The SelectableTextView component wraps your text content and provides custom menu options that appear when users select text. It supports nested text styling and cross-platform event handling.

Features

- Cross-platform support (iOS & Android)
- Support for nested text with different styles
- Custom menu options with callback handling

Installation

``sh
npm install @rob117/react-native-selectable-text
`

For iOS, run pod install:
`sh
cd ios && pod install
`

Usage

$3

`tsx
import React, { useState } from 'react';
import { View, Text, Alert } from 'react-native';
import { SelectableTextView } from '@rob117/react-native-selectable-text';

export default function App() {

const handleSelection = (event) => {
const { chosenOption, highlightedText } = event;
Alert.alert(
'Selection Event',
Option: ${chosenOption}\nSelected Text: ${highlightedText}
);
};

return (


menuOptions={['look up', 'copy', 'share']}
onSelection={handleSelection}
style={{ margin: 20 }}
>
This is simple selectable text


);
}
`

$3

`jsx
menuOptions={['Action 1', 'Action 2', 'Custom Action']}
onSelection={handleSelection}
style={{ marginHorizontal: 20 }}
>

This text is black{' '}

this part is underlined and red
{' '}
and this is black again. All of it is selectable with custom menu options!


`

API Reference

$3

| Prop | Type | Required | Description |
| ------------- | --------------------------------- | -------- | ------------------------------------------- |
| children | React.ReactNode | Yes | Text components to make selectable |
| menuOptions | string[] | Yes | Array of menu option strings |
| onSelection | (event: SelectionEvent) => void | No | Callback fired when menu option is selected |
| style | ViewStyle | No | Style object for the container |

$3

The onSelection callback receives an event object with:

`typescript
interface SelectionEvent {
chosenOption: string; // The menu option that was selected
highlightedText: string; // The text that was highlighted by the user
}
``

Requirements

- React Native 0.81.1+
- iOS 11.0+
- Android API level 21+
- React Native's new architecture (Fabric) enabled

Platform Differences

The library handles platform differences internally:
- iOS: Uses direct event handlers for optimal performance
- Android: Uses DeviceEventEmitter for reliable event delivery

Both platforms provide the same API and functionality.

License

MIT

---

Made with create-react-native-library