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 full width at first, so we’ll use the Dimensions package from React Native to set an ITEM_WIDTH constant (line 10).

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)
  • Subtract the left and right offsets from our IMAGE_WIDTH constant to expose adjacent cards (line 11)
  • In order to keep the content always centered, we’ll add a dummy offset at the beginning of the carousel for the first card and at the end of the carousel for the last card. (lines 62–63)

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)
  • Make sure to update the current scrollX position when we scroll in the ScrollView. (line 34)
  • With our scrollX value, we can now interpolate this into meaningful values for animation purposes. React Native interpolate() supports multi-range segments, which allows us to more easily define active and dead zones (line 41). You can also interpret the input range as the following:
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).
  • To make sure that we can’t swipe all the way to the end, we can also enable disableIntervalMomentum (line 33).

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