CODEWITHSUNDEEP
react-nativetextinput
ThinkAndCode
ThinkAndCode

Reputation: 1657

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.

Upvotes: 0

Views: 151

Answers (2)

shammi
shammi

Reputation: 1409

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 :)

Upvotes: 4

Gaurav Roy
Gaurav Roy

Reputation: 12195

The only thing you are missing is maxHeight property for the style in textInput , ive added maxHeight:50:

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

try once , and do check the expo snack expo-snack

Hope it helps. feel free for doubts

Upvotes: 1

Related Questions