CODEWITHSUNDEEP
react-native
Walter Monecke
Walter Monecke

Reputation: 2558

Enable paste and selection within TextInput - React Native

I am trying to implement copy and paste within my TextInput but cant seem to achieve it. I was expecting a tooltip when I long-pressed on my TextInput, however nothing happens.

I know about Clipboard and would know how to implement it, but I cant seem to get the paste option to pop to the user.

Any ideas how I can achieve this?

<TextInput
                maxLength={29}
                autoCapitalize={'characters'}
                numberOfLines={1}
                keyboardType={'default'}
                underlineColorAndroid='transparent'
                autoCorrect={false}
                value={IBAN.printFormat(this.state.ibanInput)}
                returnKeyType={'next'}
                onChangeText={iban => this.verifyIban(iban)}
                style={[{ borderWidth: 1, borderRadius: 2, height: '100%', width: '100%', textAlign: 'center', fontSize: width/24 },

                ]}
              />

Upvotes: 6

Views: 7354

Answers (3)

Nicolas Sturm
Nicolas Sturm

Reputation: 691

use RN-clipboard

    const text = await Clipboard.getString()
    setCopiedText(text)

Upvotes: 0

Perelan
Perelan

Reputation: 406

Have a look at this code!: https://github.com/facebook/react-native/issues/18926#issuecomment-490541013

 <ScrollView
contentContainerStyle={Styles.contentContainerStyle}
keyboardShouldPersistTaps="handled"
removeClippedSubviews={false}>

 <KeyboardAvoidingView>

      <Text style={Styles.labelPageTitle}>
        {'bla bla bla'}
      </Text>
      <Text>
          {'bla bla bla'}
      </Text>
      <TextInput
        onChangeText={text => this.setState({ title: text })}
        style={Styles.textInput}
        value={title}
      />

</KeyboardAvoidingView>

Upvotes: 1

Jitendra Kumar
Jitendra Kumar

Reputation: 2221

Here is the answer if copy/paste does not work for TextInput - React Native

Step 1) In Contructor take testWidth property and assign value as '99%'.

e.g.

this.state = {testWidth: '99%' };

Step 2) In componentDidMount change testWidth value like '100%', do it inside of setTimeout.

e.g.

 setTimeout(() => {
      this.setState({ testWidth: '100%' })
    }, 100)

Step 3) In style attribute of TextInput add dynamic width which we declare in Contractor, e.g

<TextInput style={{ width: this.state.testWidth }} />

Here is the full code: (Just copy and paste in App.js file).

import React, { Component } from 'react';
    import { TextInput, View } from 'react-native';

    export class App extends Component {
      constructor(props) {
        super(props);
        this.state = { text: '', testWidth: '99%' };
      }
      componentDidMount() {

        setTimeout(() => {
          this.setState({ testWidth: '100%' })
        }, 100)
      }
      render() {
        return (
          <View style={{ marginTop: 50 }}>
            <TextInput
              style={{ width: this.state.testWidth }}
              placeholder="Type here to translate!"
              onChangeText={(text) => this.setState({ text })}
              value={this.state.text}
            />
          </View>
        );
      }
    }

Good Luck

Upvotes: 2

Related Questions