Skip to content

AlenToma/react-native-selectable-text

 
 

Repository files navigation

react-native-selectable-text

This is the updated version of @astrocoders/react-native-selectable-text.

Demo

Android

iOS

Usage

import { SelectableText } from "@alentoma/react-native-selectable-text";

// Use normally, it is a drop-in replacement for react-native/Text
<SelectableText
  menuItems={["Foo", "Bar"]}
  /* 
    Called when the user taps in a item of the selection menu:
    - eventType: (string) is the label
    - content: (string) the selected text portion
    - selectionStart: (int) is the start position of the selected text
    - selectionEnd: (int) is the end position of the selected text
   */
  onSelection={({ eventType, content, selectionStart, selectionEnd }) => {}}
  value="I crave star damage"
/>;

Getting started

$ npm install @alentoma/react-native-selectable-text --save

Manual installation

Create react-native.config.js in the root directory and execlude @alentoma/react-native-selectable-text from linking

module.exports = {
    dependencies: {
        "@alentoma/react-native-selectable-text": {
            platforms: {
                android: null, // disable Android platform, other platforms will still autolink if provided
                ios: null // disable IOS platform, other platforms will still autolink if provided
            }
        }
    }
}

iOS - Binary Linking (Alternative 1)

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modules@alentoma/react-native-selectable-text and add RNSelectableText.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNSelectableText.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

iOS - Pods (Alternative 2)

  1. Add pod 'RNSelectableText', :path => '../node_modules/@alentoma/react-native-selectable-text/ios/RNSelectableText.podspec' to your projects podfile
  2. run pod install

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.alentoma.selectabletext.RNSelectableTextPackage; to the imports at the top of the file
  • Add new RNSelectableTextPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-selectable-text'
    project(':react-native-selectable-text').projectDir = new File(rootProject.projectDir, 	'../node_modules/@alentoma/react-native-selectable-text/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      implementation project(':react-native-selectable-text')
    

Props

name description type default
value text content string ""
onSelection Called when the user taps in a item of the selection menu ({ eventType: string, content: string, selectionStart: int, selectionEnd: int }) => void () => {}
menuItems context menu items array(string) []
style additional styles to be applied to text Object null
highlights array of text ranges that should be highlighted with an optional id array({ id: string, start: int, end: int }) []
highlightColor highlight color string null
onHighlightPress called when the user taps the highlight (id: string) => void () => {}
appendToChildren element to be added in the last line of text ReactNode null
TextComponent Text component used to render value ReactNode
textValueProp text value prop for TextComponent. Should be used when passing TextComponent. Defaults to 'children' which works for string 'children'
textComponentProps additional props to pass to TextComponent object null

About

Capture text selection and customize the action menu

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Objective-C 64.1%
  • Java 27.8%
  • Ruby 7.4%
  • TypeScript 0.7%