numberOfLines TextInput property not working

user_5151047 0
Viewed 16762

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.

react-native reactjs textinput android javascript
4 Answers

To resume:

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

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.

user_79128110

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

user_156757510
Related