How to add space between text lines in React Native?

Sometimes, we want to add space between text lines in React Native.

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

How to add space between text lines in React Native?

To add space between text lines in React Native, we can set the lineHeight style.

For instance, we write:

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

export default function App() {
  return (
    <View>
      {Array(10)
        .fill()
        .map((_, i) => {
          return <Text style={{ lineHeight: 30 }}>{i}</Text>;
        })}
    </View>
  );
}

to render to Text components with the lineHeight of each set to 30 pixels.

As a result, we should see extra space between each line of text.

Conclusion

To add space between text lines in React Native, we can set the lineHeight style.