React Native, having problems with Flex Box

Question

I'm practicing my React Native programming and I have an issue with the Flex Layout that I don't seem to understand pretty well

I wanted to make my test app look like this image below

Sample App

But in the end, this is what I get. There is some misalignment in the 'Home' text which suppose to be centered properly and a missing gap on the two right icons.

Sample Test App

I have tried putting padding on the two icon but have no luck with in.

Here's my code:

import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerContainer}>
          <View style={styles.headerBrandingContainer}>
            <Text style={styles.headerBranding}>Brand</Text>
          </View>
          <View style={styles.headerRowContainer}>
            <Icon name="menu" size={30} color="white" />
            <Text style={styles.headerRowPage}>Home</Text>
            <View style={styles.headerRowIcons}>
              <Icon name="filter" size={30} color="white" />
              <Icon name="search" size={30} color="white" />
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',

  },
  headerContainer: {
    backgroundColor: '#3498db',
    height: 180,
    justifyContent: 'center',
  },
  headerBrandingContainer: {
    marginTop: 50,
    alignItems: 'center',
  },
  headerBranding: {
    fontSize: 40,
    fontWeight: '400',
    letterSpacing: 1,
    color: '#fff',
  },
  headerRowContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin: 10
  },
  headerRowIcons: {
    //backgroundColor: 'red',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  headerRowPage: {
    // marginLeft:20,
    fontSize: 25,
    fontWeight: '500',
    color: '#fff',

  }
});

Answer 1

To align childs of headerContainer vertically you should use alignItems with the code below :

headerContainer: {
    display: 'flex',
    backgroundColor: '#3498db',
    height: 180,
    justifyContent: 'center',
    alignItems: 'center'
}

A usefull resource to understand flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Remove too your marginTop on headerBrandingContainer styles.

EDIT:

Finally I think the best way is to make some modifications in the component tree so that the headerRowContainer items are all flex elements to 1. In this way, the title is always centered (the views having the same size) and we can now manage the placement of buttons without impacting the rest. It works perfectly for me.

import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerContainer}>
          <View style={styles.headerBrandingContainer}>
            <Text style={styles.headerBranding}>Brand</Text>
          </View>
          <View style={styles.headerRowContainer}>
            <View style={styles.buttonsContainerLeft}>
              <Icon name="menu" size={30} color="white" />
            </View>
            <View style={styles.titleContainer}>
              <Text style={styles.headerRowPage}>Home</Text>
            </View>
            <View style={styles.headerRowIcons}>
              <Icon
                name="filter"
                size={30}
                color="white"
                style={styles.filterIcon}
              />
              <Icon name="search" size={30} color="white" />
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  headerContainer: {
    backgroundColor: '#3498db',
    height: 180,
    justifyContent: 'center'
  },
  headerBrandingContainer: {
    marginTop: 50,
    alignItems: 'center'
  },
  headerBranding: {
    fontSize: 40,
    fontWeight: '400',
    letterSpacing: 1,
    color: '#fff'
  },
  headerRowContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10
  },
  buttonsContainerLeft: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start'
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  headerRowIcons: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'flex-end'
  },
  headerRowPage: {
    fontSize: 25,
    fontWeight: '500',
    color: '#fff'
  },
  filterIcon: {
    marginRight: 20
  }
});