Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react native
communitycreator

How to integrate Carousel in React Native with pagination

Gautham Vijayan

In this shot, we will discuss how to integrate Carousel in a React Native application.

Carousels are widely used by many big websites, such as Amazon, Flipkart, etc. The same design element has been ported to mobile apps like Tinder, which uses swipe animation.

In this shot, we are going to implement react-native-snap-carousel in our React Native application.

Getting started

Create a new react-native project from your terminal and enter into that project.

npx react-native init rncarousel
cd rncarousel

After doing that, install the carousel package react-native-snap-carousel from your terminal.

npm i react-native-snap-carousel

Next, go to your App.js and refactor your code to include the react-native-snap-carousel package.

import React from 'react';
import { Text, View} from 'react-native';
import Carousel from 'react-native-snap-carousel';

const App = () => {
  return (
    <View>
      <Text>React Native Carousel</Text>
    </View>
  );
};



export default App;

How to integrate Carousel

Let’s integrate Carousel into our application.

With this package, we can integrate different types of carousels, such as:

  1. Stack
  2. Tinder-like Carousel

After we integrate Carousel, we will integrate pagination for our carousel.

We are going to create a dummy array of data to use in our carousel.


const data = [
  {id: 1, name: 'React JS', url: 'https://icon-library.com/images/react-icon/react-icon-29.jpg'},
  {id: 2, name: 'JavaScript', url: 'https://upload.wikimedia.org/wikipedia/commons/3/3b/Javascript_Logo.png'},
  {id: 3, name: 'Node JS', url: 'https://upload.wikimedia.org/wikipedia/commons/6/67/NodeJS.png'},
];

Now, we are going to use the Carousel component. To use the Carousel component, we need to provide the SliderWidth and ItemWidth of the Carousel elements.

We will use the dimension property of React Native. After that, we will render each item of the carousel to the frontend with a functional component called renderItem.

const renderItem = ({item}) => {
  return (
    <View
      style={{
        borderWidth: 1,
        padding: 20,
        borderRadius: 20,
        alignItems: 'center',
        backgroundColor: 'white',
      }}>
      <Image source={{uri: item.url}} style={{width: 200, height: 200}} />
      <Text style={{marginVertical: 10, fontSize: 20, fontWeight: 'bold'}}>
        {item.name}
      </Text>
    </View>
  );
}

Once we make the renderItem component, we can customize our carousel with different layout props to get a Tinder-like product.

The complete App.js code is below.

import React from 'react';
import {Text, View, Dimensions, Image} from 'react-native';
import Carousel from 'react-native-snap-carousel';

export const SLIDER_WIDTH = Dimensions.get('window').width + 30;
export const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.8);

const data = [
  {
    id: 1,
    name: 'React JS',
    url: 'https://icon-library.com/images/react-icon/react-icon-29.jpg',
  },
  {
    id: 2,
    name: 'JavaScript',
    url: 'https://upload.wikimedia.org/wikipedia/commons/3/3b/Javascript_Logo.png',
  },
  {
    id: 3,
    name: 'Node JS',
    url: 'https://upload.wikimedia.org/wikipedia/commons/6/67/NodeJS.png',
  },
];

const renderItem = ({item}) => {
  return (
    <View
      style={{
        borderWidth: 1,
        padding: 20,
        borderRadius: 20,
        alignItems: 'center',
        backgroundColor: 'white',
      }}>
      <Image source={{uri: item.url}} style={{width: 200, height: 200}} />
      <Text style={{marginVertical: 10, fontSize: 20, fontWeight: 'bold'}}>
        {item.name}
      </Text>
    </View>
  );
};

const App = () => {
  return (
    <View style={{marginVertical: 10}}>
      <Carousel
        data={data}
        renderItem={renderItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
      />
    </View>
  );
};
export default App;

How to integrate pagination

Next, let’s integrate pagination in our carousel so that when we click on the dots, we get navigated to that particular carousel item. We will use useRef to achieve this functionality.

We will attach the ref to the carousel, and when the user presses on the pagination dots, they will be navigated to that particular item in the carousel. We also need to use the index useState value to know where the carousel currently is.

import React, {useState, useRef} from 'react';
import {Text, View, Dimensions, Image} from 'react-native';
import Carousel, {Pagination} from 'react-native-snap-carousel';

export const SLIDER_WIDTH = Dimensions.get('window').width + 30;
export const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.8);

const data = [
  {
    id: 1,
    name: 'React JS',
    url: 'https://icon-library.com/images/react-icon/react-icon-29.jpg',
  },
  {
    id: 2,
    name: 'JavaScript',
    url: 'https://upload.wikimedia.org/wikipedia/commons/3/3b/Javascript_Logo.png',
  },
  {
    id: 3,
    name: 'Node JS',
    url: 'https://upload.wikimedia.org/wikipedia/commons/6/67/NodeJS.png',
  },
];

const renderItem = ({item}) => {
  return (
    <View
      style={{
        borderWidth: 1,
        padding: 20,
        borderRadius: 20,
        alignItems: 'center',
        backgroundColor: 'white',
      }}>
      <Image source={{uri: item.url}} style={{width: 200, height: 200}} />
      <Text style={{marginVertical: 10, fontSize: 20, fontWeight: 'bold'}}>
        {item.name}
      </Text>
    </View>
  );
};

const App = () => {
  const [index, setIndex] = useState(0);
  const isCarousel = useRef(null);
  return (
    <View style={{marginVertical: 10}}>
      <Carousel
        ref={isCarousel}
        data={data}
        renderItem={renderItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
        onSnapToItem={index => setIndex(index)}
      />
      <Pagination
        dotsLength={data.length}
        activeDotIndex={index}
        carouselRef={isCarousel}
        dotStyle={{
          width: 10,
          height: 10,
          borderRadius: 5,
          marginHorizontal: 8,
          backgroundColor: '#F4BB41',
        }}
        tappableDots={true}
        inactiveDotStyle={{
          backgroundColor: 'black',
          // Define styles for inactive dots here
        }}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
      />
    </View>
  );
};

export default App;

We have now integrated Carousel in our React Native app with pagination.

If you want to integrate Tinder-like animations, you can use the code below.

 <Carousel
       layout={'tinder'}
        ref={isCarousel}
        data={data}
        renderItem={renderItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
        onSnapToItem={index => setIndex(index)}
      />

You can find all the code from this shot on GitHub.

RELATED TAGS

react native
communitycreator
RELATED COURSES

View all Courses

Keep Exploring