react-native-image-swiper

A Simple Images Slider using react-native-swiper

Getting Started

1. init your app

  $ react-native init ImagesSwiperApp

2. npm install in root

  $ cd ImagesSwiperApp
  $ npm install --save react-native-image-swiper

3. import ImagesSwiper

  $ import ImagesSwiper from "react-native-image-swiper";

Usage

import ImagesSwiper from "react-native-image-swiper";

const customImg = [
  "https://firebasestorage.googleapis.com/v0/b/lotapp-9e84d.appspot.com/o/aster.jpg?alt=media&token=166e66b0-9c8e-4803-918e-25762c58dbda",
  "https://firebasestorage.googleapis.com/v0/b/lotapp-9e84d.appspot.com/o/fan.jpg?alt=media&token=b419d507-9de8-4c4c-97e3-6b4eb2202e68",
  "https://firebasestorage.googleapis.com/v0/b/lotapp-9e84d.appspot.com/o/stone.jpg?alt=media&token=e9d41537-7f26-4bfd-86eb-c2ef6fc58a9c"
];

class ImagesSwiperApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView style={{flex: 1}}>
          <Text style={styles.welcome}>Default</Text>
          <ImagesSwiper />
          <Text style={styles.welcome}>Custom Images and Styles</Text>
          <ImagesSwiper 
            images={customImg}
            autoplay={true} 
            autoplayTimeout={1.5}
            showsPagination={false}
            width={width} 
            height={height - 400} 
          />
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 30,
    marginBottom: 10,
  },
});

Properties

|Prop|Type|Description|Default|Required| |----|----|-----------|-------|--------| |images|array of objects|Data to be rendered in the slider|3 example images in array|Optional (Recommend that you add it yourself)| |autoplay|Boolean|Set to true enable auto play mode|false (autoplay has currently error on Android's Dev mode)|Optional| |autoplayTimeout|number|Delay between auto play transitions (in second).|1.5|Optional| |showsPagination|Boolean|Set to true make pagination visible|false|Optional| |width|number|width of image|400|Optional| |height|number|height of image|400|Optional|