@jurishandapp/react-native-selectable-text NPM

react-native-selectable-text

This project came up to try to get around the lack of libraries related to text selection in React Native. If you support the project, feel free to interact and help improve the library.

Now available for IOS

Installation

npm install @jurishandapp/react-native-selectable-text --save
yarn add @jurishandapp/react-native-selectable-text

Linking

If the project has an error, run the following command

react-native link @jurishandapp/react-native-selectable-text

Manual Installation

Android

Open up android/app/src/main/java/[...]/MainApplication.java

Add import com.reactnativeselectabletext.SelectableTextPackage; to the imports at the top of the file

Append the following lines to android/settings.gradle:

 include ':@jurishandapp_react-native-selectable-text'
 project(':@jurishandapp_react-native-selectable-text').projectDir = new File(rootProject.projectDir, 
 '../node_modules/@jurishandapp/react-native-selectable-text/android')

iOS - Binary Linking (Alternative 1)

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

iOS - Pods (Alternative 2)

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

Usage

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

// Use normally, it is a drop-in replacement for react-native/Text
<SelectableText
  menuItems={["Custom 1", "Custom 1"]}
  /* 
    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="Text example"
/>;

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	() => {}
onCreateSelection	Called when user initiates selection	({ content: string, selectionStart: int, selectionEnd: int }) => void	() => {}
onChangeSelection	Called when user moves selection	({ content: string, selectionStart: int, selectionEnd: int }) => void	() => {}
onDestroySelection	Called when the selection is closed	({ 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	() => {}
enabledContextMenu	enable context menu	boolean	true
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