is it possible to have a card with dynamic height?

[PavelPolyakov]

Hello,

First of all - thanks for the great library which allows to have some nice animation without actually understanding how the animations work :)

I have an issue, though. In the examples provided, the height of the card is always set explicitly. Is it possible to have it dynamic? When I try that, the child container renders with the height 0.

Here is the snack where everything works fine (switch to iOS):
https://snack.expo.io/S1GXtV5zS

Here is the snack where I remove height from the card (switch to iOS):
https://snack.expo.io/BkSrK4qMB (you don't see anything)

In my app I don't know the height of the card upfront and can not calculate it based on the screen dimensions.

This also can be a reason for this issue: #3, however no reproduceble example was provided there.

Would appreciate any help or suggestions.

Regards,

[BenColwell131]

@PavelPolyakov would be curious to know if you ever found a way to do this?

[PavelPolyakov]

@BenColwell131
No, I didn't. I theoratically assume, that it should be possible to dance around onLayout:
https://facebook.github.io/react-native/docs/view#onlayout

draw that block somewhere where customer doesn't see it (position absolute), get it's layout and use it. I don't know if it's possible in RN :)

[ZaikinaEvgeniya-2]

any idea?

[darshanksexathought]

@BenColwell131 , @ZaikinaEvgeniya-2 , @PavelPolyakov onLayout is not the best approach what you can do is copy the code from CardFlip.js, from the repo, and in the style, they are giving position absolute for both the card so what you can do is have 2 styles, and dynamically
let's say you have 1 and 2 when view 1 is rendered first choose cardContainer for view 1 and cardContainer2 for view 2 similarly if view 2 is displayed then choose cardContainer for view 2 and cardContainer2 for view 1
const styles = StyleSheet.create({
cardContainer: {
flex: 1,
},
cardContainer2: {
flex: 1,
position: "absolute",
left: 0,
right: 0,
bottom: 0,
top: 0
}
});