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





Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

use axios in Expo to call APIs

react-native-background-job alternative in expo app

Session variables in React Native - Expo

Remove all installed dependencies and install them again

Start background location tracking after login in expo react native

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

set up a global error handler in React Native (expo)

Error Handling in TextInput - React Native

Some dependencies are incompatible with the installed expo version:

justifyContent in React Native

react-native-android-location-services-dialog-box alternative in expo

loadAsync() vs useFonts() in expo - react native

'import' and 'export' may only appear at the top level - React Native

Expo Build Process for React Native Projects

expo-secure-store to store sensitive data securely in React Native

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native