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>
      <View style={styles.item}>
        <Text style={styles.text}>Item 2</Text>
      </View>
      <View style={styles.item}>
        <Text style={styles.text}>Item 3</Text>
      </View>
    </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.