Sometimes, we want to fix React Native text getting vertically cut off.

In this article, we’ll look at how to fix React Native text getting vertically cut off.

How to fix React Native text getting vertically cut off?

To fix React Native text getting vertically cut off, we should add padding to the Text component.

For instance, we write:

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

export default function App() {
  return (
    <View>
      <Text style={{ padding: 15 }}>text</Text>
    </View>
  );
}

to set the padding style to 15px on the Text component.

Now the text shouldn’t be cut off.

Conclusion

To fix React Native text getting vertically cut off, we should add padding to the Text component.