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

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.

Below is the code for this core implementation:

What it should render is a carousel with full width items that snap when a specific scrolling threshold is crossed. With this simple example in place, we’re now ready to add more visual fidelity.

Step 2: Add card offsets and animated interpolation

To get the real Netflix card carousel effect, we need to visually inform the user that more items exist by exposing the edges of adjacent cards.

We can achieve this by adding an offset value:

  • Begin with initializing an offset value for our component (line 10)

Next, let’s add animations to the size and opacity of the selected item to give it more prominence.

  • To drive the animation, we’ll need to keep track of the current X position of the scroll view. We can create a ref to keep track of this. (line 22)
const inputRange = [
(idx - 1) * ITEM_WIDTH,
idx * ITEM_WIDTH,
(idx + 1) * ITEM_WIDTH,
]
// index 0 - scroll positions before the item is active
// index 1 - scroll position during the item's active state
// index 2 - scroll positions after the item is active
  • When the scrollX value comes closer to our item’s ScrollView width offset, we can use this information to transform the item’s translate scale and opacity (line 49, line 54).

React Native gives us all the tools we need to make both simple and advanced carousels. You should now have the recipes and confidence that you need to go out there and create some wonderful carousels of your own. Happy building! 😎

Hello. I write primarily about programming and technology. I’m also fluent in film references.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store