CODEWITHSUNDEEP
cssreact-native
Sachit Shetty
Sachit Shetty

Reputation: 123

React-Native justifyContent is not working

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

Upvotes: 4

Views: 14760

Answers (4)

Abhitech
Abhitech

Reputation: 1

Earlier you were trying to center the content vertically using justifyContent: 'center'.

This works, fine but we need to also look for few other things:

  1. The parent container has flexDirection: 'column' which is correct for stacking items vertically.
  2. The children components are not wrapped in additional component that is changing the layout unintentionally.

Upvotes: 0

Nziranziza
Nziranziza

Reputation: 49

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;

Upvotes: 0

Syed
Syed

Reputation: 570

Try adding this style:

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

Upvotes: 2

Mervzs
Mervzs

Reputation: 1154

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

Upvotes: 5

Related Questions