All Projects → Astrocoders → React Native Selectable Text

Astrocoders / React Native Selectable Text

Licence: mit
Capture text selection and customize the action menu

Projects that are alternatives of or similar to React Native Selectable Text

React Native Directed Scrollview
UNMAINTAINED- see below. A natively implemented scrollview component which lets you specify different scroll directions for child content.
Stars: ✭ 139 (-20.11%)
Mutual labels:  native
Smenu
smenu started as a lightweight and flexible terminal menu generator, but quickly evolved into a powerful and versatile CLI selection tool for interactive or scripting use.
Stars: ✭ 1,906 (+995.4%)
Mutual labels:  selection
Robot Js
Native system automation for node.js
Stars: ✭ 169 (-2.87%)
Mutual labels:  native
Nativelogin
Authorization form in native iOS style
Stars: ✭ 140 (-19.54%)
Mutual labels:  native
Gta V Data Dumps
GTA V Data dumps useful for modding & scripting
Stars: ✭ 148 (-14.94%)
Mutual labels:  native
Cs2cpp
C# to C++ transpiler (Cs2Cpp) (Powered by Roslyn)
Stars: ✭ 155 (-10.92%)
Mutual labels:  native
Proton Native
A React environment for cross platform desktop apps
Stars: ✭ 10,834 (+6126.44%)
Mutual labels:  native
Node Inline Cpp
Inline C++ with Node.js
Stars: ✭ 172 (-1.15%)
Mutual labels:  native
Androidsecurity
Android安全实践
Stars: ✭ 150 (-13.79%)
Mutual labels:  native
Expo Voxel
🎮🌳 Voxel Terrain made in React Native. ∛
Stars: ✭ 169 (-2.87%)
Mutual labels:  native
Drag Select Recyclerview
👇 Easy Google Photos style multi-selection for RecyclerViews, powered by Kotlin and AndroidX.
Stars: ✭ 1,818 (+944.83%)
Mutual labels:  selection
Purescript Presto
Write Apps like Mathematical Equations!
Stars: ✭ 149 (-14.37%)
Mutual labels:  native
Context Menu.ios
You can easily add awesome animated context menu to your app.
Stars: ✭ 1,854 (+965.52%)
Mutual labels:  context-menu
Conari
🧬 Platform for unmanaged memory, pe-modules, related PInvoke features, and more for: Libraries, Executable Modules, enjoy using of the unmanaged native C/C++ in .NET world, and other raw binary data …
Stars: ✭ 138 (-20.69%)
Mutual labels:  native
Jquery Ui Contextmenu
jQuery plugin that turns a jQueryUI menu widget into a context menu.
Stars: ✭ 170 (-2.3%)
Mutual labels:  context-menu
Stunning Signature
Native Signature Verification For Android (with example)
Stars: ✭ 139 (-20.11%)
Mutual labels:  native
Jpegkit Android
Efficient JPEG operations for Android without the risk of an OutOfMemoryException.
Stars: ✭ 154 (-11.49%)
Mutual labels:  native
Deeputteranceaggregation
Modeling Multi-turn Conversation with Deep Utterance Aggregation (COLING 2018)
Stars: ✭ 171 (-1.72%)
Mutual labels:  selection
Jswebview
基于JsBridge封装的高效自带加载进度条的WebView
Stars: ✭ 171 (-1.72%)
Mutual labels:  native
Node Postal
NodeJS bindings to libpostal for fast international address parsing/normalization
Stars: ✭ 165 (-5.17%)
Mutual labels:  native

react-native-selectable-text

Demo

Android

iOS

Usage

import { SelectableText } from "@astrocoders/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 @astrocoders/react-native-selectable-text --save

Mostly automatic installation

$ react-native link @astrocoders/react-native-selectable-text

Manual installation

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@astrocoders/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/@astrocoders/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.astrocoders.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/@astrocoders/react-native-selectable-text/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile 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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].