Accordion Component

[ShaneKeney]

I was recently building out an accordion component to practice using react-native-reanimated. I was able to successfully achieve what I was looking for accomplish so thank you for the great animation library 👏.

That being said, I had to workaround something that I didn't quite know how to handle. What I was trying to achieve is to allow the height of the accordion when "opened" to be based off the children dimensions such that I didn't have to statically set the height to the sum of the children heights for specific line items. So...

Accordion "closed": height: 0 whereas Accordion "open": height: undefined (thus letting the children dictate the size).

When I do this without animation it shows as I want.

How can I achieve this same behavior leveraging an animation? Or, is there a better alternative way to think about solving the problem?

[Rakha112]

Hey, I once created an Accordion component a few months ago, I used the measure function to determine the height of its children components.

Here's the repository for the accordion I made, you might want to take a look

[ShaneKeney]

Just took a look and will experiment with this as soon as I get the chance. Thanks for the resource!

[MatiPl01]

If someone is looking for a solution, here is the example how to implement the accordion component in the official docs.

[MatiPl01]

I am closing this discussion as it seems that the solution is already found. Feel free to re-open the discussion if you have more questions.