MainPanel

MainPanel.js

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

import { observable, action } from 'mobx'
import { observer } from 'mobx-react'
import DrawerPanel from './DrawerPanel';

const styles = {
    scroll: RX.Styles.createScrollViewStyle({
        alignSelf: 'stretch',
        backgroundColor: 'red',
        flex: 1
    }),
    container: RX.Styles.createViewStyle({
        padding: 16,
        justifyContent: 'center',
        alignItems: 'flex-start',
        flex: 1
    })
};

@observer
export default class MainPanel extends RX.Component {
    @observable showDrawer = false;

    @action toggleDrawer = () => {
      this.showDrawer = !this.showDrawer;

      this.animation.start();
    }

    constructor(props) {
        super(props);
        this._translationValue = new RX.Animated.Value(-100); // width of drawer panel
        this._animatedDrawerStyle = RX.Styles.createAnimatedViewStyle({
            transform: [
                {
                    translateX: this._translationValue
                }
            ]
        });
        this.animation = RX.Animated.timing(this._translationValue, {
                toValue: 0,
                easing: RX.Animated.Easing.Linear(),
                duration: 500
            }
        );
    }

    render() {
        return (
            <RX.View style={{flex: 1, backgroundColor: 'black'}}>
              <RX.View style={{ flexDirection: 'row' }}>
                { this.showDrawer && <RX.Animated.View style={ this._animatedDrawerStyle }><DrawerPanel /></RX.Animated.View> }
                  <RX.View style={{flex: 1}}>

                    <RX.View style={{ paddingTop: 20, backgroundColor: 'blue' }}>
                      <RX.Button style={{ margin: 2, borderRadius: 10, backgroundColor: 'black', width: 20, height: 20, alignItems: 'center' }}
                                 onPress={ this.toggleDrawer }>
                          <RX.Text style={{ color: 'white'}}>H</RX.Text>
                      </RX.Button>
                    </RX.View>

                    <RX.ScrollView style={ styles.scroll }>
                        <RX.View style={ styles.container }>
                            <RX.Text style={{ fontSize: 14 }}>1. This content panel has red background that should fill screen, but does not even with flex: 1 on container</RX.Text>
                            <RX.Text style={{ fontSize: 14 }}>2. This in turn affects the drawer height to not fill the entire available height</RX.Text>
                            <RX.Text style={{ fontSize: 14 }}>3. My animation does not seem to be smooth, especially on the first click</RX.Text>
                        </RX.View>
                    </RX.ScrollView>

                  </RX.View>
                </RX.View>
            </RX.View>
        );
    }
}