Simple Carousel/Slider in React Native

A simple guide to build a custom carousel /slider using React native.

To get started make sure you have node and npm installed. To check if node and npm are installed check using the below command in your terminal.

node -v
npm -v

You should get a result something like this.

If node is not installed kindly follow the link to get node and npm installed https://nodejs.org/en/download/ or install using nvm(node version manager).

Once you make sure everything is installed let us start with React Native. Run the following command in your terminal to start a demo project.

npx react-native init carousal

The above command will initialize all the dependencies of Android and iOS. To get started to change your directory to App.js file. Currently, your App.js file will look something like this.

Since we are making the carousel without using any package. Please follow along. Add the following lines to your app.js

// inside lass
this.state = {
data: '',
};
}
keyExtractor = (item, index) => index.toString();
renderCarousel = ({item}) => (
<Card style={styles.cardContainerStyle}>
<TouchableWithoutFeedback
onPress={() => {
this.setState({
data: item.title,
});
this.props.onCarouselPress;
}}>
<ImageBackground
source={{uri: item.src}}
style={styles.imageBackgroundStyle}>
<View style={styles.titleView}>
<Title style={styles.titleStyle}>{item.title}</Title>
</View>
</ImageBackground>
</TouchableWithoutFeedback>
</Card>
);
// inside render
<View style={styles.mainContainer}>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
keyExtractor={this.keyExtractor}
data={eventslist}
renderItem={this.renderCarousel}
/>
</View>

At this point of time, your App.js file should look something like this.

For reusability, I have created a different component for Title and Card.

//Card.js
import React from 'react';
import {View} from 'react-native';
const Card = props => (
<View style={[styles.containerStyle, props.style]}>{props.children}</View>
);
const styles = {
containerStyle: {
borderWidth: 0.5,
borderRadius: 5,
borderColor: '#ddd',
marginTop: 10,
},
};
export {Card};
// Title.js
import React from 'react';
import {Text, Platform} from 'react-native';
const Title = props => (
<Text style={[styles.titleStyle, props.style]}>{props.children}</Text>
);
const styles = {
titleStyle: {
...Platform.select({
android: {
fontFamily: 'CoreRhino65Bold',
},
ios: {
fontFamily: 'Core Rhino 65 Bold',
},
}),
fontSize: 25,
color: '#000',
textAlign: 'center',
},
};
export {Title};

Let us have some dummy data so that we can see if the carousel/slider is working.

//Dummy data
const eventslist = [
{
src:
'https://image.freepik.com/free-photo/fried-eggs-drinks-breakfast_23-2147758279.jpg',
title: 'Breakfast',
},
{
src:
'https://image.freepik.com/free-photo/indian-masala-egg-omelet_136595-191.jpg',
title: 'Brunch',
},
{
src:
'https://image.freepik.com/free-photo/north-indian-thali-tipical-meal-served-stainless-steel-plate-blue-table_107467-1331.jpg',
title: 'Lunch',
},
{
src:
'https://image.freepik.com/free-photo/club-sandwich-with-ham-lettuce-tomato-cheese-fries-wooden-board_140725-196.jpg',
title: 'Snacks',
},
{
src:
'https://image.freepik.com/free-photo/national-uzbek-pilaf-with-meat-cast-iron-skillet-wooden-table_127425-8.jpg',
title: 'Dinner',
},
];

This is what we have till now in our App.

So, finally here is the working carousel/slider.

For more detail please refer to the snack https://snack.expo.io/@pratap2210/frisky-waffles

You may also like my other articles:

1. Console.log and other console methods to debug your code in JavaScript
2. Things to keep in mind before starting a Javascript framework
3. var, let, and const — Why to avoid var 😷 and how to put the other two to good use? — Javascript

If you liked the article, feel free to share it to help others find it!

System Design Series

1. Why is System Design Important?
2. Architecture and Design Principle for Online Food Delivery System
3. Building Real-time Applications with Redis Pub/Sub
4. Understanding Proxies: The Differences Between Forward and Reverse Proxies
5. Eventual Consistency vs Strong Consistency: Distributed Systems

You may also follow me on LinkedIn and Twitter.

💌 If you’d like to receive more tutorials in your inbox, you can sign up for the newsletter here.