{"id":18369872,"url":"https://github.com/cawfree/react-native-rotary","last_synced_at":"2025-04-06T18:32:37.688Z","repository":{"id":35252824,"uuid":"216666649","full_name":"cawfree/react-native-rotary","owner":"cawfree","description":"🕰️  A \u003cRotary /\u003e component for React Native.","archived":false,"fork":false,"pushed_at":"2023-01-27T01:35:26.000Z","size":3074,"stargazers_count":37,"open_issues_count":28,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T04:31:52.927Z","etag":null,"topics":["carousel","enum","infinite","loop","react","react-native","react-native-web","scroll"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-21T21:14:23.000Z","updated_at":"2024-02-17T01:40:59.000Z","dependencies_parsed_at":"2023-02-15T04:01:32.610Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-native-rotary","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-rotary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-rotary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-rotary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-rotary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-rotary/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247531355,"owners_count":20953937,"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":["carousel","enum","infinite","loop","react","react-native","react-native-web","scroll"],"created_at":"2024-11-05T23:32:49.596Z","updated_at":"2025-04-06T18:32:35.553Z","avatar_url":"https://github.com/cawfree.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/cawfree"],"categories":[],"sub_categories":[],"readme":"# 🕰️  react-native-rotary\nA `\u003cRotary /\u003e` component for React Native, compatible with Android, iOS and Web, powered by [react-native-animated-math](https://github.com/rastapasta/react-native-animated-math).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./bin/out.gif\" width=\"398\" height=\"266\"\u003e\n\u003c/p\u003e\n\nThis project supports [Semantic Versioning](https://docs.npmjs.com/about-semantic-versioning).\n\n## 🚀 Getting Started\n\nUsing [`npm`]():\n\n```shell\nnpm install --save react-native-rotary\n```\n\nUsing [`yarn`]():\n\n```shell\nyarn add react-native-rotary\n```\n\n### 🔥 Features\n  - Dynamic paginated rotation control via the `index` prop.\n  - Smoothly animated infinite content loops, without the need for duplicate entries, scroll limits or jitter.\n\n## ✍️ Example\n\nThis component emulates the configuration of a [`\u003cFlatList /\u003e`](https://facebook.github.io/react-native/docs/flatlist).\n\n```javascript\nimport React, { useState } from 'react';\nimport { View, StyleSheet, Image } from 'react-native';\nimport Rotary from 'react-native-rotary';\n \nexport default () =\u003e {\n  // You can define an initial index offset, and render arbitrary child elements.\n  const [ index, setIndex ] = useState(1);\n  return (\n    \u003cView\n      style={[\n        StyleSheet.absoluteFill,\n        {\n          alignItems: 'center',\n          justifyContent: 'center',\n        },\n      ]}\n    \u003e\n      \u003cRotary\n        index={index}\n        onIndexChanged={setIndex}\n        radius={100}\n        data={data}\n        renderItem={({ item: uri, index }) =\u003e (\n          \u003cView\n            style={{\n              width: 100,\n              height: 100,\n              alignItems: 'center',\n              justifyContent: 'center',\n            }}\n          \u003e\n            \u003cImage\n              style={{\n                width: 80,\n                height: 80,\n              }}\n              source={{ uri }}\n            /\u003e\n          \u003c/View\u003e\n        )}\n      /\u003e\n      \u003cView\n        style={{\n          width: 50,\n          height: 50,\n        }}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n \nconst data = [\n  'https://mondrian.mashable.com/uploads%252Fcard%252Fimage%252F929108%252F46c9313d-32d0-4da8-8d41-f5e50936a926.png%252Ffull-fit-in__950x534.png?signature=_R0yeIihD3oDvF1bulncd718gR0=\u0026source=https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com',\n  'https://cdn-01.independent.ie/incoming/article34131003.ece/bcec2/AUTOCROP/w620/Hugging%20Face.png',\n  'https://i2.wp.com/www.emojifoundation.com/wp-content/uploads/2017/07/Thinking_Face_Emoji.png',\n  'https://cdn.shopify.com/s/files/1/1061/1924/products/Unamused_Face_Emoji_761d8bf8-c78c-45b1-80b1-a86a80d2452d_grande.png?v=1480481058',\n  'https://cdn.shopify.com/s/files/1/1061/1924/products/Cold_Sweat_Emoji_grande.png?v=1480481051',\n  'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fdavidphelan%2Ffiles%2F2017%2F07%2Femoji_update_2017_10.jpg',\n  'https://cdn.shopify.com/s/files/1/1061/1924/products/Face_with_Cold_Sweat_Emoji_grande.png?v=1480481052',\n  'https://www.dictionary.com/e/wp-content/uploads/2018/03/Upside-Down_Face_Emoji.png',\n];\n```\n\n## 📌 Props\n\n-----\nProp                  | Type     | Default                   | Required | Description\n--------------------- | -------- | ------------------------- | -------- | -----------\nradius|number|60|No|The radius of the circle the rendered items will render around.\ndata|arrayOf[object Object]|[]|No|The data source to render.\nrenderItem|func|({ item, index }) =\u003e null|No|A function to render an item from `data`.\nindex|number|0|No|The currently focused index.\nonIndexChanged|func|(index) =\u003e null|No|Callback for when the index has changed.\nduration|number|300|No|The animation duration when rendered items are realigned.\nminSwipe|number|0|No|The minimum amount of distance to drag before rotating.\nstyle|object|0|No|Additional styling.\ndisabled|bool|false|No|Prevent manual scrolling.\n\n## ✌️ License\n[MIT]()\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/cawfree\"\u003e\n    \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy @cawfree a coffee\" width=\"232\" height=\"50\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-rotary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-rotary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-rotary/lists"}