Building a Netflix-style card carousel in React Native

Forget about third party libraries. Those animated card carousels from streaming apps are actually quite simple to build in React-Native.

With the use of some React Native components and simple animation logic, we can build an experience similar to what you would find on Netflix and Disney+.

Specifically, we will be making use of the following concepts:

• Horizontal ScrollView
• The snapToInterval prop
• Animated interpolation

Follow along with each step below or click here for the finished code example.

Step 1: Creating the horizontal ScrollView with snapToInterval

Let’s start by setting up a simple full-width carousel.

• At its core, the card carousel is just a horizontal ScrollView component with snapToInterval set to the width of the content inside.
• For the content blocks, we can take advantage of React Native’s ImageBackground component to cover the card in an image — or movie still in our specific case.
• We’ll make the carousel content…