React Native - Flexbox

React Native - Flexbox

React Native uses Flexbox to provide a consistent layout model across different screen sizes. Flexbox is designed to manage space distribution among items in a container, even when their size is unknown or dynamic.

We will use a simple component to demonstrate Flexbox properties.

Core Layout Properties

To achieve desired layouts, Flexbox primarily uses flexDirection, justifyContent, and alignItems properties on the container. The flex property is used on child items to define their ability to grow or shrink.

Property	Values (Common)	Description
flexDirection	’column’ (default), ‘row’, ‘column-reverse’, ‘row-reverse’	Defines the primary axis along which items are laid out. ‘column’ stacks items vertically, ‘row’ horizontally.
justifyContent	’flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’	Aligns items along the primary axis (defined by flexDirection).
alignItems	’flex-start’, ‘flex-end’, ‘center’, ‘stretch’ (default), ‘baseline’	Aligns items along the secondary axis (perpendicular to flexDirection).
flex	A number (e.g., 1, 2)	Applied to child items. Determines how much space an item should take relative to other items in the container along the primary axis. A value of 1 means it will take up available space proportionally.
alignSelf	’auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’	Applied to a child item to override the alignItems property of the parent container for that specific item.

Example 1: Aligning items vertically and centered:

App.js

<html>
 <body>
  <p>
import React from 'react';
import { StyleSheet, View } from 'react-native';

const App = () => {
  return (
    &lt;View style={styles.container}&gt;
      &lt;View style={styles.redBox} /&gt;
      &lt;View style={styles.blueBox} /&gt;
      &lt;View style={styles.blackBox} /&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, // Takes up all available space
    flexDirection: 'column', // Default, items stacked vertically
    justifyContent: 'center', // Center items vertically
    alignItems: 'center', // Center items horizontally
    backgroundColor: 'grey',
  },
  redBox: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    marginBottom: 10, // Added for spacing
  },
  blueBox: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    marginBottom: 10, // Added for spacing
  },
  blackBox: {
    width: 100,
    height: 100,
    backgroundColor: 'black',
  },
});

export default App;
  </p>
 </body>
</html>

Output: This code will display three colored boxes (red, blue, black) stacked vertically in the center of the screen, also centered horizontally. Each box has a small margin below it for separation.

Example 2: Arranging items horizontally, spaced apart, and aligned to the top:

App.js

<html>
 <body>
  <p>
import React from 'react';
import { StyleSheet, View } from 'react-native';

const App = () => {
  return (
    &lt;View style={styles.container}&gt;
      &lt;View style={styles.redBox} /&gt;
      &lt;View style={styles.blueBox} /&gt;
      &lt;View style={styles.blackBox} /&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Items arranged horizontally
    justifyContent: 'space-around', // Distribute space around items
    alignItems: 'flex-start', // Align items to the top of the container
    backgroundColor: 'lightgrey',
    paddingTop: 50, // Add some padding at the top
  },
  redBox: {
    width: 80,
    height: 80,
    backgroundColor: 'red',
  },
  blueBox: {
    width: 80,
    height: 80,
    backgroundColor: 'blue',
  },
  blackBox: {
    width: 80,
    height: 80,
    backgroundColor: 'black',
  },
});

export default App;
  </p>
 </body>
</html>

Output: This code will display three smaller colored boxes (red, blue, black) arranged horizontally near the top of the screen. They will have space distributed around them along the horizontal axis.

For a deeper understanding and interactive examples, visit the official React Native documentation on Layout with Flexbox or resources like Yoga Playground (Yoga is the layout engine behind React Native).