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
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! 😎