[add] 'selectable' prop to Text

docs/components/Text.md

@@ -32,7 +32,7 @@ Note: Avoid changing `accessibilityRole` values over time or after user
 actions. Generally, accessibility APIs do not provide a means of notifying
 assistive technologies of a `role` value change.
 
-(web) **accessible**: bool = true
+**accessible**: bool = true
 
 When `false`, the text is hidden from assistive technologies. (This is
 implemented using `aria-hidden`.)
@@ -54,6 +54,10 @@ height } } }`, where `x` and `y` are the offsets from the parent node.
 
 This function is called on press.
 
+**selectable**: bool = true
+
+Lets the user select the text.
+
 **style**: style
 
 + ...[View#style](View.md)

src/components/Text/__tests__/index-test.js

@@ -31,4 +31,11 @@ suite('components/Text', () => {
       done()
     }
   })
+
+  test('prop "selectable"', () => {
+    let text = shallow(<Text />)
+    assert.equal(text.prop('style').userSelect, undefined)
+    text = shallow(<Text selectable={false} />)
+    assert.equal(text.prop('style').userSelect, 'none')
+  })
 })

src/components/Text/index.js

@@ -11,18 +11,20 @@ class Text extends Component {
 
   static propTypes = {
     accessibilityLabel: createReactDOMComponent.propTypes.accessibilityLabel,
-    accessibilityRole: createReactDOMComponent.propTypes.accessibilityRole,
+    accessibilityRole: PropTypes.oneOf([ 'heading', 'link' ]),
     accessible: createReactDOMComponent.propTypes.accessible,
     children: PropTypes.any,
     numberOfLines: PropTypes.number,
     onLayout: PropTypes.func,
     onPress: PropTypes.func,
+    selectable: PropTypes.bool,
     style: StyleSheetPropType(TextStylePropTypes),
     testID: createReactDOMComponent.propTypes.testID
   };
 
   static defaultProps = {
-    accessible: true
+    accessible: true,
+    selectable: true
   };
 
   render() {
@@ -30,6 +32,7 @@ class Text extends Component {
       numberOfLines,
       onLayout, // eslint-disable-line
       onPress, // eslint-disable-line
+      selectable,
       style,
       ...other
     } = this.props
@@ -41,6 +44,7 @@ class Text extends Component {
       style: [
         styles.initial,
         style,
+        !selectable && styles.notSelectable,
         numberOfLines === 1 && styles.singleLineStyle
       ]
     })
@@ -63,6 +67,9 @@ const styles = StyleSheet.create({
     textDecorationLine: 'none',
     wordWrap: 'break-word'
   },
+  notSelectable: {
+    userSelect: 'none'
+  },
   singleLineStyle: {
     maxWidth: '100%',
     overflow: 'hidden',