More Premium Hugo Themes Premium React Themes

React Native Image Slider Box

A simple and fully customizable React Native component that implements an Image Slider UI.

React Native Image Slider Box

A simple and fully customizable React Native component that implements an Image Slider UI.

Author Avatar Theme by intellidev1991
Github Stars Github Stars: 311
Last Commit Last Commit: Feb 14, 2025 -
First Commit Created: Feb 24, 2024 -
React Native Image Slider Box screenshot

Overview

The react-native-image-slider-box npm package is a versatile image slider library for React Native applications. It offers customizable features such as different image components, image paths or URLs, callback functions for user interaction, and styling options for developers to create engaging image sliders in their apps.

Features

  • ImageComponent: Customize the image component, default is React Native Image.
  • images: Array of image paths or URLs as strings for slider content.
  • onCurrentImagePressed: Callback function for when an image is pressed.
  • currentImageEmitter: Callback function for getting the current image index.
  • disableOnPress: Option to disable the image press functionality.
  • activeOpacity: Control the opacity when the touch is active on images.
  • sliderBoxHeight: Set the height of the image slider box.
  • parentWidth: Adjust the width of the parent container for responsive design.
  • dotColor: Change the color of the paging dot in the slider.

Installation

To start using the react-native-image-slider-box library, you can follow these steps:

  1. Install the library using npm:
    npm i react-native-image-slider-box
    
  2. If you want to use a third-party image library like FastImage, you can install it as well:
    npm i react-native-fast-image
    

Summary

The react-native-image-slider-box npm package provides an easy-to-use solution for integrating image sliders in React Native applications. With features like customizable image components, image content configuration, and callback functions for enhanced user interactions, developers can create dynamic image sliders with ease. By following the installation guide and exploring the available props for customization, developers can leverage this library to enhance their app’s visuals and user experience.