Mobile App Carousels in React Native with Pagination

Carousels for mobile apps can significantly enhance UI/UX, providing a versatile way to display ads, highlight key information, or present dynamic content without cluttering the screen. Over the years, various libraries have been developed for React Native carousels. In this article, I’ll demonstrate how to implement one of the best options, react-native-reanimated-carousel, in a React Native or Expo application.

Step 1: Install the Library

To begin, install the react-native-reanimated-carousel SDK:

For React Native:

yarn add react-native-reanimated-carousel@4.0.0-alpha.12

For Expo:

npx expo install react-native-reanimated-carousel@4.0.0-alpha.12

Step 2: Add Required Dependencies

Next, add the necessary dependencies for smooth animations and gestures:

For React Native:

yarn add react-native-reanimated react-native-gesture-handler

For Expo:

npx expo install react-native-reanimated react-native-gesture-handler

Step 3: Set Up the Carousel

Here’s a step-by-step implementation:

import * as React from "react"; 
import { View, Dimensions } from "react-native"; 
import { 
  Extrapolation, 
  interpolate, 
  useSharedValue, 
} from "react-native-reanimated"; 
import Carousel, { 
  ICarouselInstance, 
  Pagination, 
} from "react-native-reanimated-carousel"; 
 
const defaultColors = [ 
  "#B0604D", 
  "#899F9C", 
  "#B3C680", 
  "#5C6265", 
  "#F5D399", 
  "#F1F1F1", 
]; 
 
const PAGE_WIDTH = Dimensions.get('window').width; 
 
function CarouselExample() { 
  const progress = useSharedValue<number>(0); 
  const baseOptions = { 
    vertical: false, 
    width: PAGE_WIDTH, 
    height: PAGE_WIDTH * 0.6, 
  }; 
 
  const ref = React.useRef<ICarouselInstance>(null); 
 
  const handlePaginationPress = (index: number) => { 
    ref.current?.scrollTo({ 
      count: index - progress.value, 
      animated: true, 
    }); 
  }; 
 
  return ( 
    <View style={{ gap: 10 }}> 
      <View style={{ marginBottom: 10 }}> 
        <Carousel 
          ref={ref} 
          {...baseOptions} 
          loop 
          onProgressChange={progress} 
          style={{ width: PAGE_WIDTH }} 
          data={defaultColors} 
          renderItem={({ item }) => ( 
            <View 
              style={{ 
                backgroundColor: item, 
                borderRadius: 15, 
                flex: 1, 
              }} 
            /> 
          )} 
        /> 
      </View> 
 
      <Pagination.Basic 
        progress={progress} 
        data={defaultColors} 
        dotStyle={{ backgroundColor: "#262626" }} 
        activeDotStyle={{ backgroundColor: "#f1f1f1" }} 
        containerStyle={{ gap: 5, marginBottom: 10 }} 
        onPress={handlePaginationPress} 
      /> 
    </View> 
  ); 
} 
 
export default CarouselExample;

Key Notes

1. Data Setup: In this example, we define an array of color strings, defaultColors, which serve as the background for each carousel item.
2. Carousel Props: The data prop is passed to the Carousel component, and each item is rendered as a View with a unique background color.
3. Pagination Component: We’re using the Pagination.Basic component for navigation. The onPress functionality allows users to jump to specific slides.
4. Version Info: Note that this example uses version 4.0.0-alpha.12 because the Pagination component is not available in version 3.

Final Thoughts

This implementation demonstrates a simple yet powerful way to integrate a carousel into your React Native or Expo app. With its smooth animations and robust features, react-native-reanimated-carousel elevates your app’s user experience. Experiment with this library to unlock its full potential!

Try BanKan Board — The Project Management App Made for Developers, by Developers

If you’re tired of complicated project management tools with story points, sprints, and endless processes, BanKan Board is here to simplify your workflow. Built with developers in mind, BanKan Board lets you manage your projects without the clutter.

Key Features:

• No complicated processes: Focus on what matters without the overhead of traditional project management systems.
• Claude AI Assistant: Get smart assistance to streamline your tasks and improve productivity.
• Free to Use: Start using it without any upfront cost.
• Premium Features: Upgrade to unlock advanced functionality tailored to your team’s needs.

Whether you’re building a side project, managing a team, or collaborating on open-source software, BanKan Board is designed to make your life easier. Try it today!

Get Started with BanKan Board — It’s Free!