12

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"
  },
Naveed Sheriffdeen
  • 940
  • 6
  • 18
  • 37

2 Answers2

19

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

Ankur Sardar
  • 405
  • 1
  • 6
  • 12
  • 3
    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](https://reactnative.dev/docs/textinput#bluronsubmit). – WalterAgile Feb 18 '21 at 22:51
0

2023 Update

I was having a problem where I could not use multiline={true} because it messes with my KeyboardAvoidingView logic (known bug). My workaround was to have a fixed height and set textAlign: 'justify' to the style prop of my TextInputs. The words appear to wrap now.

Hugobop
  • 125
  • 10