I am trying to implement a multiline text input in react native, but when user types the text doesn't get wrapped but gets written horizontally on the same line,
the code for my text input is as follows
<View style={[styles.container, props.containerStyles]}>
<TextInput
style={styles.placeholderStyle}
placeholder={"Placeholder text"}
value={this.state.reviewBody}
onChangeText={body => this.setState({ reviewBody: body })}
numberOfLines={5}
textAlignVertical={"top"}
textBreakStrategy={"highQuality"}
underlineColorAndroid={"transparent"}
autoCorrect
/>
</View>
and the styles are,
const styles = StyleSheet.create({
container: {
flex: 1,
borderWidth: 2,
borderColor: "#f4f4f4",
width: WIDTH - 40,
maxWidth: WIDTH - 40,
minWidth: WIDTH - 40,
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: 5,
marginTop: 10,
flexWrap: "wrap",
},
placeholderStyle: {
fontSize: 11,
padding: 0,
flex: 1,
width: WIDTH - 40,
maxWidth: WIDTH - 40,
minWidth: WIDTH - 40,
flexWrap: "wrap",
overflow: "scroll"
},
In TextInput
component, use props multiline={true}
, this should solve your issue. Also if you want to control the text alignment behavior, you can use textAlignVertical
props.
Find more details in this link - https://facebook.github.io/react-native/docs/textinput#multiline
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With