Sometimes, we want to have content break to next line with flex when content reaches edge with Flex React Native.

In this article, we’ll look at how to have content break to next line with flex when content reaches edge with Flex React Native.

How to have content break to next line with flex when content reaches edge with Flex React Native?

To have content break to next line with flex when content reaches edge with Flex React Native, we can set flexWrap to 'wrap'.

For instance, we write:

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

export default function App() {
  return (
    <View
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        flexDirection: 'row',
      }}>
      {Array(100)
        .fill()
        .map((_, i) => {
          return (
            <Text key={i} style={{ width: 50 }}>
              hello
            </Text>
          );
        })}
    </View>
  );
}

to set flexDirection to 'row' to set the flexbox direction to horizontal.

Then we set flexWrap to 'wrap' to make the child items wrap when it reaches the right edge of the screen.

And finally we add some Text components with width of 50 pixels as children of the View.

As a result, we see the ‘hello’ text displayed in rows.

Conclusion

To have content break to next line with flex when content reaches edge with Flex React Native, we can set flexWrap to 'wrap'.