Using Flexbox with React Native

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'

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'

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.

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'

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'

Posted On 08 September 2018 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Tracking location using React Native in Android

To track the location in react native we have ‘geolocation’. Geolocation support both ios and android. Before using the geolocation we need to request to ...

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties