Animate height where height is not known

[shrikantr-iprogrammer]

Hi, My App got multiple profiles so I want to show a switcher or a dropdown ( similar to this - https://dribbble.com/shots/6913358-Dropdown-transitions). I have a Screen where I'm showing Profile name. If user click on this View (Profile name) whole screen should turns dark and at the same time dropdown should open. Hence I created another component with Modal and placed Profile list inside.

I took reference from your List example - the-10-min/src/Accordion/List.tsx

But here I don't know wants the Height of the list as each Profile item height varies. Some Profile have extra set of info. Can I use percentage values? Or do I need to use onLayout to know the Height of the complete List?

height = bInterpolate( transition, initial.height, 100% );

[wcandillon]

This is a great question that has been asked a lot and I plan to tackle it soon.

[sam17896]

@wcandillon i am stuck on the same problem have you figure out something yet?

[marc0-cruz]

@wcandillon i am stuck on the same problem have you figure out something yet?

Hey, there are some options to achieve this. Probably the best one is to:

1. Render your component outside the viewport by making it absolute and a sufficient negative margin (e.g left: -1000) so it is hidden to the users' eyes;
2. Save it's height with the onLayout property in your component's current state;
3. Reposition your component normally by removing the absolute positioning and setting it's height to 0;
4. Now just animate the component to it's actual height whenever you need it to.