Disable Options on React-Native Text Input

JavascriptReactjsReact NativeTextinput

Javascript Problem Overview


I am using TextInput for a project and wanted to DISABLE any kind of text selection or actions like (cut/copy/paste/share) as shared in the screenshot below.

I am not able find anything in the react-native official documentation

enter image description here

Javascript Solutions


Solution 1 - Javascript

You should add 2 attributes selectTextOnFocus and editable

For example:

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

Solution 2 - Javascript

Just give your textinput the attribute editable={false}

Solution 3 - Javascript

contextMenuHidden is to disable the user from pasting text into certain fields and to hide context menu.

Update: This hasn’t been included in a release yet. You can always see what release any commit is in by clicking on the link and looking at the tags. so I wouldn't expect it to be on a stable release until 0.55.

<TextInput contextMenuHidden={true} />

Check the commit here: Add option to hide context menu for TextInput

Solution 4 - Javascript

Set pointerEvents to none on parent View of TextInput to disable touch events, consider following example:

<View pointerEvents="none">
  <TextInput ... />
</View>

Solution 5 - Javascript

You can use a View and use removeClippedSubviews={true} (works with Android) and use contextMenuHidden={true} (works with IOS)

<View removeClippedSubviews={true}> <TextInput contextMenuHidden={true} /> </View>

Solution 6 - Javascript

Use caretHidden={true} if you want to disable all operation like Cut Paste Copy. It will also hide your cursor as well

Solution 7 - Javascript

This trick worked for me. Here I am using NativeBase. Keep this <TextInput> inside a <Item> tag. Now the selection property should not work.

code sample attached below.

<Item>
<Input
  value={this.props.call_state.destination}
  onChangeText={text => this.props.setDestination(text)}
  returnKeyType={"done"}
  keyboardType={"numeric"}
/>
</Item>

You should install nativebase first and then import {Item} from native-base in your component

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionfirebolt_ashView Question on Stackoverflow
Solution 1 - JavascriptArtem TutovView Answer on Stackoverflow
Solution 2 - JavascriptfunkysoulView Answer on Stackoverflow
Solution 3 - JavascriptBalasubramanianView Answer on Stackoverflow
Solution 4 - JavascriptShineView Answer on Stackoverflow
Solution 5 - JavascriptlinhadiretalipeView Answer on Stackoverflow
Solution 6 - JavascriptAnil ChahalView Answer on Stackoverflow
Solution 7 - JavascriptPallab NaskarView Answer on Stackoverflow