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'
.