Categories
JavaScript Answers React Native Answers

How to avoid text wrapping with React Native?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *