Enable paste and selection within TextInput - React Native

Question

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 },

                ]}
              />

Answer 1

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