I'm pretty new with RN, is there anyway to wrap the content of the view, similar to Android. In Android I can adjust, Height: 'wrap-content', but somehow in RN, I can't do any wrap content.
It's either I set the height of the view, or just flex, but still not wrap the view.
To wrap React Native text on the screen, we can set flexWrap to 'wrap' .
Normally you will use flex: 1 , which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
As long as the container of the Text element has a Flex value (I use, 1), the text will be truncated within the container. ellipsizeMode='tail' is not needed as 'tail' is default value for ellipsizeMode. Unless you want to show ellipse in beginning of the text, you can use just numberOfLines prop and it should work.
Justify Contentflex-end Align children of a container to the end of the container's main axis. center Align children of a container in the center of the container's main axis. space-between Evenly space off children across the container's main axis, distributing the remaining space between the children.
You can set the parent to wrap child component like this.
alignSelf: 'baseline'
<View style={{ alignSelf:'baseline'}}> <Text>Child Content</Text> </View>
Wrap child content horizontally.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With