Installation

Add the dependency:

npm i @freakycoder/react-native-image-swiper

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",

Usage

Import

import ImageSwiper from "@freakycoder/react-native-image-swiper";

Basic Usage

<ImageSwiper
  imageHeight={700}
  onSwipeTop={() => alert("onSwipeTop")}
  onSwipeBottom={() => alert("onSwipeBottom")}
  images={[
    {
      uri:
        "https://images.unsplash.com/photo-1544550581-5f7ceaf7f992?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=958&q=80",
    },
    {
      uri:
        "https://images.unsplash.com/photo-1555149385-c50f336e28b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",
    },
    {
      uri:
        "https://images.unsplash.com/photo-1532517891316-72a08e5c03a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80",
    },
  ]}
/>

Configuration - Props

| Property | Type | Default | Description | | -------------- | :-------: | :----------: | -------------------------------------------------------------------------------------------------------- | | images | array | undefined | the main data of image swiper | | ImageComponent | component | Image | set your own Image component such as FastImage | | onPageSelected | Function | undefined | handle the selected page with this function | | imageHeight | number | ScreenHeight | change the image height | | imageWidth | number | ScreenWidth | image width is changable but not recommended! You will broke the image swiper's horizontal swipe feature | | onSwipeTop | Function | undefined | handle when the user swipe top on the image | | onSwipeBottom | Function | undefined | handle when the user swipe bottom on the image |

Future Plans

• [x] ~~LICENSE~~
• [ ] initialPage Feature
• [ ] Vertical Image Swiper Feature (Like Tiktok)
• [ ] Write an article about the lib on Medium

Author

FreakyCoder, [email protected]

License

React Native Image Swiper is available under the MIT license. See the LICENSE file for more info.