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 happe

Answer 1

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>

Answer 2

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