How to programmatically select text in a TextInput component

Question

Is there a way to programmatically highlight/select text that is inside a TextInput component?

Answer 1

You can use selectTextOnFocus to achieve this. This will ensure that all text inside the TextInput is highlighted when the field is tapped into.

Answer 2

Actually you can, by accessing textInput's method by refs.

<TextInput ref={input => this.myInput = input} selectTextOnFocus style={{height: 100, width: 100}} defaultValue='Hey there' />

and where you want to select all text programmatically you can

this.myInput.focus()

works on iOS, not sure about android.

---

---

Reference : http://facebook.github.io/react-native/releases/0.45/docs/textinput.html#selectionstate

Answer 3

I don't know if there's a better way, but I found a workaround. The text has to be focused first. Here's an example

import React { Component } from 'react';
import { Button, TextInput, findNodeHandle } from 'react-native';
import TextInputState from 'react-native/lib/TextInputState';

class MyComponent extends Component {
  render() {
    return (
      <View style={{ flex: 1, }}>
        <Button
          title="select text"
          onPress={() => {
            TextInputState.focusTextInput(findNodeHandle(this.inputRef))
          }}
        </
        <TextInput
          selectTextOnFocus
          ref={ref => this.inputRef = ref}
        />
      </View>
    );
  }
}