Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React-Native copy-paste'able multiline TextInput inside ViewPagerAndroid
/**
* 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%'
}
})
@ilya-uryupov

This comment has been minimized.

Copy link
Owner Author

ilya-uryupov commented Feb 14, 2018

Important lines:
first, second, third.

@sosospicy

This comment has been minimized.

Copy link

sosospicy commented Jun 5, 2018

thanks! this hack saved my day!

@MewX

This comment has been minimized.

Copy link

MewX commented Oct 30, 2018

thanks! this hack also saved my day!

@ScottDikowitz

This comment has been minimized.

Copy link

ScottDikowitz commented Dec 15, 2018

Thank you so much.

@anAnun

This comment has been minimized.

Copy link

anAnun commented Dec 25, 2018

awesome!

@hodacnghia

This comment has been minimized.

Copy link

hodacnghia commented Apr 10, 2019

thanks! this hack also saved my day! :)

@shaneboyar

This comment has been minimized.

Copy link

shaneboyar commented May 8, 2019

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

@jonassunandar

This comment has been minimized.

Copy link

jonassunandar commented Jul 4, 2019

kudos!! thank you so much

@timiles

This comment has been minimized.

Copy link

timiles commented Jul 4, 2019

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!

@summerkiflain

This comment has been minimized.

Copy link

summerkiflain commented Jul 30, 2019

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.

@sergeylaptev

This comment has been minimized.

Copy link

sergeylaptev commented Sep 30, 2019

Works fine!:)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.