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

Most of the social media, as well as e-commerce applications, have the Image Carousel feature, right? But as a developer, let’s see how to add an image carousel feature in our react native application.

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

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

We are done with the project setup. Let’s jump on to the code part.

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.

I am providing you code first, then I will explain it later.

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.

BINGO. Now run this project. Open your terminal window or command prompt window in the parent directory and run the command: npm start

Scan the QR code with your expo app. You will see something like this on your device screen.

Image carousel using react native

You can toggle the image. It works pretty awesomely. In the above code, the styling part is missing. You can style it in your own way. If you want to access my source code then my Github Source Code of this project is here.

That’s it.

Thank you for reading. If this article is informative then make sure to follow and share it with your community and follow for more.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)