rns
react-native-slideshow
npm i react-native-slideshow
rns

react-native-slideshow

A quick and easy slideshow for react native.

by M. Asrof Bayhaqqi

1.0.1 (see all)License:MITTypeScript:Not Found
npm i react-native-slideshow
Readme

react-native-slideshow

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

GIF GIF

Installation

npm install react-native-slideshow --save

Usage

import Slideshow from 'react-native-slideshow';

// ...

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

PropertyTypeisRequired?DefaultDescription
dataSourceboolrequired-slideshow data
heightnumberoptional200container height
positionnumberoptional-set position slideshow
scrollEnabledbooloptionaltrueenable / disable scrolling
overlaybooloptionalfalsebackground overlay
indicatorSizenumberoptional16indicator size
indicatorColorstringoptional#CCCCCCindicator color
indicatorSelectedColorstringoptional#FFFFFFindicator selected color
arrowSizenumberoptional16arrow size
arrowLeftobjectoptional-component arrow left
arrowRightobjectoptional-component arrow right
onPressfuncoptional-returns an object image and index of image pressed
onPositionChangedfuncoptional-called when the current position is changed
containerStyleobjectoptional-custom styles for container

Data Structure

// example data structure

dataSource: [
  {
    title: 'title 1',
    caption: 'caption 1',
    url: 'url 1',
  }, {
    title: 'title 1',
    caption: 'caption 1',
    url: 'url 2',
  },
]
PropertyTypeDescription
titlestringtitle
captionstringcaption
urlstring / numberimage (URL or a local file resource)

Credits

react-native-image-slider

License

MIT