How to implement a Carousel in React-Native using react-native-snap-carousel part 1

For this article I will be explaining how to add a carousel with pagination in a React-Native app using the package react-native-snap-carousel.

First things first, create a react-native app project using the below command in your terminal.

npx react-native@latest init CarouselProject

Once the project has been successfully created open it in your chosen code editor and then run the below command to install the snap carousel package.

$ npm install --save react-native-snap-carousel

There are a few props of the “Carousel” component that are frequently used when being implemented which can be found below.

Data — the array of items to loop over to show in the carousel (Array type)

renderItem — Takes a piece of data and renders it to the list. A function can be passed into this to allow for a more customized look and feel. The item and index can be passed as an argument too.

itemWidth — Width of carousel items (pixels)

sliderWidth — Width of carousel itself (pixels)

itemHeight — Height of carousel items (pixels)