I have a layout that I want to make full screen. This is how it looks right now: 
What I want is for the layout to take up all the space on the screen (so the submit button should be way down at the bottom). I'm trying to use {flex: 1} but it's not working. Here's the code:
'use strict';const React = require('react-native');const { StyleSheet, Text, View, BackAndroid, TextInput, TouchableNativeFeedback, ScrollView} = React;const ActionButton = require('./action-button');module.exports = React.createClass({ handleBackButtonPress () { if (this.props.navigator) { this.props.navigator.pop(); return true; } return false; }, componentWillMount () { BackAndroid.addEventListener('hardwareBackPress', this.handleBackButtonPress); }, componentWillUnmount () { BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButtonPress); }, onInputFocus (refName) { setTimeout(() => { let scrollResponder = this.refs.scrollView.getScrollResponder(); scrollResponder.scrollResponderScrollNativeHandleToKeyboard( React.findNodeHandle(this.refs[refName]), 0, true ); }, 50); }, render: function() { return (<ScrollView ref='scrollView' style={styles.scroller}><View style={styles.container}><View style={styles.header}><Text>New Post</Text><View style={styles.actions}><ActionButton handler={this.handleBackButtonPress} icon={'fontawesome|close'} size={15} width={15} height={15} /></View></View><View style={styles.content}><TextInput underlineColorAndroid={'white'} placeholder={'Who\'s your professor?'} ref='professor' onFocus={this.onInputFocus.bind(this, 'professor')} style={styles.professor} /><TextInput multiline={true} underlineColorAndroid={'white'} placeholder={'What do you think?'} ref='post' onFocus={this.onInputFocus.bind(this, 'post')} style={styles.post} /></View><View style={styles.footer}><TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackground()}><View style={{width: 50, height: 25, backgroundColor: 'green'}}><Text>Submit</Text></View></TouchableNativeFeedback></View></View></ScrollView> ); }});const styles = StyleSheet.create({ scroller: { flex: 1, flexDirection: 'column' }, container: { flex: 1, flexDirection: 'column', justifyContent: 'flex-start', backgroundColor: 'white', padding: 5, }, post: { flex: 3 }, professor: { flex: 1 }, actions: { flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignSelf: 'center' }, header: { flex: 1, padding: 5, flexDirection: 'row' }, content: { flex: 4 }, footer: { flex: 1 }});From what I can see, I'm setting the flex property all the way down the view hierarchy but that still isn't doing anything (at the top level is a Navigator with {flex: 1} as well). Any suggestions?