One of the most recent UI features that I love to hate is in Google’s YouTube TV app. It’s the channel list with the parallax animation on the top but while I find it a very cool effect, there was something that bothered me about it. So I decided to build it to learn more about it.

You can follow this tutorial to see how to build the effect in React Native

I gathered some nice data from https://www.themoviedb.org/ that I used to populate the title and backdrop that I will be using in the demo.

The first step is to read data from the JSON file and render the rows into the ScrollView, I tried to make them look like the real thing from YouTube’s app.

We also need some kind of Row component

Try the first step on your device: