I want to position 2 components underneath each other. My component looks like this :

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);

For some reason, when they are rendered, the list is just rendered over the searchbar. Why does the flexDirection:'column' not position them underneath each other?

I feel like I'm missing something about the flexbox layout.

I want to position 2 components underneath each other. My component looks like this :

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);

For some reason, when they are rendered, the list is just rendered over the searchbar. Why does the flexDirection:'column' not position them underneath each other?

I feel like I'm missing something about the flexbox layout.

• javascript
• reactjs
• react-native
• flexbox

• is the only styling being applied to SearchBar the styles. searchBarContainer styling, or is there other styling inside the component? – Nader Dabit Commented Jan 6, 2017 at 14:10
• Only the searchbarcontainer style. But in the meantime I have discovered that this has to do with the InputText component. If I use something else, it seems to work as expected. I still don't really understand why the TextInput should have special behaviour... – Ivar van Hartingsveldt Commented Jan 6, 2017 at 14:26

1 Answer 1

in your style.container, remove the flex entry but keep the flexDirection.