I'm attempting to create a custom Accordion with animations, but I haven't been able to achieve the desired outcome using the Reanimated library. Consequently, I opted to use react-native-paper. However, I'm unsure whether it meets my requirements, as I'd still need to implement my own animation. The challenge I'm encountering, and the goal I'm striving for, is to achieve dynamic height for the Accordion.
Firstly, I attempted to use Reanimated layout animations for both entering and exiting. However, I encountered an issue where the parent resized instantly when the child faded out. As a result, I'm uncertain if a solution exists for this behavior.
Secondly, I tried animating the height, but I couldn't successfully achieve the desired animation when it's nested. I utilized worklets with measure and interpolate. Unfortunately, the outcome was that only the parent's child was displayed without expanding further when the nested element was pressed. Nevertheless, I did find a solution from @wmonecke on GitHub that works for nested elements. However, it exhibits a bouncing behavior whenever I press the nested view. I'm unsure how to overcome this bouncing effect.
Lastly, I experimented with the solution provided by @vipul on Stack Overflow. This solution utilizes the React Animated API. However, I kept encountering a warning: 'Warning: Overriding previous layout animation with a new one before the first began:...'. Despite ignoring the warning, the animation for the parent involved fading only, whereas the desired effect for the nested element was a top-to-bottom collapsible animation.
I would greatly appreciate any assistance in resolving this issue. Below is the Expo Snack showcasing the Accordion without any animations.