Programming Tutorials

flexDirection in React Native

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

flexDirection is a CSS property in React Native that is used to define the direction of the main axis of a container. It has two possible values:

  • row: the main axis is horizontal, and the items are positioned from left to right.
  • column: the main axis is vertical, and the items are positioned from top to bottom.

Here is an example of using flexDirection:

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

const App = () => {
  return (
     <View style={styles.container}>
<View style={styles.item}>
<Text style={styles.text}>Item 1</Text>
<View style={styles.item}>
<Text style={styles.text}>Item 2</Text>
<View style={styles.item}>
<Text style={styles.text}>Item 3</Text>
</View> ); }; const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, item: { flex: 1, height: 100, margin: 10, backgroundColor: 'lightblue', justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 20, fontWeight: 'bold', color: 'white', }, }); export default App;

In this example, flexDirection is set to row on the container, which means that the three item components are positioned horizontally from left to right. justifyContent is set to center, which centers the items along the main axis. alignItems is set to center, which centers the items along the cross axis.

The item components are given a flex value of 1, which means they will each take up an equal amount of space along the main axis. They also have a fixed height of 100 and a margin of 10 to separate them.

The result is a row of three blue boxes with white text, centered horizontally and vertically within their container.

Add Comment

* Required information


No comments yet. Be the first!

Most Viewed Articles (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