How to integrate Carousel in React Native with pagination
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:
- Stack
- 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 (<Viewstyle={{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 (<Viewstyle={{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}}><Carouseldata={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 (<Viewstyle={{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}}><Carouselref={isCarousel}data={data}renderItem={renderItem}sliderWidth={SLIDER_WIDTH}itemWidth={ITEM_WIDTH}onSnapToItem={index => setIndex(index)}/><PaginationdotsLength={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.
<Carousellayout={'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.
