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

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

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

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

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

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import NumberFormat from 'react-number-format';

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

to set flexWrap to 'wrap' in the View so that the Text components inside will wrap to the next row when they reach the screen’s right edge.

Conclusion

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