Image Carousel using React Native Expo for Android and IOS App Development

Tinder Like Image Carousel in React Native Expo

Image Carousel: React Native Expo

Project set-up

  • To start an expo app you need to run a command in your terminal or command prompt window. The command is expo init AppName
  • Choose the blank javascript canvas and download the required dependencies.
  • Navigate to the “AppName” directory
  • Install the following npm package.
npm install react-native-snap-carousel
  • Run the Application using the command: npm start

Code of Image Carousel in React Native Expo

As well all know that in react native we have function-based components and class-based components. We are going with a class-based component in this project.

import React, { Component } from 'react';
import {
SafeAreaView,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
} from 'react-native';
import Carousel from 'react-native-snap-carousel';
export default class App extends Component {
state = {
showCarousel: false,
layoutType: 'tinder',
imageSearchTerms: [
'Books',
'Code',
'Nature',
'dogs',
]
}
toggleCarousel = () => {
this.setState({
showCarousel: !this.state.showCarousel
});
}
renderControls = () => {
return(
<View style={styles.container}>

<TouchableOpacity
onPress={this.toggleCarousel}
style={styles.openButton}
>
<Text style={styles.openButtonText}>Open Carousel</Text>
</TouchableOpacity>
</View>
)
}
renderCarousel = () => {
return(
<View style={styles.carouselContainer}>
<View style={styles.closeButtonContainer}>
<TouchableOpacity
onPress={this.toggleCarousel}
style={styles.button}
>
<Text style={styles.label}>x</Text>
</TouchableOpacity>
</View>
<Carousel
layout={this.state.layoutType}
data={this.state.imageSearchTerms}
renderItem={this.renderItem}
sliderWidth={350}
itemWidth={350}
>
</Carousel>
</View>
);
}
renderItem = ({item}) => {
return (
<View style={styles.slide}>
<Image
style={styles.image}
source={{ uri: `https://source.unsplash.com/350x350/?${item}`}}
/>
<Text style={styles.label}>{item}</Text>
</View>
);
}
render() {
return (
<SafeAreaView style={styles.container}>
{this.state.showCarousel ?
this.renderCarousel() :
this.renderControls()
}
</SafeAreaView>
);
}
}
  • First, Import all the required packages
  • Define states. Set the layout type as tinder, because we want a tinder-like carousel image. You can change it to stack or default type also.
  • Define an arrow function for the toggle carousel.
  • Define a render control arrow function. You can define a normal button here too. It will work fine. Basically, this function renders the landing page of our app with a text button.
  • Next, define a render carousel arrow function. In this function, we first added a cross button on the top right corner of the image carousel screen. After that, add the carousel component. In the data section, we fetch it from Unsplash, as it has royalty-free images. We already defined the image search terms in the states (step 2).
  • Render the image with some styling.
  • At last, with the help of the if-else case, display the render carousel screen or else render control screen.
Image carousel using react native

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store