Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to programmatically select text in a TextInput component

Tags:

react-native

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

like image 654
Funk Soul Ninja Avatar asked Jun 23 '17 09:06

Funk Soul Ninja


People also ask

Is there a way to programmatically highlight text inside a textinput component?

Is there a way to programmatically highlight/select text that is inside a TextInput component? Show activity on this post. You can use selectTextOnFocus to achieve this. This will ensure that all text inside the TextInput is highlighted when the field is tapped into. Show activity on this post.

How do I edit text in textinput?

The TextInput class supports the editing of text. It displays a background skin and uses a text editor to allow the user to modify the text. First, let's create a TextInput control and add it to the display list:

What are the features of text input?

It can perform validation of required field, minimum or maximum length, email and URL formats, regular expression patterns, and custom rules. Text Input can display a character count, automatically capitalize or check spelling, and supports autofill types. The following examples demonstrate some of the available functionality for Text Input.

How to create a textinput in React Native?

For creating a TextInput in react native we have to import the TextInput component from React Native. allowFontScaling: This property will specify if the fonts will scale to respect Text Size accessibility settings. The default value for this is true.


3 Answers

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

like image 168
G0dsquad Avatar answered Nov 29 '22 07:11

G0dsquad


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

like image 32
Arnav Yagnik Avatar answered Nov 29 '22 07:11

Arnav Yagnik


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>
    );
  }
}
like image 22
Funk Soul Ninja Avatar answered Nov 29 '22 07:11

Funk Soul Ninja