CODEWITHSUNDEEP
javascriptiosreact-native
Mark Silver
Mark Silver

Reputation: 422

iOS TextInput height relative to font size react-native

I'm having trouble with the TextInput module for React-Native

https://facebook.github.io/react-native/docs/textinput.html

On Android it's nice and simple, you create the TextInput give it a font-size and it sets the height of the TextInput control accordingly.

On the other hand, with iOS unless you provide an explicit height for the TextInput in the style it will be 0.

This would be okay normally, but because I use variable font sizes in my app. I need the TextInput height to match the font-size.

I did try setting the text-input height to the same value as the font-size. That didn't work correctly and I don't think the two are relative.

I have some multiline text inputs and I would like to calculate the height I want for them based on the height for a single line.

pseudo code

lineHeight = getHeightForFontSize(15);
multiLineHeight = lineHeight * 4; // 4 lines

So in summary. How do I get the height for a TextInput view based on the font-size (known in advance).

Upvotes: 2

Views: 3118

Answers (1)

the_bluescreen
the_bluescreen

Reputation: 3414

You can use onContentSizeChange for getting font height on multiline textinput. I'm using this for changing height of textinput after getting too long text. But be sure you are using multiline TextInput. Otherwise, it will not work.

<TextInput
  style={{height: this.state.height, borderColor: 'gray', borderWidth: 1}}
  onChangeText={::this.onMessageChange}
  value={this.props.message}
  multiline
  onContentSizeChange={({ nativeEvent: { contentSize: { width: txtWidth, height: txtHeight } } }) => {
    if (txtHeight > 40) {
      this.setState({
         height: txtHeight,
      });
    }
  }}
/>

Upvotes: 1

Related Questions