Disable Options on React-Native Text Input

Question

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

Use caretHidden={true} if you want to disable all operation like Cut Paste Copy. It will also hide your cursor as well. — Anil Chahal, Jan 22 '18 at 07:42

score 153 · Answer 1 · answered Mar 19 '17 at 12:19

153

You should add 2 attributes selectTextOnFocus and editable

For example:

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

answered Mar 19 '17 at 12:19

Artem Tutov

1,827
2
12
12

1

editable false - i cant even edit the text input now - I need these when i can edit but cannot copy/cut/paste on this text input – firebolt_ash Mar 20 '17 at 06:41
1

when I give the editable false how can I use TextInput.I want to make copy/paste option disable no need to give editable={false} – saiRam89 Jul 21 '17 at 09:29

Balasubramanian · Answer 2 · 2018-03-24T07:03:59.040

26

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

edited Mar 24 '18 at 07:03

answered Mar 06 '18 at 09:47

Balasubramanian

5,274
6
33
62

I'm using react-native v0.54.0 and I couldn't get it work with this. – Mateo Guzmán Mar 23 '18 at 16:32
1

@MateoGuzmán Updated the answer. – Balasubramanian Mar 24 '18 at 07:04
1

Looks like it was put in 55.4 but it doesn't work for Android. Is anyone else able to get this to work on both platforms? – Turnipdabeets Jun 01 '18 at 20:29
This method doesn't work on Android. Did you find any solution to prevent Copy/Paste option in android? – M.Kalidass Jan 07 '22 at 06:09

score 24 · Answer 3 · answered Mar 19 '17 at 07:30

24

Just give your textinput the attribute editable={false}

answered Mar 19 '17 at 07:30

funkysoul

3,023
1
17
27

score 23 · Answer 4 · edited Jan 30 '18 at 10:42

23

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

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

edited Jan 30 '18 at 10:42

Pir Shukarullah Shah

4,124
2
22
42

answered Jan 30 '18 at 08:37

Shine

297
3
8

This is a borderline [link-only answer](//meta.stackexchange.com/q/8231). You should expand your answer to include as much information here, and use the link only for reference. – Filnor Jan 30 '18 at 09:54
pointerEvent is not better solution this scenario, add `caretHidden={true}`. – Pir Shukarullah Shah Jan 30 '18 at 10:12
This solution won't work if you already have the cursor inside the textInput box – sudonitin Jul 25 '20 at 05:50

linhadiretalipe · Answer 5 · 2019-10-24T14:56:52.287

3

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>

edited Oct 24 '19 at 14:56

answered Oct 23 '19 at 10:58

linhadiretalipe

907
7
8

Marshal Truman · Answer 6 · 2022-10-07T08:41:10.447

Reference from the following issue https://github.com/facebook/react-native/issues/33697

const App = () => {
  const [selection, setSelection] = useState(null);
  const [text, setText] = useState('');

  return (
    <TextInput 
      selection={selection}
      onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
      value={text}
      onChangeText={(text) => setText(text)}
      style={{ alignSelf: 'center', width: 200, marginTop: 50, backgroundColor: 'grey' }} 
    />
  );
};

Vinay Revankar · Answer 7 · 2022-11-08T08:24:22.707

Below solution works for me for avoiding copy/paste. I am clearing keyboard on onTouchEnd event

const [text1, setText1] = useState('')
    
const clearClipboard = () =>{
 Clipboard.setString('')
}
    
const onChangeText = (text) =>{
 //For android 12+ clipboard autofill option, dont allow text change more than one char..which means user is typing.
 if(text1.length+1 >= text.length){
  setText1(text)
 }
}
    
<TextInput onChangeText={onChangeText} value={text1} contextMenuHidden={true} onTouchEnd={clearClipboard}></TextInput>

score -1 · Answer 8 · answered Jan 22 '18 at 07:43

-1

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

answered Jan 22 '18 at 07:43

Anil Chahal

2,544
2
22
19

3

Checked Android - all operations *still appear* as usual if you select some text. – rgripper Feb 08 '18 at 04:55
How can I do this without hide the cursor? – Mateo Guzmán Mar 23 '18 at 16:19

score -4 · Answer 9 · edited Nov 29 '19 at 09:17

-4

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

edited Nov 29 '19 at 09:17

zmag

7,825
12
32
42

answered Nov 29 '19 at 08:55

Pallab Naskar

59
1
6

This is probably due to a bug in nativebase, since you should be able to select/copy/paste a text input by default. – Zoltán Hajdú Sep 15 '20 at 07:42

Disable Options on React-Native Text Input

9 Answers9

Linked