From 6cd712713b1673f13510bc127ac970648f9b5eb3 Mon Sep 17 00:00:00 2001
From: Mike Lambert <mlambert@gmail.com>
Date: Wed, 22 Jun 2016 19:07:31 -0700
Subject: [PATCH] Support selectable={true} property on Text fields on Android.

Summary:
Explain the **motivation** for making this change. What existing problem does the pull request solve?

This adds support for a text field that the user can click-and-drag to select text (which can then be copied using the native selected-text-hover-widget).

I'd love to add this to iOS too, but iOS appears to draw glyphs directly to the screen for its <Text> widget (versus using UITextField), so it might be too difficult to support there. But at least I can support my Android users with this change.

Let me know if/what kind of "demonstrate the code is solid" you would like for this. A screenshot of selected text with this property set?
Closes https://github.com/facebook/react-native/pull/8028

Differential Revision: D3474196

Pulled By: bestander

fbshipit-source-id: 8d3656681265a0e6229bfa13ff2ae021e894d3cd
---
 Examples/UIExplorer/TextExample.android.js                  | 5 +++++
 Libraries/Text/Text.js                                      | 6 ++++++
 .../com/facebook/react/views/text/ReactTextViewManager.java | 5 +++++
 3 files changed, 16 insertions(+)

diff --git a/Examples/UIExplorer/TextExample.android.js b/Examples/UIExplorer/TextExample.android.js
index c557162b7..230bd79bb 100644
--- a/Examples/UIExplorer/TextExample.android.js
+++ b/Examples/UIExplorer/TextExample.android.js
@@ -378,6 +378,11 @@ var TextExample = React.createClass({
             No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
           </Text>
         </UIExplorerBlock>
+        <UIExplorerBlock title="selectable attribute">
+          <Text selectable={true}>
+            This text is selectable if you click-and-hold, and will offer the native Android selection menus.
+          </Text>
+        </UIExplorerBlock>
         <UIExplorerBlock title="Inline images">
           <Text>
             This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index aab015b6b..9abd4127b 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -31,6 +31,7 @@ const viewConfig = {
     numberOfLines: true,
     lineBreakMode: true,
     allowFontScaling: true,
+    selectable: true,
   }),
   uiViewClassName: 'RCTText',
 };
@@ -95,6 +96,11 @@ const Text = React.createClass({
      * This function is called on long press.
      */
     onLongPress: React.PropTypes.func,
+    /**
+     * Lets the user select text, to use the native copy and paste functionality.
+     * @platform android
+     */
+    selectable: React.PropTypes.bool,
     /**
      * When true, no visual change is made when text is pressed down. By
      * default, a gray oval highlights the text on press down.
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java
index eabbf7b62..97e780a6d 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java
@@ -112,6 +112,11 @@ public class ReactTextViewManager extends BaseViewManager<ReactTextView, ReactTe
     }
   }
 
+  @ReactProp(name = "selectable")
+  public void setSelectable(ReactTextView view, boolean isSelectable) {
+    view.setTextIsSelectable(isSelectable);
+  }
+
   @Override
   public void updateExtraData(ReactTextView view, Object extraData) {
     ReactTextUpdate update = (ReactTextUpdate) extraData;