React Native is very similar to React, but one of the major difference is styling the components. For styling we use similar to CSS, is called Flexbox Layout. Mainly Flexbox purpose is to provide fixed layout on different screen sizes.

• Flexbox Properties:
• flexDirection
• justifyContent
• alignItems
• flex
• flexWrap
• alignSelf

FlexDirection:

First create a component and take four boxes to arrange in that component. Let’s Imagine that component is a parent and four boxes are children. First thing we have to deside that direction of arraging children in parent which is main axis direction. This is determined by flexbox property called flexDirection.

flexDirection: 'row' | 'column'
row: align children from left to right.
row-reverse: align children from right to left.
column: (default value) align children from top to bottom.
column-reverse: align children from bottom to top.

flexDirection have two values 'row' and 'column'. Defalut value is 'column'. If we choose 'row' which means main axis direction row, the children(four boxes) are arranged horizontally, or If we choose 'column' children are arranged vertically in the direction of column in parent.

For ex:

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

export default class Example extends Component {
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <View style={{ height: 50, width: 50, backgroundColor: 'red' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'blue' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'green' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'black' }} />
      </View>
    );
  }
}

flexDirection: 'row'

After deciding the main axis direction we go with the alignment of children. For this we have mainly two properties.

justifyContent:

justifyContent: 'flex-start', 'center', 'flex-end', 'space-around', 'space-between', baseline
space-evenly: will space the children evenly.

Let’s assume that the main axis direction is ‘row’, then justifyContent property will justify children along with the main axis. By using 'flex-start', 'flex-end', 'center' we can arrange children in row direction, and by using 'space-around', and 'space-between' we can space the children.

For ex:

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

export default class Example extends Component {
  render() {
    return (
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <View style={{ height: 50, width: 50, backgroundColor: 'red' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'black' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'green' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'blue' }} />
      </View>
    );
  }
}

justifyContent: 'flex-start'

justifyContent: 'center'

justifyContent: 'flex-end'

justifyContent: 'space-between'

justifyContent: 'space-around'

alignItems:

alignItems: 'flex-start', 'center', 'flex-end', 'stretch'

Here our main axis direction is ‘row’(Horizontal), so alignItems property will arrange the children along with opposite direction of main axis(Vertical).

• flex-start: It will align children at start/top of the parent.
• flex-end: It will align children at end/bottom of the parent.
• center: It will align children at the center of the parent.
• stretch: It will stretch the children across the opposite of main axis until it reaches ends of the parent. It will apply only when opposite of main axis don't have fixed dimensions.
• baseline: It will align children at the common baseline. Individual children can be set to be the reference baseline for their parents.

for ex:

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

export default class Example extends Component {
  render() {
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <View style={{ height: 50, width: 50, backgroundColor: 'red' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'black' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'green' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'blue' }} />
      </View>
    );
  }
}

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

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'stretch' }}>
        <View style={{ height: 60, backgroundColor: 'red' }} />
        <View style={{ height: 60, backgroundColor: 'black' }} />
        <View style={{ height: 60, backgroundColor: 'green' }} />
        <View style={{ height: 60, backgroundColor: 'blue' }} />
      </View>
    );
  }
}

alignItems: 'flex-start'

alignItems: 'center'

alignItems: 'flex-end'

alignItems: 'stretch'

flex:

Another property of flexbox is flex and it is a number. Let’s assume parent is a view having value flex 1, and in the parent if we want to give 20 % space for the first box, 20% space to second box and 60% to third box then we have to give flex: 0.2, flex: 0.2, flex: 0.6 to their respective views.

For ex:

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

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 0.2, backgroundColor: 'red' }} />
        <View style={{ flex: 0.2, backgroundColor: 'black' }} />
        <View style={{ flex: 0.3, backgroundColor: 'green' }} />
        <View style={{ flex: 0.3, backgroundColor: 'blue' }} />
      </View>
    );
  }
}

Flex Example

flexWrap:

It will works as flex-wrap in CSS. For example if we have so many number of boxes and we didnot mention flexWrap: 'wrap' property to them, then all the boxes render in parent but we only see the number of boxes fit on the screen, not all the boxes. Default value for flexWrap is 'nowrap'.

flexWrap: wrap | nowrap | wrap-reverse

for ex:

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

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
        <View style={styles.boxStyle} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  boxStyle: {
    height: 100, 
    width: 50, 
    borderWidth: 1, 
    backgroundColor: 'orange', 
    marginBottom: 5
  },
});

flexWrap: 'wrap'

flexWrap:'nowrap'

alignSelf:

Whenever we want to style a specific child element with in a container or parent, we can use alignSelf property. This property have all values of alignItems.

alignSelf: 'flex-start', 'center', 'flex-end', 'stretch'

for ex:

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

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'flex-start' }}>
        <View style={{ height: 50, width: 50, backgroundColor: 'red' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'black' }} />
        <View style={{ height: 50, width: 50, alignSelf: 'flex-end', backgroundColor: 'green' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'blue' }} />
      </View>
    );
  }

alignSelf: 'flex-end'