Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React native how to wrap content view

Tags:

react-native

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.

like image 856
Mina Makhtar Avatar asked Nov 09 '16 09:11

Mina Makhtar


People also ask

How do you wrap content within view React Native?

To wrap React Native text on the screen, we can set flexWrap to 'wrap' .

What does flex 1 do React Native?

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.

How do I truncate text in React Native?

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.

How do you use justify content in React Native?

Justify Content​flex-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.


1 Answers

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.

like image 85
Edison D'souza Avatar answered Sep 22 '22 04:09

Edison D'souza