{"id":16211688,"url":"https://github.com/k-h-rayhan/react-native-easy-swiper","last_synced_at":"2025-03-19T09:30:46.477Z","repository":{"id":152871634,"uuid":"627355314","full_name":"K-H-Rayhan/React-Native-Easy-Swiper","owner":"K-H-Rayhan","description":"React Native Easy Swiper is a library that enables easy implementation of swipeable views in React Native, with numerous customization options available.","archived":false,"fork":false,"pushed_at":"2023-04-14T13:33:51.000Z","size":6001,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T00:52:07.654Z","etag":null,"topics":["react-native","react-native-easy-swiper","react-native-swiper","swiper"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-easy-swiper","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/K-H-Rayhan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-13T09:44:55.000Z","updated_at":"2024-11-03T17:32:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"22458537-d213-41eb-b582-587a6a9daeaf","html_url":"https://github.com/K-H-Rayhan/React-Native-Easy-Swiper","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/K-H-Rayhan%2FReact-Native-Easy-Swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/K-H-Rayhan%2FReact-Native-Easy-Swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/K-H-Rayhan%2FReact-Native-Easy-Swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/K-H-Rayhan%2FReact-Native-Easy-Swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/K-H-Rayhan","download_url":"https://codeload.github.com/K-H-Rayhan/React-Native-Easy-Swiper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243981329,"owners_count":20378557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","react-native-easy-swiper","react-native-swiper","swiper"],"created_at":"2024-10-10T10:48:58.167Z","updated_at":"2025-03-19T09:30:44.606Z","avatar_url":"https://github.com/K-H-Rayhan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Easy Swiper 🚀\n\nReact 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.\n\n## Table of Contents\n- [React Native Easy Swiper 🚀](#react-native-easy-swiper-)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Demo](#demo)\n  - [Core Features](#core-features)\n  - [Basic Usage](#basic-usage)\n  - [Advance Usage](#advance-usage)\n  - [Api Documentation](#api-documentation)\n    - [Core Props](#core-props)\n    - [Container Props](#container-props)\n    - [Pagination Props](#pagination-props)\n  - [Contributing](#contributing)\n  - [License](#license)\n\n## Installation\nTo install, you can use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/):\n```sh\nnpm install react-native-easy-swiper\n```\nor\n```sh\nyarn add react-native-easy-swiper\n```\n## Demo\n\n![React Native Easy Swiper Demo 1](https://user-images.githubusercontent.com/83538046/231977240-982a82db-e48c-4b3f-b450-3ba9339ddbce.gif)\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n![React Native Easy Swiper Demo 2](https://user-images.githubusercontent.com/83538046/231977324-c5410461-282a-469b-99c3-59174a09fe6e.gif)\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n![React Native Easy Swiper Demo 3](https://user-images.githubusercontent.com/83538046/231977338-432f9ef8-0cec-4efa-ac98-a821e93b45d3.gif)\n\u003cbr /\u003e\n**Try on snack**\n- [Demo 1](https://snack.expo.dev/@rayhan122/react-native-easy-swiper-demo-1)\n- [Demo 2](https://snack.expo.dev/@rayhan122/react-native-easy-swiper-demo-2)\n- [Demo 3](https://snack.expo.dev/@rayhan122/react-native-easy-swiper-demo-3)\n\n## Core Features\n- **Direction -** Supports horizontal and vertical swiping direction\n- **Animations -** Supports fade and scale animation \n- **Pagination -** Provides three types of animated pagination styles with lots of customization\n\n## Basic Usage\n\n```js\nimport * as React from 'react';\nimport Swiper from \"react-native-easy-swiper\"\nconst images = [\n  \"https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-thrqtr-left.jpg\",\n  \"https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-thrqtr-right.jpg\",\n  \"https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/product-carousel/black/pc-solo3-black-folded.jpg\",\n];\nexport default function App() {\n  return \u003cSwiper images={images} /\u003e\n}\n```\n## Advance Usage\n\n```js\nimport * as React from 'react';\nimport { View, Image, StyleSheet } from 'react-native';\nimport Swiper from 'react-native-easy-swiper';\nconst images = [\n  'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=1470\u0026q=80',\n  'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=764\u0026q=80',\n  'https://images.unsplash.com/photo-1608231387042-66d1773070a5?ixlib=rb-4.0.3\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=1374\u0026q=80',\n];\nexport default function App() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cSwiper\n        height={400}\n        dotBorderStyle={{\n          borderColor: 'white',\n        }}\n        dotColor='white'\n      \u003e\n        {images.map((image, index) =\u003e (\n          \u003cImage\n            key={index}\n            source={{ uri: image }}\n            style={\n              {\n                width: \"100%\",\n                height: \"100%\",\n                resizeMode: \"cover\"\n              }} /\u003e\n        ))}\n      \u003c/Swiper\u003e\n    \u003c/View\u003e\n  );\n}\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: '#000',\n  },\n  box: {\n    width: 60,\n    height: 60,\n    marginVertical: 20,\n  },\n});\n```\n\n## Api Documentation\n\n### Core Props\n\n\n| Property     | Types      | Defaults | Description                                                     |\n| ------------ | ---------- | -------- | --------------------------------------------------------------- |\n| images       | array      | null     | Array of strings, each of which represents a URL for an image   |\n| imagesStyles | ImageStyle | {}       | Styles for images                                               |\n| children     | ReactNode  | null     | Either pass images or children*                                 |\n| horizontal   | boolean    | true     | Swiper direction for vertical swiper pass ` horizontal={false}` |\n| animations   | array      | []       | Can pass multiple animations  `scale` `fade`                    |\n\n### Container Props\n\n| Property       | Types     | Defaults     | Description                        |\n| -------------- | --------- | ------------ | ---------------------------------- |\n| fullScreen     | boolean   | false        | Takes full screen width and height |\n| height         | number    | screenHeight | Height of container                |\n| width          | number    | screenWidth  | Width of container                 |\n| containerStyle | ViewStyle | {}           | Other styles for container         |\n\n\n### Pagination Props\n\n| Property       | Types                    | Defaults                   | Description                                                                     |\n| -------------- | ------------------------ | -------------------------- | ------------------------------------------------------------------------------- |\n| hideDot        | boolean                  | false                      | Hides pagination                                                                |\n| dotType        | dot  border dashed       | dashed                     | Pagination style                                                                |\n| dotColor       | string                   | lightgray                  | Dot color                                                                       |\n| dotPosition    | left  right  top  bottom | horizontal ? bottom : left | Postion of dot around container                                                 |\n| dotStyle       | ViewStyle                | null                       | Styles for dots                                                                 |\n| dotMargin      | number                   | 20                         | Distance from container depending on `dotPosition`                              |\n| dotSpacing     | number                   | 8                          | Gap between dots                                                                |\n| activeDotColor | string                   | black                      | Active dot color                                                                |\n| dotBorderStyle | ViewStyle                | {}                         | Default  `borderWidth: 1` and `borderColor: \"#1d1d1d\"` for  `dotType: \"border\"` |\n| activeDashSize | number                   | 32                         | Length of dash for `dotType: \"dashed\"`                                          |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk-h-rayhan%2Freact-native-easy-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk-h-rayhan%2Freact-native-easy-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk-h-rayhan%2Freact-native-easy-swiper/lists"}