How to implement a Carousel in React-Native using react-native-snap-carousel part 2
In my previous article I explained how to implement a carousel into your react-native application using the package react-native-snap-carousel. In this tutorial I expand upon that and show you how to implement a pagination component to your carousel to give your user a visual explanation as to what item they are currently viewing within the carousel.
Below is a url to the first tutorial —
I will be under the assumption that you have followed along from the first tutorial and will be carrying on from this and not explaining how to create a react-native application etc.
To implement pagination within the carousel it is similar to how the carousel is implemented, the package has a component called Pagination that takes in certain props. A better explanation of all the props can be found here —
There are some required props for the Pagination component and these are
“activeDotIndex” — This prop is a number and represents the current index of the active dot that will show to the user.
“dotsLength” — This props is a number and is the number of the dots to display (This can usually be set to the length property of the state array that will set to be the “data” prop on the Carousel component.
Other interesting props include:
“containerStyle” — Style for the dots container (style object)
“dotColor” — Background colour of the active dot (string value)
“dotContainerStyle” — Style of each dot’s container (style object)
You can also do the inverse of dot style and style the “inactive” dots using “inactiveDotColor”, “inactiveDotElement”, “inactiveDotOpacity”, “inactiveDotScale” and “inactiveDotStyle”
“vertical” — Determine whether to layout dots vertically or horizontally (Boolean)
So the first thing we will need to do is import the Pagination component from the “react-native-snap-carousel” package like below.
import Carousel, {Pagination} from 'react-native-snap-carousel';Next we will make a function called CarouselPagination and inside of this function we will return a Pagination component but for now our function will look like the below.
const CarouselPagination = () => {
}We will now include a return statement as we will want to return a react element i.e. Pagination component.
const CarouselPagination = () => {
return(
<Pagination
/>
)
}Now we will set the prop “dotsLength” and this will be set to “userData.length” since userData is the piece of state we are using to contain the response data that we want to show on the carousel.
const CarouselPagination = () => {
return(
<Pagination
dotsLength={userData.length}
/>
)
}We will also need to set the prop “activeDotIndex” and interestingly we will need to create another piece of state to store this value and will involve making a change to the Carousel component.
So navigate to the part of the component where the state is located and paste the below.
const [activeIndex, setActiveIndex] = useState(0);We will use the state “activeIndex” to be the value set in the “activeDotIndex” so set the prop of Pagination equal to “activeIndex”.
const CarouselPagination = () => {
return(
<Pagination
dotsLength={userData.length}
activeDotIndex={activeIndex}
/>
)
}We now need to set the prop named “onSnapToItem” on the Carousel component that is a callback which is ran after you “snap” or “swipe” to an item and has one argument returned which is the current slideIndex so inside of this prop we need to set the “activeIndex” state equal to the current slideIndex like below.
<Carousel
data={userData}
sliderWidth={380}
itemWidth={380}
layout={'default'}
renderItem={renderUserItem}
onSnapToItem={(slideIndex) => setActiveIndex(slideIndex)}
/>If you run the project now you may notice some strange UI issues with the pagination appearing to the right of the carousel. This is my bad! I hadn’t thought about that from the previous tutorial. So we will just make some minor adjustments to make the UI look nicer.
We will change our outer View of CarouselContainer without the flexDirection to be like so.
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop:100 }}>We will also create a View container for the Carousel component and the View will have a flex value of 2 as we want it take up 2/3 of the container.
<View style={{ flex: 2 }}>
<Carousel
data={userData}
sliderWidth={380}
itemWidth={380}
layout={'default'}
renderItem={renderUserItem}
onSnapToItem={(slideIndex) => setActiveIndex(slideIndex)}
/>We will also create a View container for the Pagination component that will have flex value of 1.
<View style={{ flex: 1 }}>
{CarouselPagination()}
</View>Which will be directly underneath the View container of the Carousel so now our full Carousel container should look like the below.
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop:100 }}>
<View style={{ flex: 2 }}>
<Carousel
data={userData}
sliderWidth={380}
itemWidth={380}
layout={'default'}
renderItem={renderUserItem}
onSnapToItem={(slideIndex) => setActiveIndex(slideIndex)}
/>
</View>
<View style={{ flex: 1 }}>
{CarouselPagination()}
</View>
</View > 
So as you can see there is a pagination component showing underneath the Carousel component and the active index will change whenever we swipe/snap on an item thus changing dot that is highlighted and its styling.
To be a bit more funky lets add a few more styles, I will set the inactiveDotOpacity to 0.5 and also set the dotStyle prop to have a background of red, height and width of 20 and borderRadius to 10.
If you leave out the borderRadius then the pagination will show as squares!
inactiveDotOpacity={0.4}
dotStyle={{
backgroundColor: 'red',
height:20,
width:20,
borderRadius:10
}}Resulting in the below.
I hope you found both tutorials interesting to read and you learned something, let me know how I can improve my article writing in the responses and don’t forget to follow me and clap the article.
