numberOfLines TextInput property not working

Question

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.

score 24 · Answer 1 · answered Oct 10 '18 at 23:10

24

To resume:

<TextInput
  ...
  numberOfLines={Platform.OS === 'ios' ? null : numberOfLines}
  minHeight={(Platform.OS === 'ios' && numberOfLines) ? (20 * numberOfLines) : null}
/>

answered Oct 10 '18 at 23:10

Made in Moon

2,294
17
21

What exactly does the number 20 indicate? – kojow7 Jan 12 '21 at 18:14
@kojow7 it's a height for each line – Made in Moon Jan 15 '21 at 07:49
hardcoding 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 – Bravo Mar 31 '21 at 08:11

score 5 · Answer 2 · answered May 18 '18 at 07:22

5

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.

answered May 18 '18 at 07:22

David

1,365
14
23

yes 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! – Ankush Rishi May 18 '18 at 09:20

score 2 · Answer 3 · answered Mar 11 '16 at 11:21

2

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.

answered Mar 11 '16 at 11:21

Samuli Hakoniemi

18,740
1
61
74

2

It works when I remove the height in style `style={[styles.textInput, {height: context.props.textInputHeight}]}` and If I add `textAlignVertical: 'top'` it does not display the text I write in the textbox – Ankush Rishi Mar 11 '16 at 12:08

score 0 · Answer 4 · edited Apr 18 '21 at 03:09

0

You should set maxHeight. I did set my maxHeight={70}.

edited Apr 18 '21 at 03:09

Simas Joneliunas

2,890
20
28
35

answered Apr 17 '21 at 21:12

Kojo Clinton

1
1

numberOfLines TextInput property not working

4 Answers4