How to Implement an Image Slider in React Native?

Displaying images in an organized and attractive manner is essential for user engagement while developing a mobile app. However, an image slider is one of the most common ways of presenting images on websites as well as a mobile application.

If you’re building a React Native app and want to add an image slider to your interface, this guide will walk you through how to implement it with ease.

What is an Image Slider, and Why is it Important? 

An image slider is a user interface component that displays multiple images horizontally or vertically, often with controls to navigate between them. This allows users to swipe through or click through different images in a slideshow format.

• Image sliders allow easy navigation through image galleries, improving user experience.
• React Native makes it easy to implement dynamic and responsive image sliders that adapt to various content sources like static images, API data, etc.
• These image sliders are highly customizable; as a result, you can change the appearance of your image slider to match your store’s theme.

Steps to Implement the Image Slider

To begin with the implementation of the image slider, we need to first install the required packages:

Install the package using npm or yarn:

Using npm:

npm install react-native-snap-carousel

Using yarn:

yarn add react-native-snap-carousel

If you’re using Typescript you should also install type definitions:

npm install  @types/react-native-snap-carousel

-ios SetUp

1. Reinstall pod with cd ios && pod install && cd ..

Example :

import React, { useRef, useState } from "react";
import { View, Dimensions, Image, StyleSheet } from "react-native";
import Carousel from "react-native-snap-carousel";

const { width } = Dimensions.get("window");

const imagesData = [
{ 	
id: "1",
url:"https://i0.wp.com/everyday.codes/wp-content/uploads/2019/06/react-native-1     024x631.png" 
},
  		{ 
id: "2", 
url:"https://i0.wp.com/everyday.codes/wp-content/uploads/2019/06/react-native-1 024x631.png"
 },
{ 
id: "3",
url:"https://i0.wp.com/everyday.codes/wp-content/uploads/2019/06/react-native-1         024x631.png
 },
];

const ImageSlider = () => {
  const carouselRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);

  const renderItem = ({ item }: any) => (
    <Image source={{ uri: item.url }} style={styles.image} />
  );

  return (
    <View style={styles.container}>
      <Carousel
        ref={carouselRef}
        data={imagesData}
        renderItem={renderItem}
        sliderWidth={width}
        itemWidth={width * 0.9}
        loop
        autoplay
        autoplayInterval={3000}
        onSnapToItem={(index) => setActiveIndex(index)}
      />
<Pagination
        dotsLength={imagesData.length}
        activeDotIndex={activeIndex}
        containerStyle={styles.paginationContainer}
        dotStyle={styles.activeDot}
        inactiveDotStyle={styles.inactiveDot}
      />

    </View>
  );
};

const styles = StyleSheet.create({
  container: { 
            		flex: 1,
                    	justifyContent: "center"
                    },
  image: { 
     	            width: "100%",
     		 height: 200,
 borderRadius: 10 
},
paginationContainer: { 
 			marginTop: 10
                               },
    activeDot: {
 width: 10,
 height: 10,
 borderRadius: 5,
 backgroundColor: "black" 
},
  inactiveDot: {
 width: 8,
 height: 8,
 borderRadius: 4,
 backgroundColor: "gray"
},

});

export default ImageSlider;

Conclusion

In this tutorial, we covered how to implement a basic image slider in React Native using the react-native-snap-carousel package. With just a few lines of code, you can create a smooth and interactive image slider for your React Native app. 

Experiment with additional customization options to make the slider truly unique and enhance your app’s user experience.

Feel free to explore more advanced features like autoplay, infinite scroll, and custom pagination to further enhance your slider. For more guidance, contact us or drop a comment below.