Bug: inner view with `flex: 1` collapses its size to 0

Describe the bug

When flex: 1 is added to an inner view inside the carousel, its size will be collapsed to 0.

To Reproduce

Repro in https://github.com/dohooo/react-native-reanimated-carousel/pull/211

Expected behavior

Size should not collapse, or docs should reflect to not use flex: 1.

Screenshots

With flex: 1:

Without flex: 1:

Versions (please complete the following information): This bug is visible in current master. See repro in #211

[oliverloops]

Using the same layout implementation and works fine. flex: 1 instead flexGrow:1 works fine. but this is a related behavior with the element inside and not the Carousel itself and can be solved modifying the display attribute of the item container.

[dohooo]

Hey @oliverloops, could you expand on your answer above?

I have a component that I use both inside and outside of a react-native-reanimated-carousel. When it’s inside the carousel, the text gets collapsed as described in this ticket. When outside the component, it works fine.

I tried Toastbroad’s solution of changing flex: 1 to flexGrow: 1, and that fixed it inside the carousel. But then the component outside the carousel grows way too large.

I think you are on to something with recommending that we change the display attribute. But could you elaborate a bit more? According to the react-native docs, the default for display is “flex”, which is what I want. I don’t see any change in behavior when I explicitly set display: flex in the containing View. What did you have in mind when you susgested this solution?

Thanks for your help!

Could you provide a minimal reproduction?