TextAreaMultiFocus.js

import React from 'react'
import RX from 'reactxp'

export default class TextAreaMultiFocus extends RX.Component {
    constructor(props) {
      super(props);

      this.state = {
          field1: '',
          field2: ''
      };
    }

    onChangeField1Value = (value) => {
      this.setState({ field1: value });
    }

    onChangeField2Value = (value) => {
      this.setState({ field2: value });
    }

    render() {
      return (
          <RX.View style={{backgroundColor: 'green', flex: 1, justifyContent: 'center', alignContent: 'center'}}>
            <RX.TextInput
              ref={element => this.field1 = element}
              style={styles.field1}
              placeholder="Text Input"
              value={this.state.field1}
              onChangeText={this.onChangeField1Value}
              onSubmitEditing={e => this.field2.focus()}
            />

            <RX.View style={{height: 20}}></RX.View>

            <RX.TextInput
                ref={element => this.field2 = element}
                style={styles.field2}
                multiline={true}
                placeholder="Text Area"
                value={this.state.field2}
                onChangeText={this.onChangeField2Value}
            />
          </RX.View>
      )
    }
}

const styles = {
  field1: RX.Styles.createTextInputStyle({
    backgroundColor: 'white',
    width: 200,
    alignSelf: 'center',
    fontSize: 20
  }),
  field2: RX.Styles.createTextInputStyle({
    backgroundColor: 'white',
    width: 200,
    alignSelf: 'center',
    fontSize: 20
  })
}