Quiero colocar 2 componentes uno debajo del otro. Mi componente se ve así:

 import React from 'react'; import {connect} from 'react-redux'; import {Text, StyleSheet, View, ListView, Switch, TextInput} from 'react-native'; import {List, ListItem} from 'native-base'; import SearchBar from '../shared/search-bar'; const mapStateToProps = (state) => { return { movies: state.movies.movies }; }; const mapDispatchToProps = (dispatch) => { return {}; }; const Component = ({movies}) => { return ( <View style={styles.container}> <SearchBar style={styles.searchBarContainer}/> <List style={styles.list} dataArray={movies} renderRow={movie => <ListItem><Text>{movie.title}</Text></ListItem>} /> </View> ); }; let styles = StyleSheet.create({ container: { flexDirection: 'column', flex: 1, }, searchBarContainer: { flex: 0 }, list: { flex: 1 } }); export default connect(mapStateToProps, mapDispatchToProps)(Component);

Por alguna razón, cuando se representan, la lista simplemente se representa sobre la barra de búsqueda. ¿Por qué flexDirection:'column' no los coloca uno debajo del otro?

Siento que me estoy perdiendo algo sobre el diseño de flexbox.