Search code examples
react-nativetextinput

React-Native: TextInput size is getting increased automatically irrespective of numberOfLines prop

I have a TextInput as shown below,

 <TextInput
     style={{borderWidth: 1, borderColor: "#dedede", width: '90%',  marginTop: 20, borderRadius: 1}}
     placeholder={'Tell us more about our service'}
     multiline = {true}
     numberOfLines = {10}
     value={this.state.customerFeedback}
     onChangeText={customerFeedback => this.setState({ customerFeedback })}
     underlineColorAndroid="transparent"
 />

since I gave numberOfLines = {10}, if I type more than 10 lines text must be scrolled inside the TextInput area. But in my case size of the TextInput is gradually getting increased as show in below image,

enter image description here

If we look at TextInput there are more than 10 lines.

Can anybody let me know how to restrict TextInput area according to numberOfLines props? Thank you.

Solution

  • I saw your code and one thing you are missing one more property for the style is maxHeight. I add this in your code now you can copy and paste this code in your project.

    {/*maxHeight:200 */}
<TextInput
 style={{borderWidth: 1, borderColor: "#dedede", width: '90%',  marginTop: 20, borderRadius: 1,maxHeight:200}}
 placeholder={'Tell us more about our service'}
 multiline = {true}
 numberOfLines = {10}
 value={this.state.customerFeedback}
 onChangeText={customerFeedback => this.setState({ customerFeedback })}
 underlineColorAndroid="transparent"
/>

    I hope this will help :)