How to avoid text wrapping with React Native?

Sometimes, we want to avoid text wrapping with React Native.

In this article, we’ll look at how to avoid text wrapping with React Native.

How to avoid text wrapping with React Native?

To avoid text wrapping with React Native, we can set the numberOfLines prop of the Text component to 1.

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 style={{ flexDirection: 'row' }}>
      <Text numberOfLines={1} style={{ flex: 1, textAlign: 'left' }}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        pulvinar sem at leo dapibus maximus.
      </Text>
    </View>
  );
}

to set numberOfLines to 1 to make the text show in one line and truncate the part that overflows the screen.

Conclusion

To avoid text wrapping with React Native, we can set the numberOfLines prop of the Text component to 1.