Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to wrap text within multiline react native textInput

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"
  },
like image 820
Naveed Sheriffdeen Avatar asked May 29 '19 02:05

Naveed Sheriffdeen


1 Answers

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

like image 162
Ankur Sardar Avatar answered Oct 02 '22 15:10

Ankur Sardar