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

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.

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.

class App extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        {items.map(item => <Row {...item} />)}
      </ScrollView>
    );
  }
}

We also need some kind of Row component

export default class Row extends PureComponent {
  static propTypes = {
    title: PropTypes.string.isRequired,
  };

  render() {
    const { title } = this.props;
    return (
      <View style={styles.row}>
        <Text style={styles.row__text}>{title}</Text>
      </View>
    );
  }
}