How to wrap text within multiline react native textInput

Question

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"
  },

Solution

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

Comments

[WalterAgile]

By the way, once I was asked not only to enable "wrap", but also to make enter accepts the text in a multiline TextInput (normal behavior: enter adds a new line). It took some time to get this done; finally, I got this property blurOnSubmit, when set to true (in a multiline TextInput) means that pressing return will trigger the onSubmitEditing. reference.