numberOfLines TextInput property not working
14,226
Solution 1
To resume:
<TextInput
...
numberOfLines={Platform.OS === 'ios' ? null : numberOfLines}
minHeight={(Platform.OS === 'ios' && numberOfLines) ? (20 * numberOfLines) : null}
/>
Solution 2
You can use maxHeight
and minHeight
to accept what you want. For standard text fontSize, giving maxHeight={60}
will make TextInput scrollable after 3 lines. This is good for IOS - for Android you can use numberOfLines
prop.
Solution 3
You have numberOfLines: {5}
, should be numberOfLines={5}
. Or is that just a typo only in SO?
In addition, styling textAlignVertical: 'top'
is also recommended.
![Ankush Rishi](https://i.stack.imgur.com/g6Mnu.jpg?s=256&g=1)
Comments
-
Ankush Rishi about 2 years
I have created an application in
react-native
and I have an option to chat in messages option. when I click inside TextInput and type two lines, the upper line gets hidden. To fix this I saw in the docs numberOfLines property but it did not work.Here is my code:
<TextInput ref='textInput' multiline={true} numberOfLines: {5} onChangeText={this.onChangeText} style={[styles.textInput, {height: context.props.textInputHeight}]} placeholder={context.props.placeholder} placeholderTextColor="#5A5A5A" value={context.state.text}/>
I tried it in
getDefaultProps
function too:getDefaultProps() { return { placeholder: 'Type a message...', navHeight: 70, textInputHeight: 44, numberOfLines:5, maxHeight: Screen.height, }; },
But did not worked.
-
Ankush Rishi over 8 yearsIt works when I remove the height in style
style={[styles.textInput, {height: context.props.textInputHeight}]}
and If I addtextAlignVertical: 'top'
it does not display the text I write in the textbox -
Ankush Rishi about 6 yearsyes now a days we can use maxHeight property but at that time when I asked this questions more than 2 years ago, it was not there in the docs. Thanks for the update!
-
kojow7 over 3 yearsWhat exactly does the number 20 indicate?
-
Made in Moon over 3 years@kojow7 it's a height for each line
-
Bravo about 3 yearshardcoding 20 for each line is absolutely incorrect. On Android numberOfLines calculates automatically how much height is necessary for each line thus the textinput looks perfect