How to add space between components in React Native styling?

Sometimes, we want to add space between components in React Native styling.

In this article, we’ll look at how to add space between components in React Native styling.

How to add space between components in React Native styling?

To add space between components in React Native styling, we can add margins in each item.

For instance, we write:

import * as React from 'react';
import { View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flexDirection: 'column', flex: 6 }}>
      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'red', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'blue', flex: 1, marginLeft: 5 }}></View>
      </View>

      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'white', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'black', flex: 1, marginLeft: 5 }}></View>
      </View>

      <View
        style={{
          flex: 2,
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 10,
        }}>
        <View
          style={{ backgroundColor: 'gray', flex: 1, marginRight: 5 }}></View>
        <View
          style={{ backgroundColor: 'yellow', flex: 1, marginLeft: 5 }}></View>
      </View>
    </View>
  );
}

to add marginRight and marginLeft to each item to add gaps between each View.

Conclusion

To add space between components in React Native styling, we can add margins in each item.