CODEWITHSUNDEEP
javascriptreactjswebreact-native
firebolt_ash
firebolt_ash

Reputation: 1324

react native text input disable selection of text entered

I have a Text Input that I am using in React Native and want to disable Text Selection and further options that are show in the image :-

enter image description here

Can someone help me with this ?

Upvotes: 1

Views: 14168

Answers (5)

sommesh
sommesh

Reputation: 933

You can simply use pointerEvents as "box-only" to disable the selection of entered value.

<TextInput pointerEvents="box-only" />.

Upvotes: 4

Huynh Nguyễn Th&#250;c
Huynh Nguyễn Th&#250;c

Reputation: 21

You can use selection property. And when selection change, set selection prop to end position of your selection.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selection: { start: 0, end: 0 },
    };
  }

  onSelectionChange = ({ nativeEvent: { selection, text } }) => {
    this.setState({ selection: { start: selection.end, end: selection.end } });
  };

  render() {
    return (
      <TextInput
        onSelectionChange={this.onSelectionChange}
        selection={this.state.selection}
        value={this.state.value}
      />
    );
  }
}

Upvotes: 2

manggaraaaa
manggaraaaa

Reputation: 820

I think i have two Idea.

  1. You can try set in attribute selectTextOnFocus = "false" clearTextOnFocus = "true" from component TextInput:

  2. You can create a method to remove text with onChangeText if your TextInput is focus.

I hope my idea helping you...

Upvotes: 0

Tamir Haim Rabia
Tamir Haim Rabia

Reputation: 444

Just set selection to the end of the text: selection={{start: this.state.text.length, end: this.state.text.length}}

Upvotes: 2

Hussam Kurd
Hussam Kurd

Reputation: 9206

You can set attributes editable and selectTextOnFocus to false

Like:

<TextInput editable={false} selectTextOnFocus={false} />

Upvotes: 3

Related Questions