Skip to content

Instantly share code, notes, and snippets.

@ilya-uryupov
Last active November 17, 2020 04:41
Show Gist options
  • 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%'
}
})
@waterfront2
Copy link

thanks!! it works~

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