https://github.com/logisticinfotech/react-native-custom-swiper

React Native Custom Swiper
https://github.com/logisticinfotech/react-native-custom-swiper

android custom-swiper library logistic-infotech mobile-application react-native react-native-app react-native-swiper swiper

Last synced: 6 days ago
JSON representation

React Native Custom Swiper

• Host: GitHub
• URL: https://github.com/logisticinfotech/react-native-custom-swiper
• Owner: logisticinfotech
• License: mit
• Created: 2018-11-28T13:23:38.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-01-11T05:19:45.000Z (over 4 years ago)
• Last Synced: 2024-09-19T14:41:39.872Z (14 days ago)
• Topics: android, custom-swiper, library, logistic-infotech, mobile-application, react-native, react-native-app, react-native-swiper, swiper
• Language: JavaScript
• Homepage: https://www.logisticinfotech.com/blog/custom-swiper-react-native-flatlist/
• Size: 15.6 MB
• Stars: 13
• Watchers: 5
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  

  



### React Native custom swiper using Flatlist

Use images or custom views for swiping, Please refer [this blog](https://www.logisticinfotech.com/blog/custom-swiper-react-native-flatlist/) to use this library.

# Installation

```

npm i react-native-custom-swiper

```

![](RNCustomSwiper.gif)

### Properties

#### Basic

| Prop               |                          Default                          |    Type    | Description                                     |

| :----------------- | :-------------------------------------------------------: | :--------: | :---------------------------------------------- |

| swipeData          |                            []                             |  `array`   | Array of data which user want to show in swiper |

| renderSwipeItem    |                          ()=>{}                           | `function` | Create element of swiper                        |

| currentSelectIndex |                             0                             |  `number`  | Index of initial screen.                        |

| showSwipeBtn       |                           true                            |   `bool`   | For hide or show left/right button              |

| style              |                       Default style                       |  `object`  | Change swiper style                             |

| onScreenChange     |                       (index) => {}                       |   `func`   | Function call when screen changed               |

| leftButtonImage    |  Default left Arrow source {required("leftArrowString")}  |  `string`  | Modify left arrow image                         |

| rightButtonImage   | Default right Arrow source {required("rightArrowString")} |  `string`  | Modify right arrow image                        |

| containerWidth     |                       Screen width                        |  `number`  | Customize swiper screen width                   |

| backgroundColor    |                          "white"                          |  `string`  | Customize swiper background color               |

| autoplay           |                           true                            |   `bool`   | Change slide index automatically                |

| autoplayTimeout    |                           2500                            |  `number`  | Delay between every slide (in Second)           |