Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rahultectum opened this issue Jan 1, 2021 · 0 comments
Open

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

rahultectum opened this issue Jan 1, 2021 · 0 comments

Comments

@rahultectum
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant