-
-
Save thanhcuong1990/a99b60cffbb0740b2e6097659e8992fe to your computer and use it in GitHub Desktop.
React-Native copy-paste'able multiline TextInput inside ViewPagerAndroid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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%' | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment