Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-image-slider-box

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-image-slider-box

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

  • 1.0.12
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3.3K
decreased by-8.24%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-image-slider-box

npm npm

Announce: New version published.


SliderBox

SliderBox

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:

PropsValue TypeDescription
ImageComponentImage component, default as Imagedefault value is React-native Image, if you use third-party library like FastImage use this property
imagesArray of image path(or url) as stringSet array of images path- these paths can contain http url link or local images path using require('./pathOfImage')
onCurrentImagePressedhandler function callbackcallback for get pressed image index (index start from 0)
currentImageEmitterhandler function callbackcallback for get current image index (index start from 0)
disableOnPressbooleanif present, then onCurrentImagePressed will be disabled
sliderBoxHeightint valuedefault value = 200, you can change height of image slider box
parentWidthintdefault = screen.width ; in advance mode, if parent is smaller, you can change it. best practice is use onLayout handler in parent component or screen.
dotColorcolor string codechange color of paging dot
inactiveDotColorcolor string codechange color of inactive paging dot
dotStylestyle objectdefault style is : {width: 10,height: 10,borderRadius: 5,marginHorizontal: 0,padding: 0,margin: 0,} change style of paging dots if you want
paginationBoxVerticalPaddingint valuedefault = 10 ; change the height of paging dots from bottom of Slider-Box
autoplaybool valuedefault = false
circleLoopboolean - attributeif set, when user swiped to last image circularly return to the first image again.
paginationBoxStyleobject,default values use lib stylecustomize pagination box
dotStyleobject,default use lib stylecustomize dot styles
resizeMethodstringdefault is resize
resizeModestringdefault is cover
ImageComponentStyleobject{} style object for ImageComponent
imageLoadingColorstringdefault is #E91E63 , image loading indicator color

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

<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

<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

<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

<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

<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

<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"
/>

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

Please subscribe and contribute with me to develop this lib


Notice:

This library use react-native-snap-carousel and make easier way to create image slider box with full customization ability.

See original Library https://github.com/archriss/react-native-snap-carousel

we dont edit or modify original library, we just use it with some additional style. (BSD 3 License)

Keywords

FAQs

Package last updated on 23 Jan 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc