React-Native copy-paste'able multiline TextInput inside ViewPagerAndroid

App.jsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'
import { StyleSheet, Text, TextInput, View, ViewPagerAndroid } from 'react-native'

const rnVersion = '0.52.0'

export default class App extends Component<{}> {
  constructor (props) {
    super(props)

    const texts = {}
    for (let i = 1; i <= 6; i++) {
      texts[i] = ''
    }

    this.state = {
      texts,
      // Initial width must be different
      testWidth: '99%'
    }
  }

  onChangeText = index =>
    text => {
      this.setState(prevState => ({
        texts: {
          ...prevState.texts,
          [index]: text
        }
      }))
    }

  componentDidMount () {
    /* Evidently, resizing triggers something that makes copy-paste work.
     * Timeout is mandatory for this hack, doesn't work otherwise.
     */
    setTimeout(() => {
      this.setState({testWidth: '100%'})
    }, 100)
  }

  render () {
    return (
      <ViewPagerAndroid
        keyboardShouldPersistTaps={'handled'}
        style={styles.wrap}
      >
        {/*First tab*/}
        <View key={'123213'} style={styles.container} keyboardShouldPersistTaps={'handled'}>
          <Text>
            {`React Native version: ${rnVersion}`}
          </Text>

          <Text>
            {'First tab, there is another one on the right ==>'}
          </Text>

          <View style={styles.inputsWrap}>
            <TextInput
              value={this.state.texts[1]} onChangeText={this.onChangeText(1)}
              placeholder={'Single-line, you can copy-paste here'}
            />

            <TextInput
              value={this.state.texts[2]} onChangeText={this.onChangeText(2)}
              multiline
              placeholder={'Multi-line, can\'t copy-paste'}
            />

            <TextInput
              value={this.state.texts[3]} onChangeText={this.onChangeText(3)}
              multiline
              placeholder={'Multi-line with hacks, can copy-paste'}
              style={{width: this.state.testWidth}}
            />
          </View>
        </View>

        {/*Second tab*/}
        <View key={'asdasd'} style={styles.container} keyboardShouldPersistTaps={'handled'}>
          <Text>
            {'Second tab'}
          </Text>

          <View style={styles.inputsWrap}>
            <TextInput
              value={this.state.texts[4]} onChangeText={this.onChangeText(4)}
              placeholder={'Single-line, you can copy-paste here'}
            />

            <TextInput
              value={this.state.texts[5]} onChangeText={this.onChangeText(5)}
              multiline
              placeholder={'Multi-line, can\'t copy-paste'}
            />

            <TextInput
              value={this.state.texts[6]} onChangeText={this.onChangeText(6)}
              multiline
              placeholder={'Multi-line with hacks, can copy-paste'}
              style={{width: this.state.testWidth}}
            />
          </View>
        </View>
      </ViewPagerAndroid>
    )
  }
}

const styles = StyleSheet.create({
  wrap: {
    flex: 1
  },
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#e6f6ff',
    padding: 30
  },
  inputsWrap: {
    flex: 1,
    width: '100%'
  }
})

Thank you so much.

awesome!

thanks! this hack also saved my day! :)

I can't believe this works.........

kudos!! thank you so much

Weirdest thing: your hack fixed this issue for me, then I reverted the hack to check something else, and now the bug is gone completely - I can copy/paste my multiline input without using your hack after all. 🤔 Android being weird?
PS Thanks for the hack in any case!

lolz, what kind of sorcery is this? 🤔
strange thing is its working and why the heck its not working in the first place when placing textInput inside a scrollview.

Works fine!:)

Thanks a lot!! This solution save my day :)

thanks!! it works~