React-Native justifyContent is not working

Question

class Application extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NewItemContainer />
        <UndoRedoContainer />
        {/*
        <UnpackedItemsContainer title="Unpacked Items" render={() => <UnpackedFilterContainer />} />
        <PackedItemsContainer title="Packed Items" render={() => <PackedFilterContainer />} />
        <MarkAllAsUnpackedContainer /> */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'#F79D42',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  }
});


export default Application;

All i'm trying to do is move the content to the center of the screen (vertically).

justifyContent: 'center'

should work here, but it is not working. I've posted a link to the image. https://1drv.ms/u/s!Agwl3ZPMPDkwg_V0EB-4u-njSFZaKg

Answer 1

Add backgroundColor to your child components, check if the child component occupies the vertical height of your parent view. :D

edited:

add background to your NewItemContainer Component, like this.. if the backgroundColor turns into the color of the child component you must adjust its flex or change it to height , width property

import React, {Component} from 'react';
import {View, Button} from 'react-native';

export default class NewItemContainer extends Component{
  render(){
    return(
      <View style={{flex:1, backgroundColor:'green'}}>
      <Button title='Click Me' />
    </View>
    )
  }
}

Answer 2

Try adding this style:

justifyContent: 'center',
alignItems: 'center',
flex: 1

Answer 3

Not sure what's the problem but this is how I managed to fix it Just wrap the whole thing with an extra view like so. I do think it was supposed to work with your original code though

class Application extends Component {
  render() {
    return (
     <View style={styles.container}>
      <View>
        <NewItemContainer />
        <UndoRedoContainer />
        {/*
        <UnpackedItemsContainer title="Unpacked Items" render={() => <UnpackedFilterContainer />} />
        <PackedItemsContainer title="Packed Items" render={() => <PackedFilterContainer />} />
        <MarkAllAsUnpackedContainer /> */}
      </View>
     </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'#F79D42',
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  }
});


export default Application;