https://github.com/weblineindia/react-native-custom-swiper
https://github.com/weblineindia/react-native-custom-swiper
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/weblineindia/react-native-custom-swiper
- Owner: weblineindia
- License: mit
- Created: 2023-11-27T09:39:27.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-22T07:28:25.000Z (over 1 year ago)
- Last Synced: 2025-01-06T02:26:51.416Z (9 months ago)
- Language: Java
- Size: 780 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-custom-swiper
## Getting Started
- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Properties](#properties)
- [Basic](#basic)
- [Examples](#examples)
- [Development](#development)
### Installation
```bash
$ npm install react-native-custom-swiper --save
```
```bash
$ yarn add react-native-custom-swiper
```
### Depedency Library
```bash
$ npm install react-native-gesture-handler --save
```
```bash
$ yarn add react-native-gesture-handler
```
Need to install depedency Library of `react-native-gesture-handler` to work with the Slider Component and make slider perform smoothly.
### Basic Usage
```jsx
import React, {useEffect} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import ReactNativeCustomSwiper from 'react-native-custom-swiper';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
const IntroScreen = () => {
const {sliderData, setSliderData} = useState(['Your Data']);
const _renderItem = (item: any, index: number) => (
// As per Your requirment.
);
const _renderPagination = (
currentIndex: number,
total: number,
changeSlide: (i: any) => {},
) => {
return (
{currentIndex + 1 < total && (
{'Skip swiper screens to end.'}}>
Skip Button
)}
{sliderData.length > 1 &&
sliderData?.map(
(_: any, i: React.Key | null | undefined) => (
changeSlide(i)}
/>
),
)}
{(currentIndex + 1 === total || total === 1) && (
{'End swiper screens navigate to Next Screen.'}}>
Navigate To Next Screen
)}
);
};
return (
<>
>
);
};
export default IntroScreen;
```
### Properties
#### Basic
| Prop | Default | Type | Description |
| :------------- | :-------------: | :------: | :---------------------------------------------------------------------------------------------------------- |
| data | required | `array` | Data to use in renderItem and show swiper screen. |
| showPagination | `true` | `bool` | Show pagination. |
| renderPagination | `null` | `node` | Customize your Pagination as per need. |
| customRenderItem | required | `func` | Add the custom `FlatListProps['renderItem']` to show the swiper screen as required. |
| loop | `false` | `bool` | Set to `true` to enable continuous loop mode. |
| autoSlideOnce | `false` | `bool` | Set to `true` to enable auto swiper for once. |
| autoSlideInterval | `2000` | `func` | Add the time in `mili second` to enable auto swiper as per mention time or default for every `2 second`. |
### Examples
```bash
$ cd examples
$ npm i
$ react-native run-ios
```
> Quick start with [examples](https://github.com/leecade/react-native-swiper/tree/master/examples/).
### Development
```bash
$ cd examples
$ yarn
$ yarn start
$ react-native run-ios
```
Then launch simulator to preview. Note that you just need to edit the source file `src/index.js`, the change will auto sync to examples.