Flexbox with flexDirection,justifyContent,alignItems example in react native

• Create Components folder under src folder
• Add FlexboxEXP1.js file and add below Code

import React from "react";

import { View, StyleSheet, Text } from "react-native";

const FlexboxEXP1 = props => {

  return (

    <View style={styles.container}>

      <Text>

        Flexbox with flexDirection,justifyContent,alignItems Properties{" "}

      </Text>

      <View style={styles.redbox} />

      <View style={styles.bluebox} />

      <View style={styles.blackbox} />

    </View>

  );

};

export default FlexboxEXP1;

const styles = StyleSheet.create({

  container: {

    flexDirection: "column",

    justifyContent: "space-between",

    alignItems: "flex-end"

  },

  redbox: {

    width: 100,

    height: 100,

    backgroundColor: "red"

  },

  bluebox: {

    width: 100,

    height: 100,

    backgroundColor: "blue"

  },

  blackbox: {

    width: 100,

    height: 100,

    backgroundColor: "black"

  }

});

• Open App.js file and update code as below

import React from 'react';

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

import FlexboxEXP1 from './src/Component/FlexboxEXP1'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <FlexboxEXP1/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: