https://github.com/k-h-rayhan/react-native-easy-swiper
React Native Easy Swiper is a library that enables easy implementation of swipeable views in React Native, with numerous customization options available.
https://github.com/k-h-rayhan/react-native-easy-swiper
react-native react-native-easy-swiper react-native-swiper swiper
Last synced: 7 months ago
JSON representation
React Native Easy Swiper is a library that enables easy implementation of swipeable views in React Native, with numerous customization options available.
- Host: GitHub
- URL: https://github.com/k-h-rayhan/react-native-easy-swiper
- Owner: K-H-Rayhan
- License: mit
- Created: 2023-04-13T09:44:55.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-14T13:33:51.000Z (over 2 years ago)
- Last Synced: 2025-03-15T00:52:07.654Z (7 months ago)
- Topics: react-native, react-native-easy-swiper, react-native-swiper, swiper
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-easy-swiper
- Size: 5.72 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Native Easy Swiper 🚀
React Native Easy Swiper - is a versatile library that simplifies the implementation of swipeable views in React Native. With minimal setup, you can easily create swipeable images and components.
## Table of Contents
- [React Native Easy Swiper 🚀](#react-native-easy-swiper-)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Demo](#demo)
- [Core Features](#core-features)
- [Basic Usage](#basic-usage)
- [Advance Usage](#advance-usage)
- [Api Documentation](#api-documentation)
- [Core Props](#core-props)
- [Container Props](#container-props)
- [Pagination Props](#pagination-props)
- [Contributing](#contributing)
- [License](#license)
## Installation
To install, you can use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/):
```sh
npm install react-native-easy-swiper
```
or
```sh
yarn add react-native-easy-swiper
```
## Demo
Â Â Â Â
Â Â Â Â
**Try on snack**
- [Demo 1](https://snack.expo.dev/@rayhan122/react-native-easy-swiper-demo-1)
- [Demo 2](https://snack.expo.dev/@rayhan122/react-native-easy-swiper-demo-2)
- [Demo 3](https://snack.expo.dev/@rayhan122/react-native-easy-swiper-demo-3)
## Core Features
- **Direction -** Supports horizontal and vertical swiping direction
- **Animations -** Supports fade and scale animation
- **Pagination -** Provides three types of animated pagination styles with lots of customization
## Basic Usage
```js
import * as React from 'react';
import Swiper from "react-native-easy-swiper"
const images = [
"https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-thrqtr-left.jpg",
"https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-thrqtr-right.jpg",
"https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-folded.jpg",
];
export default function App() {
return
}
```
## Advance Usage
```js
import * as React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import Swiper from 'react-native-easy-swiper';
const images = [
'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
'https://images.unsplash.com/photo-1608231387042-66d1773070a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80',
];
export default function App() {
return (
{images.map((image, index) => (
))}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
});
```
## Api Documentation
### Core Props
| Property | Types | Defaults | Description |
| ------------ | ---------- | -------- | --------------------------------------------------------------- |
| images | array | null | Array of strings, each of which represents a URL for an image |
| imagesStyles | ImageStyle | {} | Styles for images |
| children | ReactNode | null | Either pass images or children* |
| horizontal | boolean | true | Swiper direction for vertical swiper pass ` horizontal={false}` |
| animations | array | [] | Can pass multiple animations `scale` `fade` |
### Container Props
| Property | Types | Defaults | Description |
| -------------- | --------- | ------------ | ---------------------------------- |
| fullScreen | boolean | false | Takes full screen width and height |
| height | number | screenHeight | Height of container |
| width | number | screenWidth | Width of container |
| containerStyle | ViewStyle | {} | Other styles for container |
### Pagination Props
| Property | Types | Defaults | Description |
| -------------- | ------------------------ | -------------------------- | ------------------------------------------------------------------------------- |
| hideDot | boolean | false | Hides pagination |
| dotType | dot border dashed | dashed | Pagination style |
| dotColor | string | lightgray | Dot color |
| dotPosition | left right top bottom | horizontal ? bottom : left | Postion of dot around container |
| dotStyle | ViewStyle | null | Styles for dots |
| dotMargin | number | 20 | Distance from container depending on `dotPosition` |
| dotSpacing | number | 8 | Gap between dots |
| activeDotColor | string | black | Active dot color |
| dotBorderStyle | ViewStyle | {} | Default `borderWidth: 1` and `borderColor: "#1d1d1d"` for `dotType: "border"` |
| activeDashSize | number | 32 | Length of dash for `dotType: "dashed"` |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)