Flex.js

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

export default class Flex extends RX.Component {
    render() {
      return (
        <RX.View style={ styles.container}>
          <RX.View style={ styles.parent }>
            <RX.View style={ styles.child_1 }>
              <RX.Text style={ styles.child_text}>Hello</RX.Text>
            </RX.View>
            <RX.View style={ styles.child_2 }>
              <RX.Text style={ styles.child_text}>Hello There React XP</RX.Text>
            </RX.View>
          </RX.View>
        </RX.View>
      )
    }
}

const styles = {
    parent: RX.Styles.createViewStyle({
        flexDirection: "row",
        width: 400,
        height: 200
    }),
    child_1: RX.Styles.createViewStyle({
        flex: 1,
        backgroundColor: 'blue',
        justifyContent: "center",
        alignItems: "center",
    }),
    child_2: RX.Styles.createViewStyle({
        flex: 1,
        backgroundColor: 'yellow',
        justifyContent: "center",
        alignItems: "center",
    }),
    child_text: RX.Styles.createTextStyle({
        color: 'black',
        fontSize: 16
    }),
    container: RX.Styles.createViewStyle ({
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    })
}