react-native-wiser-selectable-text

Selectable text component for React Native with:

• Custom selection menu actions
• Native onSelectionChange and onActionPress events
• Persistent highlights (highlights + highlightColor)
• iOS + Android support

Install

yarn add react-native-wiser-selectable-text

iOS:

cd ios && pod install

Usage

import SelectableText from 'react-native-wiser-selectable-text';

<SelectableText
  text="Hello world"
  menuConfig={{
    actions: [
      { id: 'copy', title: 'Copy' },
      { id: 'highlight', title: 'Highlight' },
    ],
  }}
  highlights={[{ id: '1', start: 0, end: 5 }]}
  highlightColor="#FFEB3B88"
  onActionPress={(event) => {
    const { actionId, selectedText, start, end } = event.nativeEvent;
    console.log(actionId, selectedText, start, end);
  }}
/>

Props

• text?: string
• children?: React.ReactNode
• menuConfig?: { actions?: Array<{ id: string; title: string }> }
• highlights?: Array<{ id: string; start: number; end: number }>
• highlightColor?: ColorValue
• onSelectionChange?: ({ nativeEvent: { start, end, selectedText } }) => void
• onActionPress?: ({ nativeEvent: { actionId, title, start, end, selectedText } }) => void
• Text style props via style (fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textAlign, color)

License

MIT