CODEWITHSUNDEEP
react-native
JaRoMaster
JaRoMaster

Reputation: 181

react-native: limit the height of a multiline TextInput

I've got a textinput with multiline and numberOfLines set to 4.

When I type 5 lines the textinput keeps expanding in height. Is it possible to keep the height and make the overflow scrollable after 4 lines withour defining the maxHight as pixels?

Upvotes: 0

Views: 1412

Answers (2)

Iulian T
Iulian T

Reputation: 11

Add a height attribute for TextInput: style={[styles.input,{height:120}]}. Or add height property in input style. Adjust then height: 120 up to your needs. TextInput component does not have a maxHeight property. You can achieve this goal by wrapping it in a View with maxHeight property.

Upvotes: 1

mainak
mainak

Reputation: 2311

you need to provide a height in the textinput to restrict its height increase while adding lines, checkout the example below

...
    <TextInput
       style={styles.input}
       onChangeText={onChangeNumber}
       value={number}
       multiline={true}
       numberOfLines={4}
     />



...
    input: {
        maxHeight: 100,
        margin: 12,
        borderWidth: 1,
        padding: 10,
      },

Upvotes: 1

Related Questions