0.1.3 • Published 4 years ago
@freakycoder/react-native-image-swiper v0.1.3
Installation
Add the dependency:
npm i @freakycoder/react-native-image-swiperPeer 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
LICENSEinitialPageFeature- Vertical Image Swiper Feature (Like Tiktok)
- Write an article about the lib on Medium
Author
FreakyCoder, kurayogun@gmail.com
License
React Native Image Swiper is available under the MIT license. See the LICENSE file for more info.