n4kz / react-native-material-textfield

Material textfield
Other
901 stars 832 forks source link

Detect a paste event in a react-native-material-textfield #313

Open rahultectum opened 3 years ago

rahultectum commented 3 years ago

I want to paste into a react-native-material-textfield, but do something based on the pasted content (i.e. if the pasted content is a link, style it accordingly). However, in order to do this I need to know when something has been pasted into the OutlinedTextField. I am not sure how to listen for a paste event. The Clipboard does not really help here because all it does it set/get content, not tell me if some arbitrary content has been pasted.

The minimal sample code

import {
  OutlinedTextField,
} from 'react-native-material-textfield';

export default class App extends React.Component {
  handleOnPaste = (content) => {
    alert('paste detected! content: '.concat(content));
  }

  handleOnChangeText = async (content) => {
    if (content === '') return;
    const copiedContent = await Clipboard.getString();

    if (copiedContent === '') return;
    const isPasted = content.includes(copiedContent);
    if (isPasted) this.handleOnPaste(content);
  }

  render() {
    return (
      <View style={styles.container}>
        <OutlinedTextField
                ref={this.ac_bankRef}
                keyboardType='numeric'
                autoCapitalize='none'
                autoCorrect={false}
                enablesReturnKeyAutomatically={false}
                onChangeText={this.handleOnChangeText} 
                 returnKeyType='done'
                label='Bank(2)*'

                maxLength={2}
                inputContainerStyle={{height:height>800?48:40,marginTop:10}}
                contentInset={{label:1,input:12}}
                baseColor={'#D4D4D4'}
                lineWidth = {1}              
/>
      </View>
    );
  }
}

In the above sample code const isPasted = content.includes(copiedContent); is always return false when using OutlinedTextField but in normal TextInput of react native it is working fine.

Please help me to resolve problem . Thanks