CODEWITHSUNDEEP
react-nativetextinput
jeanpaul62
jeanpaul62

Reputation: 10561

Disable Paste on React Native TextInput

Nothing in the docs about this. I want to disable the small popup below when clicking on a TextInput in React Native.

enter image description here

Any ideas ?

Upvotes: 3

Views: 14406

Answers (6)

Jess Stodola
Jess Stodola

Reputation: 1

If you set pointerEvents="none" on a View surrounding the TextInput it will prevent the context menu from displaying:

<View removeClippedSubviews pointerEvents="none">
  <TextInput contextMenuHidden />
</View>

This will work for iOS, Android, and web

Upvotes: 0

Neeraj Butola
Neeraj Butola

Reputation: 43

I created custom textview Component for this. To disable the full-screen text input UI that appears when a TextInput component receives focus on Android 13. I have used the The disableFullscreenUI prop. This the only solution that I have found so far which works for all the android versions.

  • For accessing clipboard I have used Clipboard component from eact-native-community/clipboard
  • autoCorrect prop for disabling keyboard suggestions
  • spellCheck prop for disabling keyboard suggestions
  • disableFullscreenUI prop to disable the full-screen text input UI that appears when a TextInput component -Used this custom component where I want to use textView component .

//Code

import React, { useState } from 'react';
import { TextInput as RNTextInput, Platform } from 'react-native';
import Clipboard from '@react-native-community/clipboard';

 const withClipboardRestriction = Component => {
 const WrappedComponent = (props, ref) => {
  const [value, setValue] = useState('');

  const handleChange = text => {
  // Check if the new text is the same as the current text plus one 
   character
  // This means the user has typed a character, not pasted text
  if (
    text === value + text.slice(-1) ||
    text === value.slice(0, -1) ||
    text.length <= value.length
  ) {
    setValue(text);
    if (props.onChangeText) {
      props.onChangeText(text);
     }
       }
        };

            const clearClipboard = () => {
              Clipboard.setString('');
              };

       const newProps = {
       ...props,
       onChangeText: handleChange,
       autoCorrect: false,
       spellCheck: false,
       onTouchEnd: clearClipboard,
       onFocus: clearClipboard,
       undefinedText: '',
       ...(Platform.OS === 'android' && Platform.Version >= 33
         ? { disableFullscreenUI: true }
         : {}),
            };
    
      return <Component {...newProps} ref={ref} contextMenuHidden={true} />;
      };
    
     return React.forwardRef(WrappedComponent);
          };

export const TextInput = withClipboardRestriction(RNTextInput);

Upvotes: 0

Vinay Revankar
Vinay Revankar

Reputation: 832

Below solution works for me. 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

Vishal Kardam
Vishal Kardam

Reputation: 24

for stop copy paste the following code is

 <TextInput contextMenuHidden={true}/>

Upvotes: 2

junior.dluk
junior.dluk

Reputation: 39

for ios

<TextInput contextMenuHidden={true}

for Android

<View removeClippedSubviews={true}>

  <TextInput contextMenuHidden={true} />

</View>

Surender Kumar's answer: React Native 55.4: contextMenuHidden does not hide menu on Android - Disable Options on React-Native Text Input

Upvotes: 3

ANKIT DETROJA
ANKIT DETROJA

Reputation: 2065

<TextInput
   contextMenuHidden={true}
   value={this.state.text}
   onChangeText={(text) => this.setState({ text})}
/>

Upvotes: 10

Related Questions