React Native - Flex box for layout

Flexbox is designed to provide a consistent layout on different screen sizes. One will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.Flexbox works the same way in React Native as it does in CSS on the web, The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

Sample is given below

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

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
     
       
       
       
      !View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);


References:
https://facebook.github.io/react-native/docs/flexbox