CODEWITHSUNDEEP
javascriptreactjsreact-nativetextinput
firebolt_ash
firebolt_ash

Reputation: 1324

Disable Options on React-Native Text Input

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

Upvotes: 83

Views: 151531

Answers (9)

Vinay Revankar
Vinay Revankar

Reputation: 832

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>

Upvotes: 0

Marshal Truman
Marshal Truman

Reputation: 1

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' }} 
    />
  );
};

Upvotes: 0

Pallab Naskar
Pallab Naskar

Reputation: 119

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

Upvotes: -4

linhadiretalipe
linhadiretalipe

Reputation: 937

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>

Upvotes: 3

Balasubramanian
Balasubramanian

Reputation: 5510

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

Upvotes: 30

Shine
Shine

Reputation: 305

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

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

Upvotes: 23

Anil Chahal
Anil Chahal

Reputation: 2593

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

Upvotes: -1

Artem Tutov
Artem Tutov

Reputation: 2007

You should add 2 attributes selectTextOnFocus and editable

For example:

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

Upvotes: 170

funkysoul
funkysoul

Reputation: 3241

Just give your textinput the attribute editable={false}

Upvotes: 24

Related Questions