Layout Design With Flexbox In React Native

In this tutorial explains how to design layout using flexbox in react native application. Layouts in React Native use a subset of Flexbox. (I say "subset" because not all features that are in the Flexbox specification are included.) So if you already know Flexbox, then you can readily apply those skills in React Native. It's also worth noting that there are no floats or percentage-based units in React Native. This means that we can only do layouts using Flexbox and CSS positioning.

React Native Flexbox Layout Example :

Lets see the most commonly used layout design in react native application using css flexbox example. In this layout design we are displaying text or image at the top of the screen and just below that we are displaying icons or text in grid layout.

App.js 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Button, Text } from "react-native";

export default class App extends Component {


  render() {
    return (
      <View style={styles.container}>

        <View style={{ backgroundColor: 'white', flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
          <Text> PLACE HOLDER FOR IMAGE</Text>
        </View>

        <View style={{ backgroundColor: 'lightblue', flex: 1, flexDirection: 'column', justifyContent: 'center' }}>

          <View style={{ flex: 1, flexDirection: 'row' }}>
            <Text style={{ backgroundColor: 'red', flex: 1, textAlignVertical: 'center', textAlign: 'center' }}> ICON 1</Text>
            <Text style={{ backgroundColor: 'pink', flex: 1, textAlignVertical: 'center', textAlign: 'center' }}> ICON 2</Text>
            <Text style={{ backgroundColor: 'green', flex: 1, textAlignVertical: 'center', textAlign: 'center' }}>ICON 3 </Text>
          </View>

          <View style={{ flex: 1, flexDirection: 'row', }}>
            <Text style={{ backgroundColor: 'yellow', flex: 1, textAlignVertical: 'center', textAlign: 'center' }}> ICON 4 </Text>
            <Text style={{ backgroundColor: 'lightblue', flex: 1, textAlignVertical: 'center', textAlign: 'center' }}> ICON 5 </Text>
            <Text style={{ backgroundColor: 'lightgreen', flex: 1, textAlignVertical: 'center', textAlign: 'center' }}> ICON 6 </Text>
          </View>

        </View>

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',

  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },

});

Screenshots :

This is all about React Native Flexbox Layout Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.