Sometimes, we want to add space between two elements on the same line in React Native.

In this article, we’ll look at how to add space between two elements on the same line in React Native.

How to add space between two elements on the same line in React Native?

To add space between two elements on the same line in React Native, we can set justifyContent to 'space-between' in the View.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Text>foo</Text>
      <Text>bar</Text>
    </View>
  );
}

to set the flexDirection to 'row' and the justifyContent style to 'space-between' to spread the Text components on the screen.

As a result, we should see ‘foo’ displayed on the left side and ‘bar’ on the right.

Conclusion

To add space between two elements on the same line in React Native, we can set justifyContent to 'space-between' in the View.