Programming Tutorials

justifyContent in React Native

By: Kelly G in React-Native Tutorials on 2023-04-08  

justifyContent is a flexbox property in React Native used to align child elements along the main axis of their container. It controls how extra space in the container is distributed among the child elements. Here's an example to help understand how justifyContent works:

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}></View>
      <View style={styles.box2}></View>
      <View style={styles.box3}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 20,
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
});

In this example, we have a container with flexDirection set to row. We also set justifyContent to space-between, which means that the child elements will be evenly distributed along the main axis of the container with extra space placed between them.

The child elements are three boxes with different background colors. By setting the width and height properties, we give each box a fixed size. Since the container has extra space available, the boxes are spread out evenly with space between them, as specified by justifyContent: 'space-between'.

There are other values you can use for justifyContent, including:

• flex-start: Aligns child elements to the start of the container
• flex-end: Aligns child elements to the end of the container
• center: Centers child elements in the middle of the container
• space-around: Distributes child elements with equal space around them
• space-evenly: Distributes child elements with equal space between them and around them