├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── bin
    └── out.gif
├── example
    ├── .gitignore
    ├── App.js
    ├── README.md
    ├── babel.config.js
    ├── package.json
    └── yarn.lock
├── package.json
├── src
    └── index.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env", "@babel/preset-react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 
63 | # compile out
64 | dist
65 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | bin/
2 | example/
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Alexander Thomas
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🕰️  react-native-rotary
  2 | A `<Rotary />` component for React Native, compatible with Android, iOS and Web, powered by [react-native-animated-math](https://github.com/rastapasta/react-native-animated-math).
  3 | 
  4 | <p align="center">
  5 |   <img src="./bin/out.gif" width="398" height="266">
  6 | </p>
  7 | 
  8 | This project supports [Semantic Versioning](https://docs.npmjs.com/about-semantic-versioning).
  9 | 
 10 | ## 🚀 Getting Started
 11 | 
 12 | Using [`npm`]():
 13 | 
 14 | ```shell
 15 | npm install --save react-native-rotary
 16 | ```
 17 | 
 18 | Using [`yarn`]():
 19 | 
 20 | ```shell
 21 | yarn add react-native-rotary
 22 | ```
 23 | 
 24 | ### 🔥 Features
 25 |   - Dynamic paginated rotation control via the `index` prop.
 26 |   - Smoothly animated infinite content loops, without the need for duplicate entries, scroll limits or jitter.
 27 | 
 28 | ## ✍️ Example
 29 | 
 30 | This component emulates the configuration of a [`<FlatList />`](https://facebook.github.io/react-native/docs/flatlist).
 31 | 
 32 | ```javascript
 33 | import React, { useState } from 'react';
 34 | import { View, StyleSheet, Image } from 'react-native';
 35 | import Rotary from 'react-native-rotary';
 36 |  
 37 | export default () => {
 38 |   // You can define an initial index offset, and render arbitrary child elements.
 39 |   const [ index, setIndex ] = useState(1);
 40 |   return (
 41 |     <View
 42 |       style={[
 43 |         StyleSheet.absoluteFill,
 44 |         {
 45 |           alignItems: 'center',
 46 |           justifyContent: 'center',
 47 |         },
 48 |       ]}
 49 |     >
 50 |       <Rotary
 51 |         index={index}
 52 |         onIndexChanged={setIndex}
 53 |         radius={100}
 54 |         data={data}
 55 |         renderItem={({ item: uri, index }) => (
 56 |           <View
 57 |             style={{
 58 |               width: 100,
 59 |               height: 100,
 60 |               alignItems: 'center',
 61 |               justifyContent: 'center',
 62 |             }}
 63 |           >
 64 |             <Image
 65 |               style={{
 66 |                 width: 80,
 67 |                 height: 80,
 68 |               }}
 69 |               source={{ uri }}
 70 |             />
 71 |           </View>
 72 |         )}
 73 |       />
 74 |       <View
 75 |         style={{
 76 |           width: 50,
 77 |           height: 50,
 78 |         }}
 79 |       />
 80 |     </View>
 81 |   );
 82 | };
 83 |  
 84 | const data = [
 85 |   'https://mondrian.mashable.com/uploads%252Fcard%252Fimage%252F929108%252F46c9313d-32d0-4da8-8d41-f5e50936a926.png%252Ffull-fit-in__950x534.png?signature=_R0yeIihD3oDvF1bulncd718gR0=&source=https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com',
 86 |   'https://cdn-01.independent.ie/incoming/article34131003.ece/bcec2/AUTOCROP/w620/Hugging%20Face.png',
 87 |   'https://i2.wp.com/www.emojifoundation.com/wp-content/uploads/2017/07/Thinking_Face_Emoji.png',
 88 |   'https://cdn.shopify.com/s/files/1/1061/1924/products/Unamused_Face_Emoji_761d8bf8-c78c-45b1-80b1-a86a80d2452d_grande.png?v=1480481058',
 89 |   'https://cdn.shopify.com/s/files/1/1061/1924/products/Cold_Sweat_Emoji_grande.png?v=1480481051',
 90 |   'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fdavidphelan%2Ffiles%2F2017%2F07%2Femoji_update_2017_10.jpg',
 91 |   'https://cdn.shopify.com/s/files/1/1061/1924/products/Face_with_Cold_Sweat_Emoji_grande.png?v=1480481052',
 92 |   'https://www.dictionary.com/e/wp-content/uploads/2018/03/Upside-Down_Face_Emoji.png',
 93 | ];
 94 | ```
 95 | 
 96 | ## 📌 Props
 97 | 
 98 | -----
 99 | Prop                  | Type     | Default                   | Required | Description
100 | --------------------- | -------- | ------------------------- | -------- | -----------
101 | radius|number|60|No|The radius of the circle the rendered items will render around.
102 | data|arrayOf[object Object]|[]|No|The data source to render.
103 | renderItem|func|({ item, index }) => null|No|A function to render an item from `data`.
104 | index|number|0|No|The currently focused index.
105 | onIndexChanged|func|(index) => null|No|Callback for when the index has changed.
106 | duration|number|300|No|The animation duration when rendered items are realigned.
107 | minSwipe|number|0|No|The minimum amount of distance to drag before rotating.
108 | style|object|0|No|Additional styling.
109 | disabled|bool|false|No|Prevent manual scrolling.
110 | 
111 | ## ✌️ License
112 | [MIT]()
113 | 
114 | <p align="center">
115 |   <a href="https://www.buymeacoffee.com/cawfree">
116 |     <img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy @cawfree a coffee" width="232" height="50" />
117 |   </a>
118 | </p>
119 | 


--------------------------------------------------------------------------------
/bin/out.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cawfree/react-native-rotary/4f82318ee3a5b0b1f67660b780e0b6c8be16a941/bin/out.gif


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 | 
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 | 
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 | 
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 | 
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 | 
55 | # Bundle artifacts
56 | *.jsbundle
57 | 
58 | # CocoaPods
59 | /ios/Pods/
60 | 
61 | # Expo
62 | .expo/*
63 | web-build/


--------------------------------------------------------------------------------
/example/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { View, Image } from "react-native";
 3 | 
 4 | import Rotary from "react-native-rotary";
 5 | 
 6 | export default function App() {
 7 |   const [index, setIndex] = useState(1);
 8 |   const [data, setData] = useState([
 9 |     'https://mondrian.mashable.com/uploads%252Fcard%252Fimage%252F929108%252F46c9313d-32d0-4da8-8d41-f5e50936a926.png%252Ffull-fit-in__950x534.png?signature=_R0yeIihD3oDvF1bulncd718gR0=&source=https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com',
10 |     'https://cdn-01.independent.ie/incoming/article34131003.ece/bcec2/AUTOCROP/w620/Hugging%20Face.png',
11 |     'https://i2.wp.com/www.emojifoundation.com/wp-content/uploads/2017/07/Thinking_Face_Emoji.png',
12 |     'https://cdn.shopify.com/s/files/1/1061/1924/products/Unamused_Face_Emoji_761d8bf8-c78c-45b1-80b1-a86a80d2452d_grande.png?v=1480481058',
13 |     'https://cdn.shopify.com/s/files/1/1061/1924/products/Cold_Sweat_Emoji_grande.png?v=1480481051',
14 |     'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fdavidphelan%2Ffiles%2F2017%2F07%2Femoji_update_2017_10.jpg',
15 |     'https://cdn.shopify.com/s/files/1/1061/1924/products/Face_with_Cold_Sweat_Emoji_grande.png?v=1480481052',
16 |     'https://www.dictionary.com/e/wp-content/uploads/2018/03/Upside-Down_Face_Emoji.png',
17 |   ]);
18 | 
19 |   // XXX: Test dynamic loading.
20 |   //useEffect(
21 |   //  () => {
22 |   //    setTimeout(
23 |   //      () => setData([
24 |   //        'https://mondrian.mashable.com/uploads%252Fcard%252Fimage%252F929108%252F46c9313d-32d0-4da8-8d41-f5e50936a926.png%252Ffull-fit-in__950x534.png?signature=_R0yeIihD3oDvF1bulncd718gR0=&source=https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com',
25 |   //        'https://cdn-01.independent.ie/incoming/article34131003.ece/bcec2/AUTOCROP/w620/Hugging%20Face.png',
26 |   //        'https://i2.wp.com/www.emojifoundation.com/wp-content/uploads/2017/07/Thinking_Face_Emoji.png',
27 |   //        'https://cdn.shopify.com/s/files/1/1061/1924/products/Unamused_Face_Emoji_761d8bf8-c78c-45b1-80b1-a86a80d2452d_grande.png?v=1480481058',
28 |   //        'https://cdn.shopify.com/s/files/1/1061/1924/products/Cold_Sweat_Emoji_grande.png?v=1480481051',
29 |   //        'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fdavidphelan%2Ffiles%2F2017%2F07%2Femoji_update_2017_10.jpg',
30 |   //        'https://cdn.shopify.com/s/files/1/1061/1924/products/Face_with_Cold_Sweat_Emoji_grande.png?v=1480481052',
31 |   //        'https://www.dictionary.com/e/wp-content/uploads/2018/03/Upside-Down_Face_Emoji.png',
32 |   //      ]),
33 |   //      1000,
34 |   //    ); 
35 |   //  },
36 |   //  [setData],
37 |   //);
38 | 
39 |   return (
40 |     <View style={StyleSheet.absoluteFill}>
41 |       <Rotary
42 |         index={index}
43 |         onIndexChanged={setIndex}
44 |         radius={100}
45 |         data={data}
46 |         renderItem={({ item: uri, index }) => (
47 |           <View
48 |             style={{
49 |               width: 100,
50 |               height: 100,
51 |               alignItems: 'center',
52 |               justifyContent: 'center',
53 |             }}
54 |           >
55 |             <Image
56 |               style={{
57 |                 width: 80,
58 |                 height: 80,
59 |               }}
60 |               source={{ uri }}
61 |             />
62 |           </View>
63 |         )}
64 |       />
65 |     </View>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # My Universal React Project
 2 | 
 3 | <p>
 4 |   <!-- iOS -->
 5 |   <a href="https://itunes.apple.com/app/apple-store/id982107779">
 6 |     <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
 7 |   </a>
 8 |   <!-- Android -->
 9 |   <a href="https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=blankexample">
10 |     <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
11 |   </a>
12 |   <!-- Web -->
13 |   <a href="https://docs.expo.io/workflow/web/">
14 |     <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
15 |   </a>
16 | </p>
17 | 
18 | ## 🚀 How to use
19 | 
20 | - Install packages with `yarn` or `npm install`.
21 |   - If you have native iOS code run `npx pod-install`
22 | - Run `yarn start` to start the bundler.
23 | - Open the project in a React runtime to try it:
24 |   - iOS: [Client iOS](https://itunes.apple.com/app/apple-store/id982107779)
25 |   - Android: [Client Android](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=blankexample)
26 |   - Web: Any web browser
27 | 
28 | ## Adding Native Code
29 | 
30 | This project can be run from a web browser or the Expo client app. You may find that you want to add more native code later on. You can do this by ejecting the project and rebuilding it yourself.
31 | 
32 | - Run `yarn eject` to create the native projects.
33 | - You can still run your project in the web browser or Expo client, you just won't be able to access any new native modules you add.
34 | 
35 | ## Publishing
36 | 
37 | - Deploy the native app to the App store and Play store using this guide: [Deployment](https://docs.expo.io/distribution/app-stores/).
38 | - Deploy the website using this guide: [Web deployment](https://docs.expo.io/distribution/publishing-websites/).
39 | 
40 | ## 📝 Notes
41 | 
42 | - Learn more about [Universal React](https://docs.expo.io/).
43 | - See what API and components are [available in the React runtimes](https://docs.expo.io/versions/latest/).
44 | - Find out more about developing apps and websites: [Guides](https://docs.expo.io/guides/).
45 | 


--------------------------------------------------------------------------------
/example/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "dependencies": {
 3 |     "expo": "~38.0.0",
 4 |     "react": "~16.11.0",
 5 |     "react-dom": "~16.11.0",
 6 |     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
 7 |     "react-native-rotary": "../",
 8 |     "react-native-web": "0.11.7",
 9 |     "use-deep-compare-effect": "^1.4.0"
10 |   },
11 |   "devDependencies": {
12 |     "@babel/core": "7.9.0"
13 |   },
14 |   "scripts": {
15 |     "start": "expo start",
16 |     "android": "expo start --android",
17 |     "ios": "expo start --ios",
18 |     "web": "expo web",
19 |     "eject": "expo eject"
20 |   },
21 |   "private": true
22 | }
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "dependencies": {
 3 |     "react-native-animated-math": "^0.3.1"
 4 |   },
 5 |   "keywords": [
 6 |     "loop",
 7 |     "infinite",
 8 |     "scroll",
 9 |     "react",
10 |     "react-native",
11 |     "react-native-web",
12 |     "carousel",
13 |     "enum"
14 |   ],
15 |   "name": "react-native-rotary",
16 |   "version": "0.1.6",
17 |   "description": "🕰️  A <Rotary /> component for React Native.",
18 |   "main": "dist",
19 |   "scripts": {
20 |     "build": "yarn ; babel src --out-dir dist ; rm -rf node_modules"
21 |   },
22 |   "repository": "https://github.com/cawfree/react-native-rotary",
23 |   "author": "Alex Thomas (@cawfree) <hello@cawfree.com>",
24 |   "license": "MIT",
25 |   "private": false,
26 |   "devDependencies": {
27 |     "@babel/cli": "^7.11.6",
28 |     "@babel/core": "^7.11.6",
29 |     "@babel/node": "^7.10.5",
30 |     "@babel/polyfill": "^7.11.5",
31 |     "@babel/preset-env": "^7.11.5",
32 |     "@babel/preset-react": "^7.10.4",
33 |     "husky": "^4.3.0",
34 |     "jest": "^26.4.2",
35 |     "prettier": "^2.1.2"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect, useCallback } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { View, Platform, Animated, PanResponder } from 'react-native';
  4 | import AnimatedMath from 'react-native-animated-math';
  5 | import useDeepCompareEffect from 'use-deep-compare-effect';
  6 | 
  7 | const getIndex = (animRotate, data) => {
  8 |   const dir = Math.sign(animRotate.__getValue());
  9 |   const pct = animRotate.__getValue() / (2 * Math.PI);
 10 |   const i = Math.round(data.length * pct) % data.length;
 11 |   const j = data.length - i;
 12 |   const k = j >= data.length ? 0 : j;
 13 |   const l = dir * i;
 14 |   return dir >= 0 ? k : l;
 15 | };
 16 | 
 17 | const shouldRest = (animRotate, data, duration) => {
 18 |   animRotate.flattenOffset();
 19 |   const d = Math.PI * 2 / data.length;
 20 |   Animated
 21 |     .timing(
 22 |       animRotate,
 23 |       {
 24 |         toValue:  Math.round(animRotate.__getValue() / d) * d,
 25 |         duration,
 26 |         useNativeDriver: Platform.OS !== 'web',
 27 |       },
 28 |     )
 29 |     .start(
 30 |       () => animRotate.extractOffset(),
 31 |     );
 32 | };
 33 | 
 34 | const Rotary = ({ radius, data, renderItem, index, onIndexChanged, duration, style, disabled, ...extraProps }) => {
 35 | 
 36 |   const createDefaultRotation = useCallback(() => new Animated.Value(-1 * index * Math.PI * 2 / data.length), []);
 37 |   
 38 |   const [animRotate] = useState(createDefaultRotation);
 39 | 
 40 |   const createPanResponder = useCallback(
 41 |     () => PanResponder
 42 |       .create(
 43 |         {
 44 |           onStartShouldSetPanResponder: () => true,
 45 |           onPanResponderTerminationRequest: () => false,
 46 |           onShouldBlockNativeResponder: () => true,
 47 |           onPanResponderGrant: (evt, gestureState) => {
 48 |             animRotate.extractOffset();
 49 |           },
 50 |           onPanResponderMove: (evt, gestureState) => {
 51 |             const { dx } = gestureState;
 52 |             const v = (dx / radius);
 53 |             animRotate.setValue(v);
 54 |           },
 55 |           onPanResponderRelease: (evt, gestureState) => {
 56 |             onIndexChanged(getIndex(animRotate, data));
 57 |             shouldRest(animRotate, data, duration);
 58 |           },
 59 |           onPanResponderTerminate: (evt, gestureState) => {
 60 |             onIndexChanged(getIndex(animRotate, data));
 61 |             shouldRest(animRotate, data, duration);
 62 |           },
 63 |         },
 64 |       ),
 65 |     [data, radius, duration],
 66 |   );
 67 | 
 68 |   const createAnimation = useCallback(
 69 |     () => data.map(
 70 |       (item, index, { length }) => {
 71 |           const offsetRotate = Animated
 72 |             .add(
 73 |               animRotate,
 74 |               Math.PI,
 75 |             );
 76 |           const scale = AnimatedMath
 77 |             .sinus(
 78 |               Animated.diffClamp(
 79 |                 Animated.modulo(
 80 |                   Animated.add(
 81 |                     Animated.add(
 82 |                       offsetRotate,
 83 |                       -1 * Math.PI / 2,
 84 |                     ),
 85 |                     index / length * 2 * Math.PI,
 86 |                   ),
 87 |                   Math.PI * 2,
 88 |                 ),
 89 |                 -radius,
 90 |                 radius,
 91 |               ),
 92 |             );
 93 |           return (
 94 |             <Animated.View
 95 |               key={index}
 96 |               style={{
 97 |                 opacity: scale,
 98 |                 position: 'absolute',
 99 |                 transform: [
100 |                   { translateX: Animated
101 |                       .add(
102 |                         Animated.multiply(
103 |                           radius,
104 |                           AnimatedMath
105 |                             .cosinus(
106 |                               Animated
107 |                                 .add(
108 |                                   (index / length) * Math.PI * 2 + Math.PI / 2,
109 |                                   offsetRotate,
110 |                                 ),
111 |                             ),
112 |                         ),
113 |                         radius * 0.5,
114 |                       )},
115 |                   { translateY: Animated
116 |                       .add(
117 |                         Animated.multiply(
118 |                           radius,
119 |                           AnimatedMath
120 |                             .sinus(
121 |                               Animated
122 |                                 .add(
123 |                                   (index / length) * Math.PI * 2 + Math.PI / 2,
124 |                                   offsetRotate,
125 |                                 ),
126 |                             ),
127 |                         ),
128 |                         radius,
129 |                       )},
130 |                   { scale }
131 |                 ],
132 |               }}
133 |             >
134 |               {renderItem({ item, index })}
135 |             </Animated.View>
136 |           );
137 |         }
138 |       ),
139 |     [data],
140 |   );
141 | 
142 |   const [panResponder, setPanResponder] = useState(createPanResponder(animRotate));
143 |   const [anim, setAnim] = useState(createAnimation);
144 | 
145 |   useDeepCompareEffect(
146 |     () => {
147 |       animRotate.setValue(-1 * index * Math.PI * 2 / data.length);
148 |       animRotate.flattenOffset();
149 |       animRotate.extractOffset();
150 |       setPanResponder(createPanResponder());
151 |       setAnim(createAnimation());
152 |     },
153 |     [data, setPanResponder, setAnim, createDefaultRotation, createPanResponder, createAnimation],
154 |   );
155 | 
156 |   useEffect(
157 |     () => {
158 |       const curr = getIndex(animRotate, data);
159 |       if (index !== curr) {
160 |         animRotate.flattenOffset();
161 |         Animated
162 |           .timing(
163 |             animRotate,
164 |             {
165 |               toValue: -1 * index * Math.PI * 2 / data.length,
166 |               duration,
167 |               useNativeDriver: Platform.OS !== 'web',
168 |             },
169 |           )
170 |           .start();
171 |       }
172 |     },
173 |     [index, animRotate, data, duration],
174 |   );
175 |   const conditionalProps = !disabled ? (
176 |     { ...panResponder.panHandlers }
177 |   ) : {};
178 |   return (
179 |     <Animated.View
180 |       {...conditionalProps}
181 |       style={[style, { width: radius * 2, height: radius }]}
182 |     >
183 |       <View style={{ marginLeft: -0.125 * radius }}>
184 |         {anim}
185 |       </View>
186 |     </Animated.View>
187 |   );
188 | };
189 | 
190 | Rotary.propTypes = {
191 |   radius: PropTypes.number,
192 |   data: PropTypes.arrayOf(
193 |     PropTypes.any,
194 |   ),
195 |   renderItem: PropTypes.func,
196 |   index: PropTypes.number,
197 |   onIndexChanged: PropTypes.func,
198 |   duration: PropTypes.number,
199 |   style: PropTypes.shape({}),
200 |   disabled: PropTypes.bool,
201 | };
202 | 
203 | Rotary.defaultProps = {
204 |   radius: 60,
205 |   data: [],
206 |   renderItem: ({ item, index }) => null,
207 |   index: 0,
208 |   onIndexChanged: (index) => null,
209 |   duration: 300,
210 |   style: {
211 |     overflow: 'hidden',
212 |   },
213 |   disabled: false,
214 | };
215 | 
216 | export default Rotary;
217 | 


--------------------------------------------------------------------------------