A customizable React Native component that implements an Image Slider UI

by React Native Example

react-native-image-slider-box

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

Install

  1. First, install our library | use below npm script

    npm i react-native-image-slider-box

    yarn add react-native-image-slider-box

  2. (Optional) : if you want to use third-party image library such as FastImage

    npm i react-native-fast-image

    yarn add react-native-fast-image

Well-done.

Usage :

list of available props for customization SliderBox:

Props Value Type Description
ImageComponent Image component, default as Image default value is React-native Image, if you use third-party library like FastImage use this property
images Array of image path(or url) as string Set array of images path- these paths can contain http url link or local images path using require('./pathOfImage')
onCurrentImagePressed handler function callback callback for get pressed image index (index start from 0)
currentImageEmitter handler function callback callback for get current image index (index start from 0)
disableOnPress boolean if present, then onCurrentImagePressed will be disabled
activeOpacity number default value = 0.85, Determines the opacity when touch is active. The value should be between 0 and 1
sliderBoxHeight int value default value = 200, you can change height of image slider box
parentWidth int default = screen.width ; in advance mode, if parent is smaller, you can change it. best practice is use onLayout handler in parent component or screen.
dotColor color string code change color of paging dot
inactiveDotColor color string code change color of inactive paging dot
dotStyle style object default style is : {width: 10,height: 10,borderRadius: 5,marginHorizontal: 0,padding: 0,margin: 0,} change style of paging dots if you want
paginationBoxVerticalPadding int value default = 10 ; change the height of paging dots from bottom of Slider-Box
autoplay bool value default = false
circleLoop boolean - attribute if set, when user swiped to last image circularly return to the first image again.
paginationBoxStyle object,default values use lib style customize pagination box
dotStyle object,default use lib style customize dot styles
resizeMethod string default is resize
resizeMode string default is cover
ImageComponentStyle object {} style object for ImageComponent
imageLoadingColor string default is #E91E63 , image loading indicator color
ImageLoader React component, default as ActivityIndicator default value is React-native ActivityIndicator. 
   |

| firstItem | number | default is 0 , index of image to display when slider box loads |

1- add below import in your code :

import { SliderBox } from "react-native-image-slider-box";

2- Define your image array source, for below examples i create array in state.

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        "https://source.unsplash.com/1024x768/?nature",
        "https://source.unsplash.com/1024x768/?water",
        "https://source.unsplash.com/1024x768/?girl",
        "https://source.unsplash.com/1024x768/?tree", // Network image
        require('./assets/images/girl.jpg'),          // Local image
      ]
    };
  }
  // other component code ...
}

3- Use SliderBox such as these below examples :

Example 1 : SliderBox without and handler or customization

<SliderBox images={this.state.images} />

Example 2 : SliderBox with image press handler and currentImageEmitter

<SliderBox
  images={this.state.images}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  currentImageEmitter={index => console.warn(`current pos is: ${index}`)}
/>

Example 3 : SliderBox with image press handler and change slider height (default is 200)

<SliderBox
  images={this.state.images}
  sliderBoxHeight={400}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
/>

Example 4 : SliderBox with custom width from parent. use onLayout function by calling it from root View of component.

onLayout = e => {
  this.setState({
    width: e.nativeEvent.layout.width
  });
};

render() {
    return (
        <View style={styles.container} onLayout={this.onLayout}>
            <SliderBox
                images={this.state.images}
                sliderBoxHeight={200}
                onCurrentImagePressed={index =>
                    console.warn(`image ${index} pressed`)
                }
                parentWidth={this.state.width}
            />
        </View>
    );
  }

Example 5 : SliderBox with custom dots color

<SliderBox
  images={this.state.images}
  sliderBoxHeight={200}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  dotColor="#FFEE58"
  inactiveDotColor="#90A4AE"
/>

Example 6 : SliderBox with custom dot style

<SliderBox
  images={this.state.images}
  sliderBoxHeight={200}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  dotColor="#FFEE58"
  inactiveDotColor="#90A4AE"
  dotStyle={{
    width: 15,
    height: 15,
    borderRadius: 15,
    marginHorizontal: 10,
    padding: 0,
    margin: 0
  }}
/>

Example 7 : SliderBox with change paging box padding (Vertical height from bottom of SliderBox) + add autoplay and circleLoop attribute for jump to the first image after swipe the last one.

<SliderBox
  images={this.state.images}
  sliderBoxHeight={200}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  dotColor="#FFEE58"
  inactiveDotColor="#90A4AE"
  paginationBoxVerticalPadding={20}
  autoplay
  circleLoop
/>

Example 8 : use Custom Image Component, customize pagination, image modes and dotStyles:

<SliderBox
  ImageComponent={FastImage}
  images={this.state.images}
  sliderBoxHeight={200}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  dotColor="#FFEE58"
  inactiveDotColor="#90A4AE"
  paginationBoxVerticalPadding={20}
  autoplay
  circleLoop
  resizeMethod={'resize'}
  resizeMode={'cover'}
  paginationBoxStyle={{
    position: "absolute",
    bottom: 0,
    padding: 0,
    alignItems: "center",
    alignSelf: "center",
    justifyContent: "center",
    paddingVertical: 10
  }}
  dotStyle={{
    width: 10,
    height: 10,
    borderRadius: 5,
    marginHorizontal: 0,
    padding: 0,
    margin: 0,
    backgroundColor: "rgba(128, 128, 128, 0.92)"
  }}
  ImageComponentStyle={{borderRadius: 15, width: '97%', marginTop: 5}}
  imageLoadingColor="#2196F3"
/>

Example 9 : SliderBox with activeOpacity:

<SliderBox
  images={this.state.images}
  sliderBoxHeight={200}
  activeOpacity={0.5}
/>

Full-Component(Screen) Example:

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

import { SliderBox } from "react-native-image-slider-box";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        "https://source.unsplash.com/1024x768/?nature",
        "https://source.unsplash.com/1024x768/?water",
        "https://source.unsplash.com/1024x768/?girl",
        "https://source.unsplash.com/1024x768/?tree",
        require('./assets/images/girl.jpg'),
      ]
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <SliderBox
          images={this.state.images}
          onCurrentImagePressed={index =>
            console.warn(`image ${index} pressed`)
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Contribute

Note: Please Use example folder to run sample. The sample used components/SliderBox.js file to run. Please after editing this file copy changes to root dist/ folder too. The npm used dist/ folder. Thanks guys.

License MIT

GitHub

https://github.com/intellidev1991/react-native-image-slider-box