Expanding Text Area

TextArea.js

import React from 'react'
import RX from 'reactxp'
import { observable, computed, action } from 'mobx'
import { observer } from 'mobx-react'
import ReactDOM from 'react-dom'

@observer
export default class TextArea extends RX.Component {
    @observable input = '';
    @observable inputHeight = 0;

    @action onChangeInputValue = (value) => { this.input = value; }

    @action onLayoutInputLoaded = (e) => {
      // Aproach 1
      // this.inputHeight = e.height;
      // console.log(this.inputHeight);

      // Approach 2
      inputScrollHeight = ReactDOM.findDOMNode(this.hiddenTextArea).scrollHeight;
      this.inputHeight = inputScrollHeight;
      console.log(inputScrollHeight);
    }

    render() {
      return (
          <RX.View style={ styles.container }>

              <RX.View style={ styles.text_wrapper } onLayout={ this.onLayoutInputLoaded }>
                <RX.Text ref={el => this.hiddenTextArea = el} style={styles.inputTextArea_input_text}>
                  {this.input}
                </RX.Text>
              </RX.View>

              <RX.View style={{ padding: 10 }}></RX.View>

              <RX.View style={ styles.textInput_wrapper }>
                <RX.TextInput
                  style={[styles.inputTextArea_input, {height: Math.max(20, this.inputHeight)}]}
                  placeholder="Type here..."
                  value={this.input}
                  onChangeText={this.onChangeInputValue}
                  multiline={true}
                  />
              </RX.View>

          </RX.View>
      )
    }
}

const styles = {
  inputTextArea_input_text: RX.Styles.createTextStyle({
    fontSize: 14,
    backgroundColor: 'yellow',
    padding: 0,
    overflow: 'hidden',
    minHeight: 20
  }),
  inputTextArea_input: RX.Styles.createTextInputStyle({
    fontSize: 14,
    backgroundColor: 'yellow',
    padding: 0,
    overflow: 'hidden',
    minHeight: 20
  }),
  text_wrapper: RX.Styles.createViewStyle({
    padding: 4,
    borderWidth: 1,
    borderColor: 'red',
    width: 200
  }),
  textInput_wrapper: RX.Styles.createViewStyle({
    padding: 4,
    borderWidth: 1,
    borderColor: 'red',
    width: 200
  }),
  container: RX.Styles.createViewStyle({
    backgroundColor: 'black',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  })
}