DEV Community

Cover image for Collapsible Card with React Native Reanimated

Collapsible Card with React Native Reanimated

Dima Portenko on July 10, 2023

In this tutorial, we'll create an animated collapsable card using react-native-reanimated. We'll be starting from a provided template, which ca...
Read full post
Collapse
 
skizzo profile image
Stephan Müller •

Hi,
first of all, thank you for the great tutorial!

The only problem I run into is when the "expanded" value is set to true on mount, nothing is displayed, I think it's because the collapsableStyle is not recomputed.

How could this be resolved?

Collapse
 
dimaportenko profile image
Dima Portenko •

Hey,
try to add height to the dependencies like

 const collapsableStyle = useAnimatedStyle(() => {
    animatedHeight.value = expanded ? withTiming(height) : withTiming(0);

    return {
      height: animatedHeight.value,
    };
  }, [expanded, height]);
Enter fullscreen mode Exit fullscreen mode

I believe on the first render height is 0 and it's not triggered to recalculate on height value updated.

Collapse
 
scalfs profile image
Vitor Escalfoni •

Thanks man! I had a similar solution, but what did the trick for me was your suggestion of using { overflow: 'hidden' }, to ensure we would get the full height.

Collapse
 
dimaportenko profile image
Dima Portenko •

Welcome!

Collapse
 
wmonecke profile image
Walter Monecke •

I dont know what I am doing wrong but this is not working for me.

Collapse
 
dimaportenko profile image
Dima Portenko •

if you'll share your code on github or expo snack, I can take a look.