Skip to content

Instantly share code, notes, and snippets.

@ilya-uryupov
Last active November 17, 2020 04:41
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save ilya-uryupov/7bc9515c6d315d4919ff56ebf4e20411 to your computer and use it in GitHub Desktop.
Save ilya-uryupov/7bc9515c6d315d4919ff56ebf4e20411 to your computer and use it in GitHub Desktop.
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
Copy link
Author

Important lines:
first, second, third.

@sosospicy
Copy link

thanks! this hack saved my day!

@MewX
Copy link

MewX commented Oct 30, 2018

thanks! this hack also saved my day!

@ScottDikowitz
Copy link

Thank you so much.

@anAnun
Copy link

anAnun commented Dec 25, 2018

awesome!

@hodacnghia
Copy link

hodacnghia commented Apr 10, 2019

thanks! this hack also saved my day! :)

@shaneboyar
Copy link

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

@jonassunandar
Copy link

kudos!! thank you so much

@timiles
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
Copy link

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
Copy link

Works fine!:)

@sakshiigoyal
Copy link

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

@waterfront2
Copy link

thanks!! it works~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment