How to re-create YouTube TV list animation in React Native

How to re-create YouTube TV list animation in React Native

Last but not least, fine tuning and cleanup. I still have to fix the bottom overflowing, allow clicking the rows to scroll to them and add a progress bar.

Calculating scrollview’s height

I am used to use native navigation and can get constants with heights of the Navbar, so I could calculate the above height from the device height and the constants. But as we’re using React Navigation, and to be safe, we will get the actual height of the scrollview and pass it into our Bottom view.

Passing scrollTo method down to components

This may look weird to you. Most likely because you’re not used to React.createRef or accessing internal refs from Animated components.

React.createRef can be used to access component refs without custom functions. The only difference is that you have to access the reference through thecurrent property.

Next we have Animated, which composes the ScrollView component, but gives us access through a private property, _component . This is not completly safe and could change, but currently there is no other way of doing this.

Some updated styles and fine-tuning of the variables, you can see the result here:

Here is the final demo — iOS only, click the lower right corner to switch (Desktop)