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

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

For iOS, run pod install:

cd ios && pod install

Usage

Basic Example

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 (
    <View>

      <SelectableTextView
        menuOptions={['look up', 'copy', 'share']}
        onSelection={handleSelection}
        style={{ margin: 20 }}
      >
        <Text>This is simple selectable text</Text>
      </SelectableTextView>
    </View>
  );
}

Advanced Example with Nested Text Styling

<SelectableTextView
  menuOptions={['Action 1', 'Action 2', 'Custom Action']}
  onSelection={handleSelection}
  style={{ marginHorizontal: 20 }}
>
  <Text style={{ color: 'black', fontSize: 16 }}>
    This text is black{' '}
    <Text style={{ textDecorationLine: 'underline', color: 'red' }}>
      this part is underlined and red
    </Text>{' '}
    and this is black again. All of it is selectable with custom menu options!
  </Text>
</SelectableTextView>

API Reference

SelectableTextView Props

| 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 |

SelectionEvent

The onSelection callback receives an event object with:

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