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 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.
      </Text>
    </View>
  );
}

to set the numberOfLines prop of the Text component to 1 to show the text in 1 line and truncate the part that can’t be shown in 1 line.

Conclusion

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