react-native-image-swiper
Fully customizable & extremely easy to use Image Swiper for React Native
MIT License
Downloads
27
Stars
14
Ecosystems:
React,
React Native
Take a look at RN Image Gallery for ready to use Image Swiper
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
-
LICENSE -
initialPageFeature - 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.
Package Rankings
Top 10.78% on Npmjs.org
Badges
Extracted from project README
