CODEWITHSUNDEEP
react-native
Pulkit Sharma
Pulkit Sharma

Reputation: 555

Child View moving out of parent view in react native

I have a parent <View> type and a child <Text> type. If the text value is large, the text moves out of the container view. Any idea how to contain it ? P.S. I dont want the text be trimmed and followed by "...", because i need to add animation to it and scroll it back into the view.

Upvotes: 5

Views: 4528

Answers (1)

Luis Rizo
Luis Rizo

Reputation: 2109

To solve this issue, I suggest using flex. Here is a simple example:

<View style={{
 flex:1,
 flexWrap:'wrap', 
 flexDirection:'row',
 justifyContent:'center',
 alignItems:'center',
 marginTop:50}}>
   <Text>Something</Text>
   <Text>Something</Text>
   <Text>Something</Text>
   <Text>Something</Text>
   <Text>Something</Text>
   <Text>Something</Text>
   <Text>Something</Text>
   <Text>Something</Text>
</View>

The key here is the flex:1 and the flexWrap:'wrap', which tells the view to use up all the available space and wrap its children around itself. If you are still unable to make it work, try to give it an 'alignItems' style like I did in the example above.

With this code you can make something like this:

Screenshot of the code above

enter image description here

Upvotes: 1

Related Questions