react-native-image-slider-show

    1.0.3 • Public • Published

    react-native-image-slider-show

    A quick and easy slideshow for react native. (Android & iOS)

    GIF GIF

    Installation

    npm install react-native-image-slider-show --save

    Usage

    import Slideshow from 'react-native-image-slider-show';
     
    // ...
     
    render() {
      return (
        <Slideshow 
          dataSource={[
            { url:'http://placeimg.com/640/480/any' },
            { url:'http://placeimg.com/640/480/any' },
            { url:'http://placeimg.com/640/480/any' }
        ]}/>
      );
    }

    Autoplay Example

    export default class SlideshowTest extends Component {
      constructor(props) {
        super(props);
     
        this.state = {
          position: 1,
          interval: null,
          dataSource: [
            {
              title: 'Title 1',
              caption: 'Caption 1',
              url: 'http://placeimg.com/640/480/any',
            }, {
              title: 'Title 2',
              caption: 'Caption 2',
              url: 'http://placeimg.com/640/480/any',
            }, {
              title: 'Title 3',
              caption: 'Caption 3',
              url: 'http://placeimg.com/640/480/any',
            },
          ],
        };
      }
     
      componentWillMount() {
        this.setState({
          interval: setInterval(() => {
            this.setState({
              position: this.state.position === this.state.dataSource.length ? 0 : this.state.position + 1
            });
          }, 2000)
        });
      }
     
      componentWillUnmount() {
        clearInterval(this.state.interval);
      }
     
      render() {
        return (
        <Slideshow 
            dataSource={this.state.dataSource}
            position={this.state.position}
            onPositionChanged={position => this.setState({ position })} />
        );
      }
    }

    Props

    Property Type isRequired? Default Description
    dataSource bool required - slideshow data
    height number optional 200 container height
    position number optional - set position slideshow
    scrollEnabled bool optional true enable / disable scrolling
    overlay bool optional false background overlay
    indicatorSize number optional 16 indicator size
    indicatorColor string optional #CCCCCC indicator color
    indicatorSelectedColor string optional #FFFFFF indicator selected color
    arrowSize number optional 16 arrow size
    arrowLeft object optional - component arrow left
    arrowRight object optional - component arrow right
    onPress func optional - returns an object image and index of image pressed
    onPositionChanged func optional - called when the current position is changed
    containerStyle object optional - custom styles for container
    titleStyle object - - custom styles for title
    captionStyle object - - custom styles for caption

    Data Structure

    // example data structure
     
    dataSource: [
      {
        title: 'title 1',
        caption: 'caption 1',
        url: 'url 1',
      }, {
        title: 'title 1',
        caption: 'caption 1',
        url: 'url 2',
      },
    ]
    Property Type Description
    title string title
    caption string caption
    url string / number image (URL or a local file resource)

    Credits

    react-native-image-slider

    License

    MIT

    Install

    npm i react-native-image-slider-show

    DownloadsWeekly Downloads

    763

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    14.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • kamal_pandey