Fully customizable & extremely easy to use Image Swiper for React Native
MIT License
Add the dependency:
npm i @freakycoder/react-native-image-swiper
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
import ImageSwiper from "@freakycoder/react-native-image-swiper";
<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",
},
]}
/>
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 |
initialPage
FeatureFreakyCoder, [email protected]
React Native Image Swiper is available under the MIT license. See the LICENSE file for more info.