title: Minimal height of multiline adjustable reusable React-Native TextInput component
body: <p>I am struggling to harness the height adjustments of my TextInput, specifically declaring the minimal height.</p>
  
  <p>I have a Parent component, whose render method consists of multiple TextInputs that each looks like this:</p>
  
  <pre><code>            &lt;View&gt;
                  &lt;AdjustableInput
                      label='Text'
                      maxLength={1000}
                      multiline
                      onChangeText={this.onInputChange.bind(this)}
                      placeholder='Type some text'
                      onContentSizeChange={(e) =&gt; 
                              this.setState({ lineHeight: e.nativeEvent.contentSize.height })}
                      style={{ lineHeight: this.state.lineHeight }}
                      viewStyle={{ height: this.state.lineHeight }}
                      value={this.state.text}
                  /&gt;
              &lt;/View&gt;
  </code></pre>
  
  <p>The AdjustableInput reusable component looks like this:</p>
  
  <pre><code>const AdjustableInput = ({ label, maxLength, multiline, onChangeText, placeholder, secureTextEntry, style, value, viewStyle }) =&gt; {
  const { containerStyle, inputStyle, labelStyle } = styles;
  return (
      &lt;View style={[containerStyle, viewStyle]}&gt;
          &lt;Text style={labelStyle}&gt;{label}&lt;/Text&gt;
          &lt;TextInput 
          autoCorrect={false}
          maxLength={maxLength || 25}
          multiline={multiline || false}
          onChangeText={onChangeText}
          placeholder={placeholder}
          placeholderTextColor='#C7C7CD'
          secureTextEntry={secureTextEntry}
          style={[inputStyle, style]}
          value={value}
          /&gt;
      &lt;/View&gt;
      );
  };
  
  const styles = {
      containerStyle: {
          alignItems: 'center',
          flex: 1,
          flexDirection: 'row',
          height: 40
      },
      inputStyle: {
          alignSelf: 'center',
          color: '#000',
          flex: 2,
          fontSize: 18,
          lineHeight: 23,
          paddingLeft: 5,
          paddingRight: 5,
      },
      labelStyle: {
          flex: 1,
          fontSize: 18,
          paddingLeft: 20,
      }
  };
  </code></pre>
  
  <p><strong>What I am trying to achieve</strong> is to have a default minimal height for both TextInput and View (23 and 40 respectively), that would adjust to the amount of text in the TextInput and correct the height property based on that. </p>
  
  <p><strong>The adjustion was achieved</strong> by implementing <strong>onContentSizeChange</strong> prop, but the default size remains 23 in both TextInput and View, when it should be 23 and 40 as was mentioned earlier.</p>
  
  <p><strong>What did not work:</strong>
  - applying the math operations to this.state.lineHeight prop by dividing by 23 and multyplying by 40 (since this.state.lineHeight is always undefined due to the way e.nativeEvent works)
  - omitting the declaration of viewHeight in Parent component to rely on fixed height, declared in AdjustableInput component.</p>