If you are building an app and want to render multiple contents in a single space, you have to build a carousel interface in your app. React Native, as a cross-platform app development can be used to build such an interface. Here, in this blog, I will explain to you how with real code snippets. Let us learn more about carousels.

Define carousels

Carousels are defined as sliders. Users can slide through the carousel to see all the contents added to it. You can refer to the content presented in the carousel as the one you do in the PPT presentation. Thus carousels can also be referred to as slideshows. For a robust carousel interface, you, as a developer, need to focus on its structure, animations, styling, and functionality. Most importantly, how you design a carousel decides the UX of your app. You can embed different styling such as you can design a carousel that will show the content horizontally, vertically, or in a circular motion. Also, you can make the content slide through automatically such that users don’t need to click any button or scroll either to get the elements (image, text or any other content). However, I will suggest you not design an automatic carousel as it will affect the user experience of your app. Let’s now understand what you need to learn before starting with the project.

Prerequisite parameters

The first parameter is to set up the environment needed to work with the React Native framework. Every developer of react native development company initiates their journey with  this step. For this, you have to install Node.js, Android studio, and Visual Code Editor. Note that we will be using React Native CLI. so, you have to install the software accordingly. Also, you need to create a template. In this template, you will add the codebase in the folder named App.js. Let’s see how you can create the React Native template for this project. 

• Build a folder with any name you prefer. I have given it a ‘React-Native-Project’.
• Open the folder and then open the command prompt from the same folder.
• Pass npx react-native init Carousel –version 0.68.1. You will need the React Native 0.68.1 version. So, I have mentioned the version in the command.
• As you run this command, the template will be created. If you open the carousel template from your local drive, you will see all the files of React Native have been automatically built.

Now, go to the code editor you have installed during the React Native setup and start designing the codebase.

The code syntax for the Carousel interface

Open the App.js folder and delete all the codebases present in it. Now import the React Native components. Consider image 1.

Image 1 Here, you will require StyleSheet, View, Text, Dimensions, Image, and ScrollView. ScrollView is the most important component required for this carousel interface. Move forward with the main function App. Consider image 2.

Image 2 The code uses the useState hook to set the state of the variable imgActive. setImageActive is for updating the change in the state of imgActive. Its initial value is 0. Dimensions are also used to fit the elements (image) to the width and height of the device. This component makes your app responsive. Further, for my project, I have added three images that can be scrollable in the carousel. If you want, you can add more than three images. However, for this, you have to add the source of the image, i.e., their URL. Now, we will use different props. Consider image 3.

Image 3 Here, the prop onchange (considered as a function in the codebase) takes an argument nativeEvent. It checks whether the nativeEvent exists or not. then it calculates the number of slides. It is executed by dividing the contentOffset.x by layoutMeasurement.width, layoutMeasurement.width is the width of a single image considered in pixels. It also checks whether the slide count is equal to imgActive or not. If not, it executes the command setImageActive(slide). Now, return the View component with the Scrollview embedded in it. Consider image 4.

Image 4 The syntax shown in image 4 creates a component that allows the user to scroll horizontally and present the images on the app screen. It has different properties. Horizontal allows you to scroll images horizontally. The default scroll is vertical scrolling. With showsHorizontalScrollIndicator={false}, the code hides the horizontal scrolling bar at the bottom of the app screen. The property of pegaeEnabled allows you to move the view from one page to another. Consider image 5 for the image mapping method.

Image 5 The syntax shown in the code snippet considers an array.  It is used to loop through an array and return certain elements for each item in the initial array. In the current scenario, it is returning an image view. Here, ind is the item’s index in the array. It initiates at 0 and goes up by 1 for each item in the array. Consider image 6 for the Scrollview of the image.

Image 6 The syntax renders the images in a scroll view. It also presents the dots below the scroll view to indicate which image is presently active. The key={ind} is an identifier for a text element. It is needed by React to keep track of the elements. With style={imgActive == ind ? styles.dotActive : styles.dot}the code sets the style of the text component to either dotActive or dot based on whether imgActive is equal to ind. Now, you need to export the App. Consider image 7.

Image 7 For designing the interface further,  consider the syntax in image 8.

Image 8 For this, start with StyleSheet and consider all the styling objects (Container, wrapDot, dotActive, and dot).

Testing the project on a virtual device

You need to test the app and check whether there is any error or is running successfully. So, for this, go to a new terminal and run npm install. Then you have to pass another command npx react-native run-android. This will activate your emulator or virtual device. For the output of my project, consider the images added in the following table.

Image 1	Image 2	Image 3

Depending on the elements (text, video, graphics, and others), the number of slides will be created in the carousel. Here, as you can notice from the dots placed in the footer of the screen, I have added three images in total. So, practice the code and build your unique carousel interface.