Binoy Patel

In this tutorial we will be building a simple carousel. As a change we will be using snack to build this instead of setting a new react native project. Below is the final version of the application we will be building.

Scan in the Expo App

You can scan the QR code in the expo app to open this app in your phone or alternatively you can open the link below in your browser and see the Android and iOS simulator online.

Simple Carousel _Try this project on your phone! Use Expo's online editor to make changes and save your own copy._snack.expo.io

Now that is out of the way, lets get to to building the carousel component. First lets take a look at the code below which builds the carousel component.

The carousel is nothing more than a ScrollView component. There are three props that make this happen:

Horizontal: As the name suggests, it makes it scroll horizontal instead of vertical.
pagingEnabled: This scroll is based on the size of the view inside. In our case, if we set the image width to the size of the view container, the scroll action will change to next image.
showsHorizontalScrollIndicator: Setting this to false, will hide the scroll bars.

Inside the ScrollView we are mapping over the images props providing and returning images.

{
  images.map((image) => <Image style={styles.image} source={image.source} />);
}

Finally we are wrapping it inside a View with a specific width and height, this is because when we are consuming this, we can place in a specific container instead of taking the whole page. Note: To make this more reusable, it will be useful to provide props to override the width and height of the view.

This concludes the tutorial on building a simple carousel. Comment and let me know if you would like to see more advance stuff such as setting a default index, infinite scrolling and anything else.

Simple Carousel in React Native