@eraydemirok/react-native-selectable-text

A selectable, styleable text component for React Native with customizable native selection menu actions.

Features

• Native text selection support on iOS and Android
• Supports common text styles: color, fontSize, fontWeight, fontStyle, fontFamily, lineHeight, textAlign
• Optional custom action menu items with onActionPress callback
• Selection range callback with onSelectionChange
• Supports both children and text input

Installation

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

Basic Usage

import SelectableText from '@eraydemirok/react-native-selectable-text';

export function Example() {
  return (
    <SelectableText style={{ fontSize: 16, color: '#1f2937' }}>
      Bu metin secilebilir.
    </SelectableText>
  );
}

Usage Examples

1. Styling (font, color, alignment)

<SelectableText
  style={{
    color: '#0f172a',
    fontSize: 18,
    fontWeight: '600',
    lineHeight: 26,
    textAlign: 'left',
  }}
>
  Stil ozellikleri native tarafa aktarilir.
</SelectableText>

2. Custom menu actions

<SelectableText
  text="Select any part of this text"
  menuConfig={{
    actions: [
      { id: 'highlight', title: 'Highlight' },
      { id: 'share', title: 'Share' },
      { id: 'translate', title: 'Translate' },
    ],
  }}
  onActionPress={(event) => {
    const { actionId, selectedText } = event.nativeEvent;
    console.log('action:', actionId, 'text:', selectedText);
  }}
/>

3. Selection tracking

<SelectableText
  text="Track selected range"
  onSelectionChange={(event) => {
    const { start, end, selectedText } = event.nativeEvent;
    console.log({ start, end, selectedText });
  }}
/>

4. Controlled text source (text prop)

<SelectableText text="This value is used directly." />

Props

| Prop | Type | Default | Description | | ------------------- | ---------------------- | ----------- | ---------------------------------------------------------------- | | text | string | undefined | Text content. If omitted, text is flattened from children. | | children | React.ReactNode | undefined | Alternative content source. Used when text is not provided. | | style | StyleProp<TextStyle> | undefined | Text style. Common text properties are forwarded to native side. | | selectable | boolean | true | Enables or disables selection. | | numberOfLines | number | 0 | Max line count. 0 means unlimited lines. | | menuConfig | MenuConfig | undefined | Selection menu configuration and custom actions. | | onSelectionChange | (event) => void | undefined | Triggered when selected range changes. | | onActionPress | (event) => void | undefined | Triggered when a custom/native action is pressed. |

menuConfig

| Field | Type | Default | Description | | ----------------- | --------------------------------- | ------- | --------------------------------------- | | actions | { id: string; title: string }[] | [] | Custom actions shown in selection menu. |

actions bos birakilirsa secim menusu aksiyon gostermez. copy ve select_all dahil tum aksiyonlar listeye eklenmelidir.

Built-in native action ids

• share
• highlight
• copy
• select_all
• web_search
• translate
• call
• sms
• email
• maps

Accepted action aliases

• selectAll or selectall -> select_all
• webSearch or websearch -> web_search
• mail -> email
• map -> maps

For unsupported ids, native action is skipped and only onActionPress is emitted.

License

MIT