├── .eslintignore ├── .eslintrc ├── .github └── workflows │ └── publish.yml ├── .gitignore ├── .husky ├── commit-msg ├── pre-commit └── pre-push ├── .npmignore ├── .prettierrc.js ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── assets ├── RadialCircle.gif ├── RadialSlider.gif ├── RadialSliderExample.gif ├── SpeedoMeter.gif ├── SpeedoMeterExample.gif ├── SpeedoMeterMarker.gif └── banner.png ├── babel.config.js ├── example ├── .bundle │ └── config ├── .eslintrc.js ├── .gitignore ├── .node-version ├── .prettierrc.js ├── .watchmanconfig ├── Gemfile ├── Gemfile.lock ├── README.md ├── android │ ├── app │ │ ├── _BUCK │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── ReactNativeFlipper.java │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── Podfile │ ├── Podfile.lock │ ├── example.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── example.xcscheme │ ├── example.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ ├── IDEWorkspaceChecks.plist │ │ │ └── WorkspaceSettings.xcsettings │ └── example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m ├── metro.config.js ├── package.json ├── src │ ├── App.tsx │ ├── components │ │ └── VariantCard.tsx │ ├── modules │ │ ├── RadialVariant │ │ │ └── index.tsx │ │ ├── SpeedoMeterVariant │ │ │ └── index.tsx │ │ └── index.ts │ └── theme │ │ ├── Colors.ts │ │ ├── Metrics.ts │ │ └── index.ts └── tsconfig.json ├── package.json ├── src ├── components │ ├── RadialSlider │ │ ├── ButtonContent.tsx │ │ ├── CenterContent.tsx │ │ ├── LineContent.tsx │ │ ├── MarkerValueContent.tsx │ │ ├── NeedleContent.tsx │ │ ├── RadialSlider.tsx │ │ ├── RootSlider.tsx │ │ ├── SliderDefaultProps.ts │ │ ├── SpeedoMeter.tsx │ │ ├── SpeedometerDefaultProps.ts │ │ ├── TailText.tsx │ │ ├── __tests__ │ │ │ ├── RadialSlider.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── RadialSlider.test.tsx.snap │ │ ├── hooks │ │ │ ├── index.ts │ │ │ ├── useRadialSlider.ts │ │ │ └── useSliderAnimation.ts │ │ ├── index.ts │ │ ├── styles.ts │ │ └── types.ts │ └── index.ts ├── constants │ └── index.ts ├── index.ts ├── theme │ ├── Colors.ts │ ├── Metrics.ts │ └── index.ts └── utils │ └── commonHelpers.ts └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | example/ 3 | lib/ 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@react-native-community", "prettier"], 3 | "rules": { 4 | "prettier/prettier": [ 5 | "error", 6 | { 7 | "quoteProps": "preserve", 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "es5", 11 | "useTabs": false 12 | } 13 | ], 14 | "no-bitwise": 0, 15 | "prefer-const": "warn", 16 | "no-console": ["error", { "allow": ["warn", "error"] }] 17 | }, 18 | "globals": { 19 | "JSX": "readonly" 20 | }, 21 | "plugins": ["prettier"] 22 | } 23 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: "🚀 Publish" 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | release: 10 | name: 🚀 Publish 11 | runs-on: macos-11 12 | steps: 13 | - name: 📚 checkout 14 | uses: actions/checkout@v2.4.2 15 | - name: 🟢 node 16 | uses: actions/setup-node@v3.3.0 17 | with: 18 | node-version: 16 19 | registry-url: https://registry.npmjs.org 20 | - name: 🚀 Build & Publish 21 | run: yarn install && yarn build && yarn publish --access public 22 | env: 23 | NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}} -------------------------------------------------------------------------------- /.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 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | *.hprof 32 | /android/gradlew 33 | /android/gradlew.bat 34 | /android/gradle/ 35 | 36 | # node.js 37 | # 38 | node_modules/ 39 | npm-debug.log 40 | yarn-error.log 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | !debug.keystore 47 | 48 | # fastlane 49 | # 50 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 51 | # screenshots whenever they are needed. 52 | # For more information about the recommended setup visit: 53 | # https://docs.fastlane.tools/best-practices/source-control/ 54 | 55 | */fastlane/report.xml 56 | */fastlane/Preview.html 57 | */fastlane/screenshots 58 | 59 | # Bundle artifact 60 | *.jsbundle 61 | 62 | # CocoaPods 63 | /ios/Pods/ 64 | 65 | # Library 66 | lib/ 67 | yarn.lock -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn build 5 | yarn test -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .github/ 2 | .husky/ 3 | example/ 4 | patches/ 5 | assets/ 6 | .prettierrc.js 7 | .eslintignore 8 | .eslintrc 9 | CONTRIBUTING.md 10 | babel.config.js -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: true, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | arrowParens: 'avoid', 6 | }; 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We welcome code changes that improve this library or fix a problem, and please make sure to follow all best practices and test all the changes/fixes before committing and creating a pull request. 🚀 🚀 4 | 5 | ### Commiting and Pushing Changes 6 | 7 | Commit messages should be formatted as: 8 | 9 | ``` 10 | [optional scope]: 11 | 12 | [optional body] 13 | 14 | [optional footer] 15 | ``` 16 | 17 | Where type can be one of the following: 18 | 19 | - feat 20 | - fix 21 | - docs 22 | - chore 23 | - style 24 | - refactor 25 | - test 26 | 27 | and an optional scope can be a component 28 | 29 | ``` 30 | docs(RadialSlider): updated contributing guide 31 | ``` -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Simform Solutions 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 | ![Radial Slider - Simform](./assets/banner.png) 2 | 3 | # react-native-radial-slider 4 | 5 | [![react-native-radial-slider on npm](https://img.shields.io/npm/v/react-native-radial-slider.svg?style=flat)](https://www.npmjs.com/package/react-native-radial-slider) [![react-native-radial-slider downloads](https://img.shields.io/npm/dm/react-native-radial-slider)](https://www.npmtrends.com/react-native-radial-slider) [![react-native-radial-slider install size](https://packagephobia.com/badge?p=react-native-radial-slider)](https://packagephobia.com/result?p=react-native-radial-slider) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT) 6 | 7 | --- 8 | 9 | This is a pure javascript and react-native-svg based library that provides many variants of `Radial Slider` and `Speedo Meter` including `default`, `radial-circle-slider`, `speedometer` and `speedometer-marker` 10 | 11 | Radial Slider allows you to select any specific value from a range of values. It comes with two variants, one is default which allows selection on a 180-degree arc and the second one is 360-degree which allows selection of values on a complete circle. It can be used to select/set goals, vision, range, etc. 12 | 13 | The Speedo Meter allows you to highlight a specific value from a range of values. It comes with two variants, the default one shows a needle and another one shows marking values with a needle. It can be used to display the speed of the internet, vehicle, fan, etc. 14 | 15 | This library is easy to use and provides you complete customization, so you can customize components based on your need. 16 | 17 | ## 🎬 Preview 18 | 19 | | RadialSlider | SpeedoMeter | 20 | | ----------------------------------------------------- | --------------------------------------------------- | 21 | | ![alt RadialSlider](./assets/RadialSliderExample.gif) | ![alt SpeedoMeter](./assets/SpeedoMeterExample.gif) | 22 | 23 | --- 24 | 25 | ## Quick Access 26 | 27 | [Installation](#installation) | [RadialSlider](#radialslider) | [SpeedoMeter](#speedometer) | [Properties](#properties) | [Example](#example) | [License](#license) 28 | 29 | ## Installation 30 | 31 | ##### 1. Install library and react-native-svg 32 | 33 | ```bash 34 | $ npm install react-native-radial-slider react-native-svg 35 | # --- or --- 36 | $ yarn add react-native-radial-slider react-native-svg 37 | ``` 38 | 39 | ##### 2. Install cocoapods in the ios project 40 | 41 | ```bash 42 | cd ios && pod install 43 | ``` 44 | 45 | ##### Know more about [react-native-svg](https://www.npmjs.com/package/react-native-svg) 46 | 47 | # RadialSlider 48 | 49 | - RadialSlider has two different variants, 'default' and 'radial-circle-slider' 50 | - RadialSlider can be used to select / set goal, vision, range etc 51 | 52 | ## Default RadialSlider 53 | 54 | #### 🎬 Preview 55 | 56 | --- 57 | 58 | ![Default RadialSlider](./assets/RadialSlider.gif) 59 | 60 | #### Usage 61 | 62 | --- 63 | 64 | ```jsx 65 | import React, { useState } from 'react'; 66 | import { StyleSheet, View } from 'react-native'; 67 | import { RadialSlider } from 'react-native-radial-slider'; 68 | 69 | const RadialVariant = () => { 70 | const [speed, setSpeed] = useState(0); 71 | 72 | return ( 73 | 74 | 75 | 76 | ); 77 | }; 78 | 79 | const styles = StyleSheet.create({ 80 | container: { 81 | flex: 1, 82 | justifyContent: 'center', 83 | }, 84 | }); 85 | 86 | export default RadialVariant; 87 | ``` 88 | 89 | ## Radial Circle Slider 90 | 91 | #### 🎬 Preview 92 | 93 | --- 94 | 95 | ![Default RadialCircleSlider](./assets/RadialCircle.gif) 96 | 97 | #### Usage 98 | 99 | --- 100 | 101 | ```jsx 102 | import React, { useState } from 'react'; 103 | import { StyleSheet, View } from 'react-native'; 104 | import { RadialSlider } from 'react-native-radial-slider'; 105 | 106 | const RadialVariant = () => { 107 | const [speed, setSpeed] = useState(0); 108 | 109 | return ( 110 | 111 | 118 | 119 | ); 120 | }; 121 | 122 | const styles = StyleSheet.create({ 123 | container: { 124 | flex: 1, 125 | justifyContent: 'center', 126 | }, 127 | }); 128 | 129 | export default RadialVariant; 130 | ``` 131 | 132 | # SpeedoMeter 133 | 134 | > The speedometer will not take user inputs, when we need to update dynamic values at that time we can use it 135 | 136 | - SpeedoMeter has two different variants, speedometer and speedometer-marker 137 | - SpeedoMeter can be used to display the speed of an internet, vehicle, fan etc 138 | 139 | ## SpeedoMeter 140 | 141 | #### 🎬 Preview 142 | 143 | --- 144 | 145 | ![Default SpeedoMeter](./assets/SpeedoMeter.gif) 146 | 147 | #### Usage 148 | 149 | --- 150 | 151 | ```jsx 152 | import React, { useState } from 'react'; 153 | import { StyleSheet, View } from 'react-native'; 154 | import { RadialSlider } from 'react-native-radial-slider'; 155 | 156 | const SpeedoMeterVariant = () => { 157 | const [speed, setSpeed] = useState(0); 158 | 159 | return ( 160 | 161 | 168 | 169 | ); 170 | }; 171 | 172 | const styles = StyleSheet.create({ 173 | container: { 174 | flex: 1, 175 | justifyContent: 'center', 176 | }, 177 | }); 178 | 179 | export default SpeedoMeterVariant; 180 | ``` 181 | 182 | ## SpeedoMeter Marker 183 | 184 | #### 🎬 Preview 185 | 186 | --- 187 | 188 | ![Default SpeedoMeterMarker](./assets/SpeedoMeterMarker.gif) 189 | 190 | #### Usage 191 | 192 | --- 193 | 194 | ```jsx 195 | import React, { useState } from 'react'; 196 | import { StyleSheet, View } from 'react-native'; 197 | import { RadialSlider } from 'react-native-radial-slider'; 198 | 199 | const SpeedoMeterVariant = () => { 200 | const [speed, setSpeed] = useState(0); 201 | 202 | return ( 203 | 204 | 211 | 212 | ); 213 | }; 214 | 215 | const styles = StyleSheet.create({ 216 | container: { 217 | flex: 1, 218 | justifyContent: 'center', 219 | }, 220 | }); 221 | 222 | export default SpeedoMeterVariant; 223 | ``` 224 | 225 | --- 226 | 227 | ## Properties 228 | 229 | | Prop | Default | Type | Description | RadialSlider | SpeedoMeter | 230 | | :-------------------- | :------------------------------------------------------------------------- | :------------- | :--------------------------------------------------------------------------------------- | ------------ | ----------- | 231 | | **min\*** | 0 | number | Minimum value | ✅ | ✅ | 232 | | **max\*** | 100 | number | Maximum value | ✅ | ✅ | 233 | | **value\*** | 0 | number | Show selection upto this value | ✅ | ✅ | 234 | | **onChange\*** | - | function | Callback function that invokes on change in track | ✅ | ✅ | 235 | | radius | 100 | number | Size of component | ✅ | ✅ | 236 | | startAngle | 270 | number [1-360] | The angle at which the circular slider should start from. | ✅ | ❌ | 237 | | step | 1 | number | Step value for component | ✅ | ❌ | 238 | | markerValue | - | number | Show marker on specific number | ✅ | ✅ | 239 | | title | - | string | Title for component | ✅ | ❌ | 240 | | subTitle | Goal | string | Subtitle for component | ✅ | ❌ | 241 | | unit | RadialSlider: 'kCal', SpeedoMeter: 'MB/S' | string | Unit for component | ✅ | ✅ | 242 | | thumbRadius | 18 | number | Radius for thumb | ✅ | ❌ | 243 | | thumbColor | #008ABC | string | Color for thumb | ✅ | ❌ | 244 | | thumbBorderWidth | 5 | number | Width for thumb | ✅ | ❌ | 245 | | thumbBorderColor | #FFFFFF | string | Border Color for thumb | ✅ | ❌ | 246 | | markerLineSize | 50 | number | Size of marker line | ✅ | ✅ | 247 | | sliderWidth | 18 | number | Width of slider | ✅ | ✅ | 248 | | sliderTrackColor | #E5E5E5 | string | Color of unselected slider track | ✅ | ✅ | 249 | | lineColor | #E5E5E5 | string | Color of unselected lines | ✅ | ✅ | 250 | | lineSpace | 3 | number | Space between each line | ✅ | ✅ | 251 | | linearGradient | [ { offset: '0%', color:'#ffaca6' }, { offset: '100%', color: '#EA4800' }] | object | Gradient color of selected track | ✅ | ✅ | 252 | | onComplete | - | function | Callback function which defines what to do after completion | ✅ | ✅ | 253 | | centerContentStyle | {} | object | Center content style | ✅ | ❌ | 254 | | titleStyle | {} | object | Status title container style | ✅ | ❌ | 255 | | subTitleStyle | {} | object | Status subtitle text style | ✅ | ❌ | 256 | | valueStyle | {} | object | Center value style | ✅ | ✅ | 257 | | buttonContainerStyle | {} | object | Button container style | ✅ | ❌ | 258 | | leftIconStyle | {} | object | Left Icon style | ✅ | ❌ | 259 | | rightIconStyle | {} | object | Right Icon style | ✅ | ❌ | 260 | | contentStyle | {} | object | Whole content style | ✅ | ✅ | 261 | | unitStyle | {} | object | Unit text style | ✅ | ✅ | 262 | | style | {} | object | Inner container style | ✅ | ✅ | 263 | | openingRadian | RadialSlider: Math.PI / 3 , SpeedoMeter:0.057 | number | Radian of component | ✅ | ✅ | 264 | | disabled | false | boolean | If true, buttons will be in disabled state | ✅ | ❌ | 265 | | isHideSlider | false | boolean | If true, slider will be hidden | ✅ | ✅ | 266 | | isHideCenterContent | false | boolean | If true, center content will be hidden | ✅ | ✅ | 267 | | isHideTitle | false | boolean | If true, title will be hidden | ✅ | ❌ | 268 | | isHideSubtitle | false | boolean | If true, subtitle will be hidden | ✅ | ❌ | 269 | | isHideValue | false | boolean | If true, value will be hidden | ✅ | ✅ | 270 | | isHideTailText | false | boolean | If true, tail text will be hidden | ✅ | ✅ | 271 | | isHideButtons | false | boolean | If true, buttons will be hidden | ✅ | ❌ | 272 | | isHideLines | false | boolean | If true,slider lines will be hidden | ✅ | ✅ | 273 | | isHideMarkerLine | false | boolean | If true, marked lines will be hidden | ✅ | ✅ | 274 | | fixedMarker | false | boolean | If true, marked value will be hidden | ✅ | ✅ | 275 | | variant | default | string | Different component variants `radial-circle-slider`, `speedometer`, `speedometer-marker` | ✅ | ✅ | 276 | | onPress | {} | function | Based on click value will be increased or decreased | ✅ | ❌ | 277 | | stroke | '#008ABC' | string | Color for button icon | ✅ | ❌ | 278 | | unitValueContentStyle | {} | object | Unit value content style | ❌ | ✅ | 279 | | markerCircleSize | 15 | number | Size for marker circle | ❌ | ✅ | 280 | | markerCircleColor | #E5E5E5 | string | Color for marker circle | ❌ | ✅ | 281 | | markerPositionY | 20 | number | Marker position for up and down | ❌ | ✅ | 282 | | markerPositionX | 20 | number | Marker position for right and left | ❌ | ✅ | 283 | | needleBackgroundColor | #A020F0 | string | Background color for needle | ❌ | ✅ | 284 | | needleColor | #175BAD | string | Color for needle | ❌ | ✅ | 285 | | needleBorderWidth | 1.5 | number | Width of needle border | ❌ | ✅ | 286 | | needleHeight | 30 | number | Height of needle | ❌ | ✅ | 287 | | markerValueInterval | 10 | number | Show number of value in sequence | ❌ | ✅ | 288 | | markerValueColor | #333333 | string | Color for marker value | ❌ | ✅ | 289 | | strokeLinecap | butt | string | Line terminations, can be butt, line, or square | ❌ | ✅ | 290 | 291 | --- 292 | 293 | ## Example 294 | 295 | A full working example project is here [Example](./example/src/App.tsx) 296 | 297 | ```sh 298 | yarn 299 | yarn example ios // For ios 300 | yarn example android // For Android 301 | ``` 302 | 303 | ## Find this library useful? ❤️ 304 | 305 | Support it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider/stargazers) for this repository.⭐ 306 | 307 | ## 🤝 How to Contribute 308 | 309 | We'd love to have you improve this library or fix a problem 💪 310 | Check out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing. 311 | 312 | ## Bugs / Feature requests / Feedbacks 313 | 314 | For bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider/issues) 315 | 316 | ## License 317 | 318 | - [MIT License](LICENSE) 319 | -------------------------------------------------------------------------------- /assets/RadialCircle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/assets/RadialCircle.gif -------------------------------------------------------------------------------- /assets/RadialSlider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/assets/RadialSlider.gif -------------------------------------------------------------------------------- /assets/RadialSliderExample.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/assets/RadialSliderExample.gif -------------------------------------------------------------------------------- /assets/SpeedoMeter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/assets/SpeedoMeter.gif -------------------------------------------------------------------------------- /assets/SpeedoMeterExample.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/assets/SpeedoMeterExample.gif -------------------------------------------------------------------------------- /assets/SpeedoMeterMarker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/assets/SpeedoMeterMarker.gif -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/assets/banner.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 -------------------------------------------------------------------------------- /example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /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 | ios/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | 37 | # node.js 38 | # 39 | node_modules/ 40 | npm-debug.log 41 | yarn-error.log 42 | yarn.lock 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 | **/fastlane/test_output 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # Ruby / CocoaPods 60 | /ios/Pods/ 61 | /vendor/bundle/ 62 | 63 | # Temporary files created by Metro to check the health of the file watcher 64 | .metro-health-check* -------------------------------------------------------------------------------- /example/.node-version: -------------------------------------------------------------------------------- 1 | 18 -------------------------------------------------------------------------------- /example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSameLine: true, 3 | bracketSpacing: true, 4 | bracketSameLine: true, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | arrowParens: 'avoid', 8 | }; 9 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby '2.7.5' 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.2' 7 | -------------------------------------------------------------------------------- /example/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.5) 5 | rexml 6 | activesupport (6.1.4.4) 7 | concurrent-ruby (~> 1.0, >= 1.0.2) 8 | i18n (>= 1.6, < 2) 9 | minitest (>= 5.1) 10 | tzinfo (~> 2.0) 11 | zeitwerk (~> 2.3) 12 | addressable (2.8.0) 13 | public_suffix (>= 2.0.2, < 5.0) 14 | algoliasearch (1.27.5) 15 | httpclient (~> 2.8, >= 2.8.3) 16 | json (>= 1.5.1) 17 | atomos (0.1.3) 18 | claide (1.1.0) 19 | cocoapods (1.11.2) 20 | addressable (~> 2.8) 21 | claide (>= 1.0.2, < 2.0) 22 | cocoapods-core (= 1.11.2) 23 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 24 | cocoapods-downloader (>= 1.4.0, < 2.0) 25 | cocoapods-plugins (>= 1.0.0, < 2.0) 26 | cocoapods-search (>= 1.0.0, < 2.0) 27 | cocoapods-trunk (>= 1.4.0, < 2.0) 28 | cocoapods-try (>= 1.1.0, < 2.0) 29 | colored2 (~> 3.1) 30 | escape (~> 0.0.4) 31 | fourflusher (>= 2.3.0, < 3.0) 32 | gh_inspector (~> 1.0) 33 | molinillo (~> 0.8.0) 34 | nap (~> 1.0) 35 | ruby-macho (>= 1.0, < 3.0) 36 | xcodeproj (>= 1.21.0, < 2.0) 37 | cocoapods-core (1.11.2) 38 | activesupport (>= 5.0, < 7) 39 | addressable (~> 2.8) 40 | algoliasearch (~> 1.0) 41 | concurrent-ruby (~> 1.1) 42 | fuzzy_match (~> 2.0.4) 43 | nap (~> 1.0) 44 | netrc (~> 0.11) 45 | public_suffix (~> 4.0) 46 | typhoeus (~> 1.0) 47 | cocoapods-deintegrate (1.0.5) 48 | cocoapods-downloader (1.5.1) 49 | cocoapods-plugins (1.0.0) 50 | nap 51 | cocoapods-search (1.0.1) 52 | cocoapods-trunk (1.6.0) 53 | nap (>= 0.8, < 2.0) 54 | netrc (~> 0.11) 55 | cocoapods-try (1.2.0) 56 | colored2 (3.1.2) 57 | concurrent-ruby (1.1.9) 58 | escape (0.0.4) 59 | ethon (0.15.0) 60 | ffi (>= 1.15.0) 61 | ffi (1.15.5) 62 | fourflusher (2.3.1) 63 | fuzzy_match (2.0.4) 64 | gh_inspector (1.1.3) 65 | httpclient (2.8.3) 66 | i18n (1.8.11) 67 | concurrent-ruby (~> 1.0) 68 | json (2.6.1) 69 | minitest (5.15.0) 70 | molinillo (0.8.0) 71 | nanaimo (0.3.0) 72 | nap (1.1.0) 73 | netrc (0.11.0) 74 | public_suffix (4.0.6) 75 | rexml (3.2.5) 76 | ruby-macho (2.5.1) 77 | typhoeus (1.4.0) 78 | ethon (>= 0.9.0) 79 | tzinfo (2.0.4) 80 | concurrent-ruby (~> 1.0) 81 | xcodeproj (1.21.0) 82 | CFPropertyList (>= 2.3.3, < 4.0) 83 | atomos (~> 0.1.3) 84 | claide (>= 1.0.2, < 2.0) 85 | colored2 (~> 3.1) 86 | nanaimo (~> 0.3.0) 87 | rexml (~> 3.2.4) 88 | zeitwerk (2.5.3) 89 | 90 | PLATFORMS 91 | ruby 92 | 93 | DEPENDENCIES 94 | cocoapods (~> 1.11, >= 1.11.2) 95 | 96 | RUBY VERSION 97 | ruby 2.7.5p203 98 | 99 | BUNDLED WITH 100 | 2.3.5 101 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # radial-slider demo app 2 | ## How to Run ? 3 | 4 | _Steps to run the demo app in ios and andorid_ 5 | 6 | 1. Install dependencies 7 | * cd to the project directory (example) 8 | ```bash 9 | yarn 10 | ``` 11 | 2. Build and Run 12 | * Run iOS app 13 | ```bash 14 | yarn ios 15 | ``` 16 | * Run Android app 17 | ```bash 18 | yarn android 19 | ``` -------------------------------------------------------------------------------- /example/android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.example", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.example", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "com.facebook.react" 3 | 4 | import com.android.build.OutputFile 5 | 6 | /** 7 | * This is the configuration block to customize your React Native Android app. 8 | * By default you don't need to apply any configuration, just uncomment the lines you need. 9 | */ 10 | react { 11 | /* Folders */ 12 | // The root of your project, i.e. where "package.json" lives. Default is '..' 13 | // root = file("../") 14 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native 15 | // reactNativeDir = file("../node_modules/react-native") 16 | // The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen 17 | // codegenDir = file("../node_modules/react-native-codegen") 18 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js 19 | // cliFile = file("../node_modules/react-native/cli.js") 20 | 21 | /* Variants */ 22 | // The list of variants to that are debuggable. For those we're going to 23 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 24 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 25 | // debuggableVariants = ["liteDebug", "prodDebug"] 26 | 27 | /* Bundling */ 28 | // A list containing the node command and its flags. Default is just 'node'. 29 | // nodeExecutableAndArgs = ["node"] 30 | // 31 | // The command to run when bundling. By default is 'bundle' 32 | // bundleCommand = "ram-bundle" 33 | // 34 | // The path to the CLI configuration file. Default is empty. 35 | // bundleConfig = file(../rn-cli.config.js) 36 | // 37 | // The name of the generated asset file containing your JS bundle 38 | // bundleAssetName = "MyApplication.android.bundle" 39 | // 40 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 41 | // entryFile = file("../js/MyApplication.android.js") 42 | // 43 | // A list of extra flags to pass to the 'bundle' commands. 44 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 45 | // extraPackagerArgs = [] 46 | 47 | /* Hermes Commands */ 48 | // The hermes compiler command to run. By default it is 'hermesc' 49 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 50 | // 51 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 52 | // hermesFlags = ["-O", "-output-source-map"] 53 | } 54 | 55 | /** 56 | * Set this to true to create four separate APKs instead of one, 57 | * one for each native architecture. This is useful if you don't 58 | * use App Bundles (https://developer.android.com/guide/app-bundle/) 59 | * and want to have separate APKs to upload to the Play Store. 60 | */ 61 | def enableSeparateBuildPerCPUArchitecture = false 62 | 63 | /** 64 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 65 | */ 66 | def enableProguardInReleaseBuilds = false 67 | 68 | /** 69 | * The preferred build flavor of JavaScriptCore (JSC) 70 | * 71 | * For example, to use the international variant, you can use: 72 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 73 | * 74 | * The international variant includes ICU i18n library and necessary data 75 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 76 | * give correct results when using with locales other than en-US. Note that 77 | * this variant is about 6MiB larger per architecture than default. 78 | */ 79 | def jscFlavor = 'org.webkit:android-jsc:+' 80 | 81 | /** 82 | * Private function to get the list of Native Architectures you want to build. 83 | * This reads the value from reactNativeArchitectures in your gradle.properties 84 | * file and works together with the --active-arch-only flag of react-native run-android. 85 | */ 86 | def reactNativeArchitectures() { 87 | def value = project.getProperties().get("reactNativeArchitectures") 88 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] 89 | } 90 | 91 | android { 92 | ndkVersion rootProject.ext.ndkVersion 93 | 94 | compileSdkVersion rootProject.ext.compileSdkVersion 95 | 96 | namespace "com.example" 97 | defaultConfig { 98 | applicationId "com.example" 99 | minSdkVersion rootProject.ext.minSdkVersion 100 | targetSdkVersion rootProject.ext.targetSdkVersion 101 | versionCode 1 102 | versionName "1.0" 103 | } 104 | 105 | splits { 106 | abi { 107 | reset() 108 | enable enableSeparateBuildPerCPUArchitecture 109 | universalApk false // If true, also generate a universal APK 110 | include (*reactNativeArchitectures()) 111 | } 112 | } 113 | signingConfigs { 114 | debug { 115 | storeFile file('debug.keystore') 116 | storePassword 'android' 117 | keyAlias 'androiddebugkey' 118 | keyPassword 'android' 119 | } 120 | } 121 | buildTypes { 122 | debug { 123 | signingConfig signingConfigs.debug 124 | } 125 | release { 126 | // Caution! In production, you need to generate your own keystore file. 127 | // see https://reactnative.dev/docs/signed-apk-android. 128 | signingConfig signingConfigs.debug 129 | minifyEnabled enableProguardInReleaseBuilds 130 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 131 | } 132 | } 133 | 134 | // applicationVariants are e.g. debug, release 135 | applicationVariants.all { variant -> 136 | variant.outputs.each { output -> 137 | // For each separate APK per architecture, set a unique version code as described here: 138 | // https://developer.android.com/studio/build/configure-apk-splits.html 139 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 140 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 141 | def abi = output.getFilter(OutputFile.ABI) 142 | if (abi != null) { // null for the universal-debug, universal-release variants 143 | output.versionCodeOverride = 144 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 145 | } 146 | 147 | } 148 | } 149 | } 150 | 151 | dependencies { 152 | // The version of react-native is set by the React Native Gradle Plugin 153 | implementation("com.facebook.react:react-android") 154 | 155 | implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0") 156 | 157 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") 158 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 159 | exclude group:'com.squareup.okhttp3', module:'okhttp' 160 | } 161 | 162 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") 163 | if (hermesEnabled.toBoolean()) { 164 | implementation("com.facebook.react:hermes-android") 165 | } else { 166 | implementation jscFlavor 167 | } 168 | } 169 | 170 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 171 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/debug.keystore -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/android/app/src/debug/java/com/example/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.example; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 21 | import com.facebook.react.ReactInstanceEventListener; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | /** 28 | * Class responsible of loading Flipper inside your React Native application. This is the debug 29 | * flavor of it. Here you can add your own plugins and customize the Flipper setup. 30 | */ 31 | public class ReactNativeFlipper { 32 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 33 | if (FlipperUtils.shouldEnableFlipper(context)) { 34 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 35 | 36 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 37 | client.addPlugin(new DatabasesFlipperPlugin(context)); 38 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 39 | client.addPlugin(CrashReporterPlugin.getInstance()); 40 | 41 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 42 | NetworkingModule.setCustomClientBuilder( 43 | new NetworkingModule.CustomClientBuilder() { 44 | @Override 45 | public void apply(OkHttpClient.Builder builder) { 46 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 47 | } 48 | }); 49 | client.addPlugin(networkFlipperPlugin); 50 | client.start(); 51 | 52 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 53 | // Hence we run if after all native modules have been initialized 54 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 55 | if (reactContext == null) { 56 | reactInstanceManager.addReactInstanceEventListener( 57 | new ReactInstanceEventListener() { 58 | @Override 59 | public void onReactContextInitialized(ReactContext reactContext) { 60 | reactInstanceManager.removeReactInstanceEventListener(this); 61 | reactContext.runOnNativeModulesQueueThread( 62 | new Runnable() { 63 | @Override 64 | public void run() { 65 | client.addPlugin(new FrescoFlipperPlugin()); 66 | } 67 | }); 68 | } 69 | }); 70 | } else { 71 | client.addPlugin(new FrescoFlipperPlugin()); 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate; 7 | 8 | public class MainActivity extends ReactActivity { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | @Override 15 | protected String getMainComponentName() { 16 | return "example"; 17 | } 18 | 19 | /** 20 | * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link 21 | * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React 22 | * (aka React 18) with two boolean flags. 23 | */ 24 | @Override 25 | protected ReactActivityDelegate createReactActivityDelegate() { 26 | return new DefaultReactActivityDelegate( 27 | this, 28 | getMainComponentName(), 29 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 30 | DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled 31 | // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18). 32 | DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import android.app.Application; 4 | import com.facebook.react.PackageList; 5 | import com.facebook.react.ReactApplication; 6 | import com.facebook.react.ReactNativeHost; 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 9 | import com.facebook.react.defaults.DefaultReactNativeHost; 10 | import com.facebook.soloader.SoLoader; 11 | import java.util.List; 12 | 13 | public class MainApplication extends Application implements ReactApplication { 14 | 15 | private final ReactNativeHost mReactNativeHost = 16 | new DefaultReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | @SuppressWarnings("UnnecessaryLocalVariable") 25 | List packages = new PackageList(this).getPackages(); 26 | // Packages that cannot be autolinked yet can be added manually here, for example: 27 | // packages.add(new MyReactNativePackage()); 28 | return packages; 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | 36 | @Override 37 | protected boolean isNewArchEnabled() { 38 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 39 | } 40 | 41 | @Override 42 | protected Boolean isHermesEnabled() { 43 | return BuildConfig.IS_HERMES_ENABLED; 44 | } 45 | }; 46 | 47 | @Override 48 | public ReactNativeHost getReactNativeHost() { 49 | return mReactNativeHost; 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | SoLoader.init(this, /* native exopackage */ false); 56 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 57 | // If you opted-in for the New Architecture, we load the native entry point for this app. 58 | DefaultNewArchitectureEntryPoint.load(); 59 | } 60 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | example 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "33.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 33 8 | targetSdkVersion = 33 9 | kotlinVersion = '1.6.10' 10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. 11 | ndkVersion = "23.1.7779620" 12 | } 13 | repositories { 14 | google() 15 | mavenCentral() 16 | } 17 | dependencies { 18 | classpath("com.android.tools.build:gradle:7.3.1") 19 | classpath("com.facebook.react:react-native-gradle-plugin") 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | maven { 26 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 27 | url "$rootDir/../node_modules/react-native/android" 28 | } 29 | maven { 30 | // Android JSC is installed from npm 31 | url "$rootDir/../node_modules/jsc-android/dist" 32 | } 33 | mavenCentral { 34 | // We don't want to fetch react-native from Maven Central as there are 35 | // older versions over there. 36 | content { 37 | excludeGroup "com.facebook.react" 38 | } 39 | } 40 | google() 41 | maven { url 'https://www.jitpack.io' } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | 13 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 14 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 15 | 16 | # When configured, Gradle will run in incubating parallel mode. 17 | # This option should only be used with decoupled projects. More details, visit 18 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 19 | # org.gradle.parallel=true 20 | 21 | # AndroidX package structure to make it clearer which packages are bundled with the 22 | # Android operating system, and which are packaged with your app's APK 23 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 24 | android.useAndroidX=true 25 | # Automatically convert third-party libraries to use AndroidX 26 | android.enableJetifier=true 27 | 28 | # Version of flipper SDK to use with React Native 29 | FLIPPER_VERSION=0.125.0 30 | 31 | # Use this property to specify which architecture you want to build. 32 | # You can also override it from the CLI using 33 | # ./gradlew -PreactNativeArchitectures=x86_64 34 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 35 | 36 | # Use this property to enable support to the new architecture. 37 | # This will allow you to use TurboModules and the Fabric render in 38 | # your application. You should enable this flag either if you want 39 | # to write custom TurboModules/Fabric components OR use libraries that 40 | # are providing them. 41 | newArchEnabled=false 42 | 43 | # Use this property to enable or disable the Hermes JS engine. 44 | # If set to false, you will be using JSC instead. 45 | hermesEnabled=true 46 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-radial-slider/caeefac0173cd5f6fe1a3dc91d14a1f424313473/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'example' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | 4 | include ':app' 5 | includeBuild('../node_modules/react-native-gradle-plugin') -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "displayName": "example" 4 | } 5 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | } 4 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import { AppRegistry } from 'react-native' 6 | 7 | import { name as appName } from './app.json' 8 | import App from './src/App' 9 | 10 | AppRegistry.registerComponent(appName, () => App) 11 | -------------------------------------------------------------------------------- /example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, min_ios_version_supported 5 | 6 | prepare_react_native_project! 7 | 8 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 9 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 10 | # 11 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 12 | # ```js 13 | # module.exports = { 14 | # dependencies: { 15 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 16 | # ``` 17 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 18 | 19 | linkage = ENV['USE_FRAMEWORKS'] 20 | if linkage != nil 21 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 22 | use_frameworks! :linkage => linkage.to_sym 23 | end 24 | 25 | target 'example' do 26 | config = use_native_modules! 27 | 28 | # Flags change depending on the env values. 29 | flags = get_default_flags() 30 | 31 | use_react_native!( 32 | :path => config[:reactNativePath], 33 | # Hermes is now enabled by default. Disable by setting this flag to false. 34 | # Upcoming versions of React Native may rely on get_default_flags(), but 35 | # we make it explicit here to aid in the React Native upgrade process. 36 | :hermes_enabled => flags[:hermes_enabled], 37 | :fabric_enabled => flags[:fabric_enabled], 38 | # Enables Flipper. 39 | # 40 | # Note that if you have use_frameworks! enabled, Flipper will not work and 41 | # you should disable the next line. 42 | :flipper_configuration => flipper_config, 43 | # An absolute path to your application root. 44 | :app_path => "#{Pod::Config.instance.installation_root}/.." 45 | ) 46 | 47 | post_install do |installer| 48 | installer.pods_project.build_configurations.each do |config| 49 | config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64" 50 | end 51 | react_native_post_install( 52 | installer, 53 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 54 | # necessary for Mac Catalyst builds 55 | :mac_catalyst_enabled => false 56 | ) 57 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 58 | end 59 | end 60 | -------------------------------------------------------------------------------- /example/ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost (1.76.0) 3 | - CocoaAsyncSocket (7.6.5) 4 | - DoubleConversion (1.1.6) 5 | - FBLazyVector (0.71.16) 6 | - FBReactNativeSpec (0.71.16): 7 | - RCT-Folly (= 2021.07.22.00) 8 | - RCTRequired (= 0.71.16) 9 | - RCTTypeSafety (= 0.71.16) 10 | - React-Core (= 0.71.16) 11 | - React-jsi (= 0.71.16) 12 | - ReactCommon/turbomodule/core (= 0.71.16) 13 | - Flipper (0.125.0): 14 | - Flipper-Folly (~> 2.6) 15 | - Flipper-RSocket (~> 1.4) 16 | - Flipper-Boost-iOSX (1.76.0.1.11) 17 | - Flipper-DoubleConversion (3.2.0.1) 18 | - Flipper-Fmt (7.1.7) 19 | - Flipper-Folly (2.6.10): 20 | - Flipper-Boost-iOSX 21 | - Flipper-DoubleConversion 22 | - Flipper-Fmt (= 7.1.7) 23 | - Flipper-Glog 24 | - libevent (~> 2.1.12) 25 | - OpenSSL-Universal (= 1.1.1100) 26 | - Flipper-Glog (0.5.0.5) 27 | - Flipper-PeerTalk (0.0.4) 28 | - Flipper-RSocket (1.4.3): 29 | - Flipper-Folly (~> 2.6) 30 | - FlipperKit (0.125.0): 31 | - FlipperKit/Core (= 0.125.0) 32 | - FlipperKit/Core (0.125.0): 33 | - Flipper (~> 0.125.0) 34 | - FlipperKit/CppBridge 35 | - FlipperKit/FBCxxFollyDynamicConvert 36 | - FlipperKit/FBDefines 37 | - FlipperKit/FKPortForwarding 38 | - SocketRocket (~> 0.6.0) 39 | - FlipperKit/CppBridge (0.125.0): 40 | - Flipper (~> 0.125.0) 41 | - FlipperKit/FBCxxFollyDynamicConvert (0.125.0): 42 | - Flipper-Folly (~> 2.6) 43 | - FlipperKit/FBDefines (0.125.0) 44 | - FlipperKit/FKPortForwarding (0.125.0): 45 | - CocoaAsyncSocket (~> 7.6) 46 | - Flipper-PeerTalk (~> 0.0.4) 47 | - FlipperKit/FlipperKitHighlightOverlay (0.125.0) 48 | - FlipperKit/FlipperKitLayoutHelpers (0.125.0): 49 | - FlipperKit/Core 50 | - FlipperKit/FlipperKitHighlightOverlay 51 | - FlipperKit/FlipperKitLayoutTextSearchable 52 | - FlipperKit/FlipperKitLayoutIOSDescriptors (0.125.0): 53 | - FlipperKit/Core 54 | - FlipperKit/FlipperKitHighlightOverlay 55 | - FlipperKit/FlipperKitLayoutHelpers 56 | - YogaKit (~> 1.18) 57 | - FlipperKit/FlipperKitLayoutPlugin (0.125.0): 58 | - FlipperKit/Core 59 | - FlipperKit/FlipperKitHighlightOverlay 60 | - FlipperKit/FlipperKitLayoutHelpers 61 | - FlipperKit/FlipperKitLayoutIOSDescriptors 62 | - FlipperKit/FlipperKitLayoutTextSearchable 63 | - YogaKit (~> 1.18) 64 | - FlipperKit/FlipperKitLayoutTextSearchable (0.125.0) 65 | - FlipperKit/FlipperKitNetworkPlugin (0.125.0): 66 | - FlipperKit/Core 67 | - FlipperKit/FlipperKitReactPlugin (0.125.0): 68 | - FlipperKit/Core 69 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.125.0): 70 | - FlipperKit/Core 71 | - FlipperKit/SKIOSNetworkPlugin (0.125.0): 72 | - FlipperKit/Core 73 | - FlipperKit/FlipperKitNetworkPlugin 74 | - fmt (6.2.1) 75 | - glog (0.3.5) 76 | - hermes-engine (0.71.16): 77 | - hermes-engine/Pre-built (= 0.71.16) 78 | - hermes-engine/Pre-built (0.71.16) 79 | - libevent (2.1.12) 80 | - OpenSSL-Universal (1.1.1100) 81 | - RCT-Folly (2021.07.22.00): 82 | - boost 83 | - DoubleConversion 84 | - fmt (~> 6.2.1) 85 | - glog 86 | - RCT-Folly/Default (= 2021.07.22.00) 87 | - RCT-Folly/Default (2021.07.22.00): 88 | - boost 89 | - DoubleConversion 90 | - fmt (~> 6.2.1) 91 | - glog 92 | - RCT-Folly/Futures (2021.07.22.00): 93 | - boost 94 | - DoubleConversion 95 | - fmt (~> 6.2.1) 96 | - glog 97 | - libevent 98 | - RCTRequired (0.71.16) 99 | - RCTTypeSafety (0.71.16): 100 | - FBLazyVector (= 0.71.16) 101 | - RCTRequired (= 0.71.16) 102 | - React-Core (= 0.71.16) 103 | - React (0.71.16): 104 | - React-Core (= 0.71.16) 105 | - React-Core/DevSupport (= 0.71.16) 106 | - React-Core/RCTWebSocket (= 0.71.16) 107 | - React-RCTActionSheet (= 0.71.16) 108 | - React-RCTAnimation (= 0.71.16) 109 | - React-RCTBlob (= 0.71.16) 110 | - React-RCTImage (= 0.71.16) 111 | - React-RCTLinking (= 0.71.16) 112 | - React-RCTNetwork (= 0.71.16) 113 | - React-RCTSettings (= 0.71.16) 114 | - React-RCTText (= 0.71.16) 115 | - React-RCTVibration (= 0.71.16) 116 | - React-callinvoker (0.71.16) 117 | - React-Codegen (0.71.16): 118 | - FBReactNativeSpec 119 | - hermes-engine 120 | - RCT-Folly 121 | - RCTRequired 122 | - RCTTypeSafety 123 | - React-Core 124 | - React-jsi 125 | - React-jsiexecutor 126 | - ReactCommon/turbomodule/bridging 127 | - ReactCommon/turbomodule/core 128 | - React-Core (0.71.16): 129 | - glog 130 | - hermes-engine 131 | - RCT-Folly (= 2021.07.22.00) 132 | - React-Core/Default (= 0.71.16) 133 | - React-cxxreact (= 0.71.16) 134 | - React-hermes 135 | - React-jsi (= 0.71.16) 136 | - React-jsiexecutor (= 0.71.16) 137 | - React-perflogger (= 0.71.16) 138 | - Yoga 139 | - React-Core/CoreModulesHeaders (0.71.16): 140 | - glog 141 | - hermes-engine 142 | - RCT-Folly (= 2021.07.22.00) 143 | - React-Core/Default 144 | - React-cxxreact (= 0.71.16) 145 | - React-hermes 146 | - React-jsi (= 0.71.16) 147 | - React-jsiexecutor (= 0.71.16) 148 | - React-perflogger (= 0.71.16) 149 | - Yoga 150 | - React-Core/Default (0.71.16): 151 | - glog 152 | - hermes-engine 153 | - RCT-Folly (= 2021.07.22.00) 154 | - React-cxxreact (= 0.71.16) 155 | - React-hermes 156 | - React-jsi (= 0.71.16) 157 | - React-jsiexecutor (= 0.71.16) 158 | - React-perflogger (= 0.71.16) 159 | - Yoga 160 | - React-Core/DevSupport (0.71.16): 161 | - glog 162 | - hermes-engine 163 | - RCT-Folly (= 2021.07.22.00) 164 | - React-Core/Default (= 0.71.16) 165 | - React-Core/RCTWebSocket (= 0.71.16) 166 | - React-cxxreact (= 0.71.16) 167 | - React-hermes 168 | - React-jsi (= 0.71.16) 169 | - React-jsiexecutor (= 0.71.16) 170 | - React-jsinspector (= 0.71.16) 171 | - React-perflogger (= 0.71.16) 172 | - Yoga 173 | - React-Core/RCTActionSheetHeaders (0.71.16): 174 | - glog 175 | - hermes-engine 176 | - RCT-Folly (= 2021.07.22.00) 177 | - React-Core/Default 178 | - React-cxxreact (= 0.71.16) 179 | - React-hermes 180 | - React-jsi (= 0.71.16) 181 | - React-jsiexecutor (= 0.71.16) 182 | - React-perflogger (= 0.71.16) 183 | - Yoga 184 | - React-Core/RCTAnimationHeaders (0.71.16): 185 | - glog 186 | - hermes-engine 187 | - RCT-Folly (= 2021.07.22.00) 188 | - React-Core/Default 189 | - React-cxxreact (= 0.71.16) 190 | - React-hermes 191 | - React-jsi (= 0.71.16) 192 | - React-jsiexecutor (= 0.71.16) 193 | - React-perflogger (= 0.71.16) 194 | - Yoga 195 | - React-Core/RCTBlobHeaders (0.71.16): 196 | - glog 197 | - hermes-engine 198 | - RCT-Folly (= 2021.07.22.00) 199 | - React-Core/Default 200 | - React-cxxreact (= 0.71.16) 201 | - React-hermes 202 | - React-jsi (= 0.71.16) 203 | - React-jsiexecutor (= 0.71.16) 204 | - React-perflogger (= 0.71.16) 205 | - Yoga 206 | - React-Core/RCTImageHeaders (0.71.16): 207 | - glog 208 | - hermes-engine 209 | - RCT-Folly (= 2021.07.22.00) 210 | - React-Core/Default 211 | - React-cxxreact (= 0.71.16) 212 | - React-hermes 213 | - React-jsi (= 0.71.16) 214 | - React-jsiexecutor (= 0.71.16) 215 | - React-perflogger (= 0.71.16) 216 | - Yoga 217 | - React-Core/RCTLinkingHeaders (0.71.16): 218 | - glog 219 | - hermes-engine 220 | - RCT-Folly (= 2021.07.22.00) 221 | - React-Core/Default 222 | - React-cxxreact (= 0.71.16) 223 | - React-hermes 224 | - React-jsi (= 0.71.16) 225 | - React-jsiexecutor (= 0.71.16) 226 | - React-perflogger (= 0.71.16) 227 | - Yoga 228 | - React-Core/RCTNetworkHeaders (0.71.16): 229 | - glog 230 | - hermes-engine 231 | - RCT-Folly (= 2021.07.22.00) 232 | - React-Core/Default 233 | - React-cxxreact (= 0.71.16) 234 | - React-hermes 235 | - React-jsi (= 0.71.16) 236 | - React-jsiexecutor (= 0.71.16) 237 | - React-perflogger (= 0.71.16) 238 | - Yoga 239 | - React-Core/RCTSettingsHeaders (0.71.16): 240 | - glog 241 | - hermes-engine 242 | - RCT-Folly (= 2021.07.22.00) 243 | - React-Core/Default 244 | - React-cxxreact (= 0.71.16) 245 | - React-hermes 246 | - React-jsi (= 0.71.16) 247 | - React-jsiexecutor (= 0.71.16) 248 | - React-perflogger (= 0.71.16) 249 | - Yoga 250 | - React-Core/RCTTextHeaders (0.71.16): 251 | - glog 252 | - hermes-engine 253 | - RCT-Folly (= 2021.07.22.00) 254 | - React-Core/Default 255 | - React-cxxreact (= 0.71.16) 256 | - React-hermes 257 | - React-jsi (= 0.71.16) 258 | - React-jsiexecutor (= 0.71.16) 259 | - React-perflogger (= 0.71.16) 260 | - Yoga 261 | - React-Core/RCTVibrationHeaders (0.71.16): 262 | - glog 263 | - hermes-engine 264 | - RCT-Folly (= 2021.07.22.00) 265 | - React-Core/Default 266 | - React-cxxreact (= 0.71.16) 267 | - React-hermes 268 | - React-jsi (= 0.71.16) 269 | - React-jsiexecutor (= 0.71.16) 270 | - React-perflogger (= 0.71.16) 271 | - Yoga 272 | - React-Core/RCTWebSocket (0.71.16): 273 | - glog 274 | - hermes-engine 275 | - RCT-Folly (= 2021.07.22.00) 276 | - React-Core/Default (= 0.71.16) 277 | - React-cxxreact (= 0.71.16) 278 | - React-hermes 279 | - React-jsi (= 0.71.16) 280 | - React-jsiexecutor (= 0.71.16) 281 | - React-perflogger (= 0.71.16) 282 | - Yoga 283 | - React-CoreModules (0.71.16): 284 | - RCT-Folly (= 2021.07.22.00) 285 | - RCTTypeSafety (= 0.71.16) 286 | - React-Codegen (= 0.71.16) 287 | - React-Core/CoreModulesHeaders (= 0.71.16) 288 | - React-jsi (= 0.71.16) 289 | - React-RCTBlob 290 | - React-RCTImage (= 0.71.16) 291 | - ReactCommon/turbomodule/core (= 0.71.16) 292 | - React-cxxreact (0.71.16): 293 | - boost (= 1.76.0) 294 | - DoubleConversion 295 | - glog 296 | - hermes-engine 297 | - RCT-Folly (= 2021.07.22.00) 298 | - React-callinvoker (= 0.71.16) 299 | - React-jsi (= 0.71.16) 300 | - React-jsinspector (= 0.71.16) 301 | - React-logger (= 0.71.16) 302 | - React-perflogger (= 0.71.16) 303 | - React-runtimeexecutor (= 0.71.16) 304 | - React-hermes (0.71.16): 305 | - DoubleConversion 306 | - glog 307 | - hermes-engine 308 | - RCT-Folly (= 2021.07.22.00) 309 | - RCT-Folly/Futures (= 2021.07.22.00) 310 | - React-cxxreact (= 0.71.16) 311 | - React-jsi 312 | - React-jsiexecutor (= 0.71.16) 313 | - React-jsinspector (= 0.71.16) 314 | - React-perflogger (= 0.71.16) 315 | - React-jsi (0.71.16): 316 | - boost (= 1.76.0) 317 | - DoubleConversion 318 | - glog 319 | - hermes-engine 320 | - RCT-Folly (= 2021.07.22.00) 321 | - React-jsiexecutor (0.71.16): 322 | - DoubleConversion 323 | - glog 324 | - hermes-engine 325 | - RCT-Folly (= 2021.07.22.00) 326 | - React-cxxreact (= 0.71.16) 327 | - React-jsi (= 0.71.16) 328 | - React-perflogger (= 0.71.16) 329 | - React-jsinspector (0.71.16) 330 | - React-logger (0.71.16): 331 | - glog 332 | - React-perflogger (0.71.16) 333 | - React-RCTActionSheet (0.71.16): 334 | - React-Core/RCTActionSheetHeaders (= 0.71.16) 335 | - React-RCTAnimation (0.71.16): 336 | - RCT-Folly (= 2021.07.22.00) 337 | - RCTTypeSafety (= 0.71.16) 338 | - React-Codegen (= 0.71.16) 339 | - React-Core/RCTAnimationHeaders (= 0.71.16) 340 | - React-jsi (= 0.71.16) 341 | - ReactCommon/turbomodule/core (= 0.71.16) 342 | - React-RCTAppDelegate (0.71.16): 343 | - RCT-Folly 344 | - RCTRequired 345 | - RCTTypeSafety 346 | - React-Core 347 | - ReactCommon/turbomodule/core 348 | - React-RCTBlob (0.71.16): 349 | - hermes-engine 350 | - RCT-Folly (= 2021.07.22.00) 351 | - React-Codegen (= 0.71.16) 352 | - React-Core/RCTBlobHeaders (= 0.71.16) 353 | - React-Core/RCTWebSocket (= 0.71.16) 354 | - React-jsi (= 0.71.16) 355 | - React-RCTNetwork (= 0.71.16) 356 | - ReactCommon/turbomodule/core (= 0.71.16) 357 | - React-RCTImage (0.71.16): 358 | - RCT-Folly (= 2021.07.22.00) 359 | - RCTTypeSafety (= 0.71.16) 360 | - React-Codegen (= 0.71.16) 361 | - React-Core/RCTImageHeaders (= 0.71.16) 362 | - React-jsi (= 0.71.16) 363 | - React-RCTNetwork (= 0.71.16) 364 | - ReactCommon/turbomodule/core (= 0.71.16) 365 | - React-RCTLinking (0.71.16): 366 | - React-Codegen (= 0.71.16) 367 | - React-Core/RCTLinkingHeaders (= 0.71.16) 368 | - React-jsi (= 0.71.16) 369 | - ReactCommon/turbomodule/core (= 0.71.16) 370 | - React-RCTNetwork (0.71.16): 371 | - RCT-Folly (= 2021.07.22.00) 372 | - RCTTypeSafety (= 0.71.16) 373 | - React-Codegen (= 0.71.16) 374 | - React-Core/RCTNetworkHeaders (= 0.71.16) 375 | - React-jsi (= 0.71.16) 376 | - ReactCommon/turbomodule/core (= 0.71.16) 377 | - React-RCTSettings (0.71.16): 378 | - RCT-Folly (= 2021.07.22.00) 379 | - RCTTypeSafety (= 0.71.16) 380 | - React-Codegen (= 0.71.16) 381 | - React-Core/RCTSettingsHeaders (= 0.71.16) 382 | - React-jsi (= 0.71.16) 383 | - ReactCommon/turbomodule/core (= 0.71.16) 384 | - React-RCTText (0.71.16): 385 | - React-Core/RCTTextHeaders (= 0.71.16) 386 | - React-RCTVibration (0.71.16): 387 | - RCT-Folly (= 2021.07.22.00) 388 | - React-Codegen (= 0.71.16) 389 | - React-Core/RCTVibrationHeaders (= 0.71.16) 390 | - React-jsi (= 0.71.16) 391 | - ReactCommon/turbomodule/core (= 0.71.16) 392 | - React-runtimeexecutor (0.71.16): 393 | - React-jsi (= 0.71.16) 394 | - ReactCommon/turbomodule/bridging (0.71.16): 395 | - DoubleConversion 396 | - glog 397 | - hermes-engine 398 | - RCT-Folly (= 2021.07.22.00) 399 | - React-callinvoker (= 0.71.16) 400 | - React-Core (= 0.71.16) 401 | - React-cxxreact (= 0.71.16) 402 | - React-jsi (= 0.71.16) 403 | - React-logger (= 0.71.16) 404 | - React-perflogger (= 0.71.16) 405 | - ReactCommon/turbomodule/core (0.71.16): 406 | - DoubleConversion 407 | - glog 408 | - hermes-engine 409 | - RCT-Folly (= 2021.07.22.00) 410 | - React-callinvoker (= 0.71.16) 411 | - React-Core (= 0.71.16) 412 | - React-cxxreact (= 0.71.16) 413 | - React-jsi (= 0.71.16) 414 | - React-logger (= 0.71.16) 415 | - React-perflogger (= 0.71.16) 416 | - RNSVG (13.14.0): 417 | - React-Core 418 | - SocketRocket (0.6.1) 419 | - Yoga (1.14.0) 420 | - YogaKit (1.18.1): 421 | - Yoga (~> 1.14) 422 | 423 | DEPENDENCIES: 424 | - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) 425 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 426 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 427 | - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) 428 | - Flipper (= 0.125.0) 429 | - Flipper-Boost-iOSX (= 1.76.0.1.11) 430 | - Flipper-DoubleConversion (= 3.2.0.1) 431 | - Flipper-Fmt (= 7.1.7) 432 | - Flipper-Folly (= 2.6.10) 433 | - Flipper-Glog (= 0.5.0.5) 434 | - Flipper-PeerTalk (= 0.0.4) 435 | - Flipper-RSocket (= 1.4.3) 436 | - FlipperKit (= 0.125.0) 437 | - FlipperKit/Core (= 0.125.0) 438 | - FlipperKit/CppBridge (= 0.125.0) 439 | - FlipperKit/FBCxxFollyDynamicConvert (= 0.125.0) 440 | - FlipperKit/FBDefines (= 0.125.0) 441 | - FlipperKit/FKPortForwarding (= 0.125.0) 442 | - FlipperKit/FlipperKitHighlightOverlay (= 0.125.0) 443 | - FlipperKit/FlipperKitLayoutPlugin (= 0.125.0) 444 | - FlipperKit/FlipperKitLayoutTextSearchable (= 0.125.0) 445 | - FlipperKit/FlipperKitNetworkPlugin (= 0.125.0) 446 | - FlipperKit/FlipperKitReactPlugin (= 0.125.0) 447 | - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.125.0) 448 | - FlipperKit/SKIOSNetworkPlugin (= 0.125.0) 449 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 450 | - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`) 451 | - libevent (~> 2.1.12) 452 | - OpenSSL-Universal (= 1.1.1100) 453 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 454 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) 455 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 456 | - React (from `../node_modules/react-native/`) 457 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) 458 | - React-Codegen (from `build/generated/ios`) 459 | - React-Core (from `../node_modules/react-native/`) 460 | - React-Core/DevSupport (from `../node_modules/react-native/`) 461 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 462 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 463 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 464 | - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`) 465 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 466 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 467 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 468 | - React-logger (from `../node_modules/react-native/ReactCommon/logger`) 469 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) 470 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 471 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 472 | - React-RCTAppDelegate (from `../node_modules/react-native/Libraries/AppDelegate`) 473 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 474 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 475 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 476 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 477 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 478 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 479 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 480 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) 481 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 482 | - RNSVG (from `../node_modules/react-native-svg`) 483 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 484 | 485 | SPEC REPOS: 486 | trunk: 487 | - CocoaAsyncSocket 488 | - Flipper 489 | - Flipper-Boost-iOSX 490 | - Flipper-DoubleConversion 491 | - Flipper-Fmt 492 | - Flipper-Folly 493 | - Flipper-Glog 494 | - Flipper-PeerTalk 495 | - Flipper-RSocket 496 | - FlipperKit 497 | - fmt 498 | - libevent 499 | - OpenSSL-Universal 500 | - SocketRocket 501 | - YogaKit 502 | 503 | EXTERNAL SOURCES: 504 | boost: 505 | :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec" 506 | DoubleConversion: 507 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 508 | FBLazyVector: 509 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 510 | FBReactNativeSpec: 511 | :path: "../node_modules/react-native/React/FBReactNativeSpec" 512 | glog: 513 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 514 | hermes-engine: 515 | :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec" 516 | RCT-Folly: 517 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" 518 | RCTRequired: 519 | :path: "../node_modules/react-native/Libraries/RCTRequired" 520 | RCTTypeSafety: 521 | :path: "../node_modules/react-native/Libraries/TypeSafety" 522 | React: 523 | :path: "../node_modules/react-native/" 524 | React-callinvoker: 525 | :path: "../node_modules/react-native/ReactCommon/callinvoker" 526 | React-Codegen: 527 | :path: build/generated/ios 528 | React-Core: 529 | :path: "../node_modules/react-native/" 530 | React-CoreModules: 531 | :path: "../node_modules/react-native/React/CoreModules" 532 | React-cxxreact: 533 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 534 | React-hermes: 535 | :path: "../node_modules/react-native/ReactCommon/hermes" 536 | React-jsi: 537 | :path: "../node_modules/react-native/ReactCommon/jsi" 538 | React-jsiexecutor: 539 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 540 | React-jsinspector: 541 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 542 | React-logger: 543 | :path: "../node_modules/react-native/ReactCommon/logger" 544 | React-perflogger: 545 | :path: "../node_modules/react-native/ReactCommon/reactperflogger" 546 | React-RCTActionSheet: 547 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 548 | React-RCTAnimation: 549 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 550 | React-RCTAppDelegate: 551 | :path: "../node_modules/react-native/Libraries/AppDelegate" 552 | React-RCTBlob: 553 | :path: "../node_modules/react-native/Libraries/Blob" 554 | React-RCTImage: 555 | :path: "../node_modules/react-native/Libraries/Image" 556 | React-RCTLinking: 557 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 558 | React-RCTNetwork: 559 | :path: "../node_modules/react-native/Libraries/Network" 560 | React-RCTSettings: 561 | :path: "../node_modules/react-native/Libraries/Settings" 562 | React-RCTText: 563 | :path: "../node_modules/react-native/Libraries/Text" 564 | React-RCTVibration: 565 | :path: "../node_modules/react-native/Libraries/Vibration" 566 | React-runtimeexecutor: 567 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" 568 | ReactCommon: 569 | :path: "../node_modules/react-native/ReactCommon" 570 | RNSVG: 571 | :path: "../node_modules/react-native-svg" 572 | Yoga: 573 | :path: "../node_modules/react-native/ReactCommon/yoga" 574 | 575 | SPEC CHECKSUMS: 576 | boost: 7dcd2de282d72e344012f7d6564d024930a6a440 577 | CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 578 | DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 579 | FBLazyVector: 9840513ec2766e31fb9e34c2dabb2c4671400fcd 580 | FBReactNativeSpec: 76141e46f67b395d7d4e94925dfeba0dbd680ba1 581 | Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0 582 | Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c 583 | Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30 584 | Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b 585 | Flipper-Folly: 584845625005ff068a6ebf41f857f468decd26b3 586 | Flipper-Glog: 70c50ce58ddaf67dc35180db05f191692570f446 587 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 588 | Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541 589 | FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86 590 | fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 591 | glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b 592 | hermes-engine: 2382506846564caf4152c45390dc24f08fce7057 593 | libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 594 | OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c 595 | RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1 596 | RCTRequired: 44a3cda52ccac0be738fbf43fef90f3546a48c52 597 | RCTTypeSafety: da7fbf9826fc898ca8b10dc840f2685562039a64 598 | React: defd955b6d6ffb9791bb66dee08d90b87a8e2c0c 599 | React-callinvoker: 39ea57213d56ec9c527d51bd0dfb45cbb12ef447 600 | React-Codegen: 71cbc1bc384f9d19a41e4d00dfd0e7762ec5ef4a 601 | React-Core: 898cb2f7785640e21d381b23fc64a2904628b368 602 | React-CoreModules: 7f71e7054395d61585048061a66d67b58d3d27b7 603 | React-cxxreact: 57fca29dd6995de0ee360980709c4be82d40cda1 604 | React-hermes: 33229fc1867df496665b36b222a82a0f850bcae1 605 | React-jsi: 3a55652789df6ddd777cce9601bf000e18d6b9df 606 | React-jsiexecutor: 9b2a87f674f30da4706af52520e4860974cec149 607 | React-jsinspector: b3b341764ccda14f3659c00a9bc5b098b334db2b 608 | React-logger: dc96fadd2f7f6bc38efc3cfb5fef876d4e6290a2 609 | React-perflogger: c944b06edad34f5ecded0f29a6e66290a005d365 610 | React-RCTActionSheet: fa467f37777dacba2c72da4be7ae065da4482d7d 611 | React-RCTAnimation: 0591ee5f9e3d8c864a0937edea2165fe968e7099 612 | React-RCTAppDelegate: 8b7f60103a83ad1670bda690571e73efddba29a0 613 | React-RCTBlob: 082e8612f48b0ec12ca6dc949fb7c310593eff83 614 | React-RCTImage: 6300660ef04d0e8a710ad9ea5d2fb4d9521c200d 615 | React-RCTLinking: 7703ee1b10d3568c143a489ae74adc419c3f3ef3 616 | React-RCTNetwork: 5748c647e09c66b918f81ae15ed7474327f653be 617 | React-RCTSettings: 8c8a84ee363db9cbc287c8b8f2fb782acf7ba414 618 | React-RCTText: d5e53c0741e3e2df91317781e993b5e42bd70448 619 | React-RCTVibration: 052dd488ba95f461a37c992b9e01bd4bcc59a7b6 620 | React-runtimeexecutor: b5abe02558421897cd9f73d4f4b6adb4bc297083 621 | ReactCommon: a1a263d94f02a0dc8442f341d5a11b3d7a9cd44d 622 | RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396 623 | SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 624 | Yoga: e29645ec5a66fb00934fad85338742d1c247d4cb 625 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 626 | 627 | PODFILE CHECKSUM: 4aca4e1b338449820b96fb038178ecb6d7c32f9a 628 | 629 | COCOAPODS: 1.15.2 630 | -------------------------------------------------------------------------------- /example/ios/example.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 0264ED890D079BB9A99DCA28 /* libPods-example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6AFBF5BFF5F2120C4BEF2749 /* libPods-example.a */; }; 11 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 12 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; 13 | E053E0EE2B7A0F9400208F61 /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = E053E0ED2B7A0F9400208F61 /* AppDelegate.mm */; }; 14 | E053E0F12B7A0FBB00208F61 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = E053E0F02B7A0FBB00208F61 /* main.m */; }; 15 | /* End PBXBuildFile section */ 16 | 17 | /* Begin PBXContainerItemProxy section */ 18 | FAB9070C279B4A6B008B1D17 /* PBXContainerItemProxy */ = { 19 | isa = PBXContainerItemProxy; 20 | containerPortal = FAB90708279B4A6B008B1D17 /* RNModuleTemplateModule.xcodeproj */; 21 | proxyType = 2; 22 | remoteGlobalIDString = FA0EFF60236CC8FB00069FA8; 23 | remoteInfo = RNModuleTemplateModule; 24 | }; 25 | /* End PBXContainerItemProxy section */ 26 | 27 | /* Begin PBXFileReference section */ 28 | 13B07F961A680F5B00A75B9A /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; }; 29 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = example/Images.xcassets; sourceTree = ""; }; 30 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = example/Info.plist; sourceTree = ""; }; 31 | 6AFBF5BFF5F2120C4BEF2749 /* libPods-example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 32 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = example/LaunchScreen.storyboard; sourceTree = ""; }; 33 | 97D2F575C9E1CCB8487D7A83 /* Pods-example.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.debug.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.debug.xcconfig"; sourceTree = ""; }; 34 | E053E0ED2B7A0F9400208F61 /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = example/AppDelegate.mm; sourceTree = ""; }; 35 | E053E0EF2B7A0FAC00208F61 /* AppDelegate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = example/AppDelegate.h; sourceTree = ""; }; 36 | E053E0F02B7A0FBB00208F61 /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = example/main.m; sourceTree = ""; }; 37 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 38 | F9197C6B9DA65F8C6AC6D250 /* Pods-example.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.release.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.release.xcconfig"; sourceTree = ""; }; 39 | FAB90708279B4A6B008B1D17 /* RNModuleTemplateModule.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNModuleTemplateModule.xcodeproj; path = ../../ios/RNModuleTemplateModule.xcodeproj; sourceTree = ""; }; 40 | /* End PBXFileReference section */ 41 | 42 | /* Begin PBXFrameworksBuildPhase section */ 43 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 44 | isa = PBXFrameworksBuildPhase; 45 | buildActionMask = 2147483647; 46 | files = ( 47 | 0264ED890D079BB9A99DCA28 /* libPods-example.a in Frameworks */, 48 | ); 49 | runOnlyForDeploymentPostprocessing = 0; 50 | }; 51 | /* End PBXFrameworksBuildPhase section */ 52 | 53 | /* Begin PBXGroup section */ 54 | 13B07FAE1A68108700A75B9A /* example */ = { 55 | isa = PBXGroup; 56 | children = ( 57 | E053E0ED2B7A0F9400208F61 /* AppDelegate.mm */, 58 | E053E0EF2B7A0FAC00208F61 /* AppDelegate.h */, 59 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 60 | E053E0F02B7A0FBB00208F61 /* main.m */, 61 | 13B07FB61A68108700A75B9A /* Info.plist */, 62 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 63 | ); 64 | name = example; 65 | sourceTree = ""; 66 | }; 67 | 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { 68 | isa = PBXGroup; 69 | children = ( 70 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 71 | 6AFBF5BFF5F2120C4BEF2749 /* libPods-example.a */, 72 | ); 73 | name = Frameworks; 74 | sourceTree = ""; 75 | }; 76 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 77 | isa = PBXGroup; 78 | children = ( 79 | FAB90708279B4A6B008B1D17 /* RNModuleTemplateModule.xcodeproj */, 80 | ); 81 | name = Libraries; 82 | sourceTree = ""; 83 | }; 84 | 83CBB9F61A601CBA00E9B192 = { 85 | isa = PBXGroup; 86 | children = ( 87 | 13B07FAE1A68108700A75B9A /* example */, 88 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 89 | 83CBBA001A601CBA00E9B192 /* Products */, 90 | 2D16E6871FA4F8E400B85C8A /* Frameworks */, 91 | B2C0F2FE6846CDF42A2E82AC /* Pods */, 92 | ); 93 | indentWidth = 2; 94 | sourceTree = ""; 95 | tabWidth = 2; 96 | usesTabs = 0; 97 | }; 98 | 83CBBA001A601CBA00E9B192 /* Products */ = { 99 | isa = PBXGroup; 100 | children = ( 101 | 13B07F961A680F5B00A75B9A /* example.app */, 102 | ); 103 | name = Products; 104 | sourceTree = ""; 105 | }; 106 | B2C0F2FE6846CDF42A2E82AC /* Pods */ = { 107 | isa = PBXGroup; 108 | children = ( 109 | 97D2F575C9E1CCB8487D7A83 /* Pods-example.debug.xcconfig */, 110 | F9197C6B9DA65F8C6AC6D250 /* Pods-example.release.xcconfig */, 111 | ); 112 | path = Pods; 113 | sourceTree = ""; 114 | }; 115 | FAB90709279B4A6B008B1D17 /* Products */ = { 116 | isa = PBXGroup; 117 | children = ( 118 | FAB9070D279B4A6B008B1D17 /* libRNModuleTemplateModule.a */, 119 | ); 120 | name = Products; 121 | sourceTree = ""; 122 | }; 123 | /* End PBXGroup section */ 124 | 125 | /* Begin PBXNativeTarget section */ 126 | 13B07F861A680F5B00A75B9A /* example */ = { 127 | isa = PBXNativeTarget; 128 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "example" */; 129 | buildPhases = ( 130 | 752C8533A601AAC997D2EA70 /* [CP] Check Pods Manifest.lock */, 131 | FD10A7F022414F080027D42C /* Start Packager */, 132 | 13B07F871A680F5B00A75B9A /* Sources */, 133 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 134 | 13B07F8E1A680F5B00A75B9A /* Resources */, 135 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 136 | CF22FF45FAD6930B2B64F6DE /* [CP] Copy Pods Resources */, 137 | 63C18328303A947965E14F03 /* [CP] Embed Pods Frameworks */, 138 | ); 139 | buildRules = ( 140 | ); 141 | dependencies = ( 142 | ); 143 | name = example; 144 | productName = example; 145 | productReference = 13B07F961A680F5B00A75B9A /* example.app */; 146 | productType = "com.apple.product-type.application"; 147 | }; 148 | /* End PBXNativeTarget section */ 149 | 150 | /* Begin PBXProject section */ 151 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 152 | isa = PBXProject; 153 | attributes = { 154 | LastUpgradeCheck = 1240; 155 | TargetAttributes = { 156 | 13B07F861A680F5B00A75B9A = { 157 | LastSwiftMigration = 1240; 158 | }; 159 | }; 160 | }; 161 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */; 162 | compatibilityVersion = "Xcode 12.0"; 163 | developmentRegion = en; 164 | hasScannedForEncodings = 0; 165 | knownRegions = ( 166 | en, 167 | Base, 168 | ); 169 | mainGroup = 83CBB9F61A601CBA00E9B192; 170 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 171 | projectDirPath = ""; 172 | projectReferences = ( 173 | { 174 | ProductGroup = FAB90709279B4A6B008B1D17 /* Products */; 175 | ProjectRef = FAB90708279B4A6B008B1D17 /* RNModuleTemplateModule.xcodeproj */; 176 | }, 177 | ); 178 | projectRoot = ""; 179 | targets = ( 180 | 13B07F861A680F5B00A75B9A /* example */, 181 | ); 182 | }; 183 | /* End PBXProject section */ 184 | 185 | /* Begin PBXReferenceProxy section */ 186 | FAB9070D279B4A6B008B1D17 /* libRNModuleTemplateModule.a */ = { 187 | isa = PBXReferenceProxy; 188 | fileType = archive.ar; 189 | path = libRNModuleTemplateModule.a; 190 | remoteRef = FAB9070C279B4A6B008B1D17 /* PBXContainerItemProxy */; 191 | sourceTree = BUILT_PRODUCTS_DIR; 192 | }; 193 | /* End PBXReferenceProxy section */ 194 | 195 | /* Begin PBXResourcesBuildPhase section */ 196 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 197 | isa = PBXResourcesBuildPhase; 198 | buildActionMask = 2147483647; 199 | files = ( 200 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 201 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 202 | ); 203 | runOnlyForDeploymentPostprocessing = 0; 204 | }; 205 | /* End PBXResourcesBuildPhase section */ 206 | 207 | /* Begin PBXShellScriptBuildPhase section */ 208 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 209 | isa = PBXShellScriptBuildPhase; 210 | buildActionMask = 2147483647; 211 | files = ( 212 | ); 213 | inputPaths = ( 214 | ); 215 | name = "Bundle React Native code and images"; 216 | outputPaths = ( 217 | ); 218 | runOnlyForDeploymentPostprocessing = 0; 219 | shellPath = /bin/sh; 220 | shellScript = "set -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n"; 221 | }; 222 | 63C18328303A947965E14F03 /* [CP] Embed Pods Frameworks */ = { 223 | isa = PBXShellScriptBuildPhase; 224 | buildActionMask = 2147483647; 225 | files = ( 226 | ); 227 | inputFileListPaths = ( 228 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks-${CONFIGURATION}-input-files.xcfilelist", 229 | ); 230 | name = "[CP] Embed Pods Frameworks"; 231 | outputFileListPaths = ( 232 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks-${CONFIGURATION}-output-files.xcfilelist", 233 | ); 234 | runOnlyForDeploymentPostprocessing = 0; 235 | shellPath = /bin/sh; 236 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks.sh\"\n"; 237 | showEnvVarsInLog = 0; 238 | }; 239 | 752C8533A601AAC997D2EA70 /* [CP] Check Pods Manifest.lock */ = { 240 | isa = PBXShellScriptBuildPhase; 241 | buildActionMask = 2147483647; 242 | files = ( 243 | ); 244 | inputFileListPaths = ( 245 | ); 246 | inputPaths = ( 247 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 248 | "${PODS_ROOT}/Manifest.lock", 249 | ); 250 | name = "[CP] Check Pods Manifest.lock"; 251 | outputFileListPaths = ( 252 | ); 253 | outputPaths = ( 254 | "$(DERIVED_FILE_DIR)/Pods-example-checkManifestLockResult.txt", 255 | ); 256 | runOnlyForDeploymentPostprocessing = 0; 257 | shellPath = /bin/sh; 258 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 259 | showEnvVarsInLog = 0; 260 | }; 261 | CF22FF45FAD6930B2B64F6DE /* [CP] Copy Pods Resources */ = { 262 | isa = PBXShellScriptBuildPhase; 263 | buildActionMask = 2147483647; 264 | files = ( 265 | ); 266 | inputFileListPaths = ( 267 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources-${CONFIGURATION}-input-files.xcfilelist", 268 | ); 269 | name = "[CP] Copy Pods Resources"; 270 | outputFileListPaths = ( 271 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources-${CONFIGURATION}-output-files.xcfilelist", 272 | ); 273 | runOnlyForDeploymentPostprocessing = 0; 274 | shellPath = /bin/sh; 275 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources.sh\"\n"; 276 | showEnvVarsInLog = 0; 277 | }; 278 | FD10A7F022414F080027D42C /* Start Packager */ = { 279 | isa = PBXShellScriptBuildPhase; 280 | buildActionMask = 2147483647; 281 | files = ( 282 | ); 283 | inputFileListPaths = ( 284 | ); 285 | inputPaths = ( 286 | ); 287 | name = "Start Packager"; 288 | outputFileListPaths = ( 289 | ); 290 | outputPaths = ( 291 | ); 292 | runOnlyForDeploymentPostprocessing = 0; 293 | shellPath = /bin/sh; 294 | shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n"; 295 | showEnvVarsInLog = 0; 296 | }; 297 | /* End PBXShellScriptBuildPhase section */ 298 | 299 | /* Begin PBXSourcesBuildPhase section */ 300 | 13B07F871A680F5B00A75B9A /* Sources */ = { 301 | isa = PBXSourcesBuildPhase; 302 | buildActionMask = 2147483647; 303 | files = ( 304 | E053E0F12B7A0FBB00208F61 /* main.m in Sources */, 305 | E053E0EE2B7A0F9400208F61 /* AppDelegate.mm in Sources */, 306 | ); 307 | runOnlyForDeploymentPostprocessing = 0; 308 | }; 309 | /* End PBXSourcesBuildPhase section */ 310 | 311 | /* Begin XCBuildConfiguration section */ 312 | 13B07F941A680F5B00A75B9A /* Debug */ = { 313 | isa = XCBuildConfiguration; 314 | baseConfigurationReference = 97D2F575C9E1CCB8487D7A83 /* Pods-example.debug.xcconfig */; 315 | buildSettings = { 316 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 317 | CLANG_ENABLE_MODULES = YES; 318 | CURRENT_PROJECT_VERSION = 1; 319 | ENABLE_BITCODE = NO; 320 | "EXCLUDED_ARCHS[sdk=*]" = arm64; 321 | INFOPLIST_FILE = example/Info.plist; 322 | LD_RUNPATH_SEARCH_PATHS = ( 323 | "$(inherited)", 324 | "@executable_path/Frameworks", 325 | ); 326 | OTHER_LDFLAGS = ( 327 | "$(inherited)", 328 | "-ObjC", 329 | "-lc++", 330 | ); 331 | PRODUCT_BUNDLE_IDENTIFIER = "com.$(PRODUCT_NAME:rfc1034identifier:lower)"; 332 | PRODUCT_NAME = example; 333 | SWIFT_OBJC_BRIDGING_HEADER = "example/example-Bridging-Header.h"; 334 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 335 | SWIFT_VERSION = 5.0; 336 | VERSIONING_SYSTEM = "apple-generic"; 337 | }; 338 | name = Debug; 339 | }; 340 | 13B07F951A680F5B00A75B9A /* Release */ = { 341 | isa = XCBuildConfiguration; 342 | baseConfigurationReference = F9197C6B9DA65F8C6AC6D250 /* Pods-example.release.xcconfig */; 343 | buildSettings = { 344 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 345 | CLANG_ENABLE_MODULES = YES; 346 | CURRENT_PROJECT_VERSION = 1; 347 | INFOPLIST_FILE = example/Info.plist; 348 | LD_RUNPATH_SEARCH_PATHS = ( 349 | "$(inherited)", 350 | "@executable_path/Frameworks", 351 | ); 352 | OTHER_LDFLAGS = ( 353 | "$(inherited)", 354 | "-ObjC", 355 | "-lc++", 356 | ); 357 | PRODUCT_BUNDLE_IDENTIFIER = "com.$(PRODUCT_NAME:rfc1034identifier:lower)"; 358 | PRODUCT_NAME = example; 359 | SWIFT_OBJC_BRIDGING_HEADER = "example/example-Bridging-Header.h"; 360 | SWIFT_VERSION = 5.0; 361 | VERSIONING_SYSTEM = "apple-generic"; 362 | }; 363 | name = Release; 364 | }; 365 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 366 | isa = XCBuildConfiguration; 367 | buildSettings = { 368 | ALWAYS_SEARCH_USER_PATHS = NO; 369 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 370 | CLANG_CXX_LANGUAGE_STANDARD = "c++17"; 371 | CLANG_CXX_LIBRARY = "libc++"; 372 | CLANG_ENABLE_MODULES = YES; 373 | CLANG_ENABLE_OBJC_ARC = YES; 374 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 375 | CLANG_WARN_BOOL_CONVERSION = YES; 376 | CLANG_WARN_COMMA = YES; 377 | CLANG_WARN_CONSTANT_CONVERSION = YES; 378 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 379 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 380 | CLANG_WARN_EMPTY_BODY = YES; 381 | CLANG_WARN_ENUM_CONVERSION = YES; 382 | CLANG_WARN_INFINITE_RECURSION = YES; 383 | CLANG_WARN_INT_CONVERSION = YES; 384 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 385 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 386 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 387 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 388 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 389 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 390 | CLANG_WARN_STRICT_PROTOTYPES = YES; 391 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 392 | CLANG_WARN_UNREACHABLE_CODE = YES; 393 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 394 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 395 | COPY_PHASE_STRIP = NO; 396 | ENABLE_STRICT_OBJC_MSGSEND = YES; 397 | ENABLE_TESTABILITY = YES; 398 | EXCLUDED_ARCHS = arm64; 399 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; 400 | GCC_C_LANGUAGE_STANDARD = gnu99; 401 | GCC_DYNAMIC_NO_PIC = NO; 402 | GCC_NO_COMMON_BLOCKS = YES; 403 | GCC_OPTIMIZATION_LEVEL = 0; 404 | GCC_PREPROCESSOR_DEFINITIONS = ( 405 | "DEBUG=1", 406 | "$(inherited)", 407 | _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, 408 | ); 409 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 410 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 411 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 412 | GCC_WARN_UNDECLARED_SELECTOR = YES; 413 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 414 | GCC_WARN_UNUSED_FUNCTION = YES; 415 | GCC_WARN_UNUSED_VARIABLE = YES; 416 | IPHONEOS_DEPLOYMENT_TARGET = 13.0; 417 | LD_RUNPATH_SEARCH_PATHS = ( 418 | /usr/lib/swift, 419 | "$(inherited)", 420 | ); 421 | LIBRARY_SEARCH_PATHS = ( 422 | "\"$(SDKROOT)/usr/lib/swift\"", 423 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 424 | "\"$(inherited)\"", 425 | ); 426 | MTL_ENABLE_DEBUG_INFO = YES; 427 | ONLY_ACTIVE_ARCH = YES; 428 | OTHER_LDFLAGS = ( 429 | "$(inherited)", 430 | "-Wl", 431 | "-ld_classic", 432 | "-ld64", 433 | ); 434 | OTHER_SWIFT_FLAGS = "-D DEBUG"; 435 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 436 | SDKROOT = iphoneos; 437 | SWIFT_COMPILATION_MODE = singlefile; 438 | }; 439 | name = Debug; 440 | }; 441 | 83CBBA211A601CBA00E9B192 /* Release */ = { 442 | isa = XCBuildConfiguration; 443 | buildSettings = { 444 | ALWAYS_SEARCH_USER_PATHS = NO; 445 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 446 | CLANG_CXX_LANGUAGE_STANDARD = "c++17"; 447 | CLANG_CXX_LIBRARY = "libc++"; 448 | CLANG_ENABLE_MODULES = YES; 449 | CLANG_ENABLE_OBJC_ARC = YES; 450 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 451 | CLANG_WARN_BOOL_CONVERSION = YES; 452 | CLANG_WARN_COMMA = YES; 453 | CLANG_WARN_CONSTANT_CONVERSION = YES; 454 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 455 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 456 | CLANG_WARN_EMPTY_BODY = YES; 457 | CLANG_WARN_ENUM_CONVERSION = YES; 458 | CLANG_WARN_INFINITE_RECURSION = YES; 459 | CLANG_WARN_INT_CONVERSION = YES; 460 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 461 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 462 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 463 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 464 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 465 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 466 | CLANG_WARN_STRICT_PROTOTYPES = YES; 467 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 468 | CLANG_WARN_UNREACHABLE_CODE = YES; 469 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 470 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 471 | COPY_PHASE_STRIP = YES; 472 | ENABLE_NS_ASSERTIONS = NO; 473 | ENABLE_STRICT_OBJC_MSGSEND = YES; 474 | EXCLUDED_ARCHS = arm64; 475 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; 476 | GCC_C_LANGUAGE_STANDARD = gnu99; 477 | GCC_NO_COMMON_BLOCKS = YES; 478 | GCC_PREPROCESSOR_DEFINITIONS = ( 479 | "$(inherited)", 480 | _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, 481 | ); 482 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 483 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 484 | GCC_WARN_UNDECLARED_SELECTOR = YES; 485 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 486 | GCC_WARN_UNUSED_FUNCTION = YES; 487 | GCC_WARN_UNUSED_VARIABLE = YES; 488 | IPHONEOS_DEPLOYMENT_TARGET = 13.0; 489 | LD_RUNPATH_SEARCH_PATHS = ( 490 | /usr/lib/swift, 491 | "$(inherited)", 492 | ); 493 | LIBRARY_SEARCH_PATHS = ( 494 | "\"$(SDKROOT)/usr/lib/swift\"", 495 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 496 | "\"$(inherited)\"", 497 | ); 498 | MTL_ENABLE_DEBUG_INFO = NO; 499 | OTHER_LDFLAGS = ( 500 | "$(inherited)", 501 | "-Wl", 502 | "-ld_classic", 503 | "-ld64", 504 | ); 505 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 506 | SDKROOT = iphoneos; 507 | SWIFT_COMPILATION_MODE = wholemodule; 508 | VALIDATE_PRODUCT = YES; 509 | }; 510 | name = Release; 511 | }; 512 | /* End XCBuildConfiguration section */ 513 | 514 | /* Begin XCConfigurationList section */ 515 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "example" */ = { 516 | isa = XCConfigurationList; 517 | buildConfigurations = ( 518 | 13B07F941A680F5B00A75B9A /* Debug */, 519 | 13B07F951A680F5B00A75B9A /* Release */, 520 | ); 521 | defaultConfigurationIsVisible = 0; 522 | defaultConfigurationName = Release; 523 | }; 524 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */ = { 525 | isa = XCConfigurationList; 526 | buildConfigurations = ( 527 | 83CBBA201A601CBA00E9B192 /* Debug */, 528 | 83CBBA211A601CBA00E9B192 /* Release */, 529 | ); 530 | defaultConfigurationIsVisible = 0; 531 | defaultConfigurationName = Release; 532 | }; 533 | /* End XCConfigurationList section */ 534 | }; 535 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 536 | } 537 | -------------------------------------------------------------------------------- /example/ios/example.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 43 | 45 | 51 | 52 | 53 | 54 | 60 | 62 | 68 | 69 | 70 | 71 | 73 | 74 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /example/ios/example.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/example.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PreviewsEnabled 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/example/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /example/ios/example/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"example"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | #if DEBUG 20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 21 | #else 22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 23 | #endif 24 | } 25 | 26 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 27 | /// 28 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 29 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 30 | /// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`. 31 | - (BOOL)concurrentRootEnabled 32 | { 33 | return true; 34 | } 35 | 36 | @end 37 | -------------------------------------------------------------------------------- /example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/ios/example/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ios/example/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | example 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /example/ios/example/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example/ios/example/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | const path = require('path') 9 | const exclusionList = require('metro-config/src/defaults/exclusionList') 10 | 11 | const moduleRoot = path.resolve(__dirname, '..') 12 | 13 | module.exports = { 14 | watchFolders: [moduleRoot], 15 | resolver: { 16 | extraNodeModules: { 17 | react: path.resolve(__dirname, 'node_modules/react'), 18 | 'react-native': path.resolve(__dirname, 'node_modules/react-native'), 19 | }, 20 | blockList: exclusionList([ 21 | new RegExp(`${moduleRoot}/node_modules/react/.*`), 22 | new RegExp(`${moduleRoot}/node_modules/react-native/.*`), 23 | ]), 24 | }, 25 | transformer: { 26 | getTransformOptions: async () => ({ 27 | transform: { 28 | experimentalImportSupport: false, 29 | inlineRequires: true, 30 | }, 31 | }), 32 | }, 33 | } 34 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "compile": "tsc -p .", 8 | "ios": "react-native run-ios", 9 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx", 10 | "start": "react-native start", 11 | "test": "jest" 12 | }, 13 | "dependencies": { 14 | "react": "18.2.0", 15 | "react-native": "^0.71.0", 16 | "react-native-svg": "^13.14.0" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.20.0", 20 | "@babel/runtime": "^7.20.0", 21 | "@react-native-community/eslint-config": "^3.2.0", 22 | "@tsconfig/react-native": "^2.0.2", 23 | "@types/jest": "^29.2.1", 24 | "@types/react": "^18.0.24", 25 | "@types/react-native": "^0.66.15", 26 | "@types/react-test-renderer": "^18.0.0", 27 | "babel-jest": "^29.2.1", 28 | "eslint": "^8.19.0", 29 | "eslint-plugin-simple-import-sort": "^7.0.0", 30 | "jest": "^29.2.1", 31 | "metro-react-native-babel-preset": "^0.73.7", 32 | "react-test-renderer": "18.2.0", 33 | "typescript": "^4.8.4" 34 | }, 35 | "resolutions": { 36 | "@types/react": "^18.0.9" 37 | }, 38 | "jest": { 39 | "preset": "react-native", 40 | "moduleFileExtensions": [ 41 | "ts", 42 | "tsx", 43 | "js", 44 | "jsx", 45 | "json", 46 | "node" 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { 3 | SafeAreaView, 4 | StyleSheet, 5 | View, 6 | Text, 7 | TouchableOpacity, 8 | } from 'react-native'; 9 | import { SpeedoMeterVariant, RadialVariant } from './modules'; 10 | import { Colors, verticalScale } from './theme'; 11 | 12 | interface TabProps { 13 | index: number; 14 | tabLabel: string; 15 | activeTabIndex: number; 16 | setActiveTabIndex: (e: number) => void; 17 | } 18 | 19 | const Tab = ({ 20 | index, 21 | tabLabel, 22 | activeTabIndex, 23 | setActiveTabIndex, 24 | }: TabProps) => { 25 | return ( 26 | setActiveTabIndex(index)}> 35 | 42 | {tabLabel} 43 | 44 | 45 | ); 46 | }; 47 | 48 | const App = () => { 49 | const [activeTabIndex, setActiveTabIndex] = useState(0); 50 | 51 | return ( 52 | 53 | 54 | 60 | 66 | 67 | 68 | {activeTabIndex == 0 ? : } 69 | 70 | 71 | ); 72 | }; 73 | 74 | const styles = StyleSheet.create({ 75 | container: { 76 | flex: 1, 77 | backgroundColor: Colors.grey, 78 | }, 79 | radial: { 80 | marginTop: 100, 81 | }, 82 | titleContainer: { 83 | flex: 0.1, 84 | flexDirection: 'row', 85 | }, 86 | btnContainer: { 87 | flex: 0.5, 88 | height: verticalScale(40), 89 | alignItems: 'center', 90 | justifyContent: 'center', 91 | }, 92 | screenContainer: { 93 | flex: 0.9, 94 | justifyContent: 'center', 95 | alignItems: 'center', 96 | }, 97 | tabLabel: { 98 | fontWeight: '800', 99 | }, 100 | }); 101 | 102 | export default App; 103 | -------------------------------------------------------------------------------- /example/src/components/VariantCard.tsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet, View } from 'react-native'; 2 | import React from 'react'; 3 | import { verticalScale } from '../../../src/theme'; 4 | 5 | interface variantProps { 6 | children: React.ReactElement; 7 | } 8 | const VariantCard = (props: variantProps) => ( 9 | {props.children} 10 | ); 11 | 12 | export default VariantCard; 13 | 14 | const styles = StyleSheet.create({ 15 | container: { 16 | flex: 1, 17 | marginTop: verticalScale(5), 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /example/src/modules/RadialVariant/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { StyleSheet, View } from 'react-native'; 3 | import { RadialSlider } from 'react-native-radial-slider'; 4 | import { Colors } from '../../theme'; 5 | import VariantCard from '../../components/VariantCard'; 6 | 7 | const RadialVariant = () => { 8 | const [speed, setSpeed] = useState(0); 9 | const [circleSliderSpeed, setCircleSliderSpeed] = useState(0); 10 | 11 | return ( 12 | 13 | 14 | 22 | 23 | 24 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | const styles = StyleSheet.create({ 39 | container: { 40 | flex: 1, 41 | justifyContent: 'center', 42 | }, 43 | }); 44 | 45 | export default RadialVariant; 46 | -------------------------------------------------------------------------------- /example/src/modules/SpeedoMeterVariant/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { StyleSheet, TouchableOpacity, View, Text } from 'react-native'; 3 | import { RadialSlider } from 'react-native-radial-slider'; 4 | import VariantCard from '../../components/VariantCard'; 5 | import { Colors } from '../../theme'; 6 | 7 | interface actionButtonProps { 8 | backgroundColor: string; 9 | title: string; 10 | onPress: () => void; 11 | } 12 | 13 | const ActionButton = ({ 14 | onPress, 15 | title, 16 | backgroundColor, 17 | }: actionButtonProps) => { 18 | return ( 19 | 27 | {title} 28 | 29 | ); 30 | }; 31 | 32 | const SpeedoMeterVariant = () => { 33 | const [speed, setSpeed] = useState(0); 34 | const [isStart, setIsStart] = useState(false); 35 | 36 | useEffect(() => { 37 | const timerId = setTimeout(handleTime, 1000); 38 | return () => clearTimeout(timerId); 39 | }); 40 | 41 | const handleTime = () => { 42 | isStart && setSpeed(prev => prev + 10); 43 | }; 44 | 45 | return ( 46 | 47 | 48 | setIsStart(true)} 52 | /> 53 | setIsStart(false)} 57 | /> 58 | 59 | 60 | 69 | 70 | 71 | 79 | 80 | 81 | ); 82 | }; 83 | 84 | const styles = StyleSheet.create({ 85 | container: { 86 | flex: 1, 87 | justifyContent: 'center', 88 | }, 89 | btnContainer: { 90 | flexDirection: 'row', 91 | justifyContent: 'space-around', 92 | marginBottom: 20, 93 | }, 94 | actionButton: { 95 | borderRadius: 10, 96 | paddingHorizontal: 15, 97 | paddingVertical: 5, 98 | }, 99 | text: { 100 | color: Colors.white, 101 | fontWeight: '900', 102 | }, 103 | }); 104 | 105 | export default SpeedoMeterVariant; 106 | -------------------------------------------------------------------------------- /example/src/modules/index.ts: -------------------------------------------------------------------------------- 1 | import RadialVariant from './RadialVariant'; 2 | import SpeedoMeterVariant from './SpeedoMeterVariant'; 3 | 4 | export { RadialVariant, SpeedoMeterVariant }; 5 | -------------------------------------------------------------------------------- /example/src/theme/Colors.ts: -------------------------------------------------------------------------------- 1 | const colors = { 2 | darkBlue: '#0B3471', 3 | skyBlue: '#0F91E3', 4 | white: '#FFFF', 5 | blue: '#00203FFF', 6 | offWhite: '#F5F5F5', 7 | grey: '#f0efed', 8 | darkGrey: '#bdbcbb', 9 | green: 'green', 10 | red: 'red', 11 | }; 12 | 13 | export default colors; 14 | -------------------------------------------------------------------------------- /example/src/theme/Metrics.ts: -------------------------------------------------------------------------------- 1 | import { Dimensions } from 'react-native'; 2 | const { width, height } = Dimensions.get('window'); 3 | //Guideline sizes are based on standard ~5" screen mobile device 4 | const guidelineBaseWidth = 375; 5 | const guidelineBaseHeight = 812; 6 | const horizontalScale = (size: number) => (width / guidelineBaseWidth) * size; 7 | const verticalScale = (size: number) => (height / guidelineBaseHeight) * size; 8 | const moderateScale = (size: number, factor = 0.5) => 9 | size + (horizontalScale(size) - size) * factor; 10 | // Used via Metrics.baseMargin 11 | const Metrics = { 12 | screenWidth: width < height ? width : height, 13 | screenHeight: width < height ? height : width, 14 | }; 15 | export { horizontalScale, verticalScale, moderateScale, Metrics }; 16 | -------------------------------------------------------------------------------- /example/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | import Colors from './Colors'; 2 | import { 3 | Metrics, 4 | moderateScale, 5 | verticalScale, 6 | horizontalScale, 7 | } from './Metrics'; 8 | export { Colors, Metrics, moderateScale, verticalScale, horizontalScale }; 9 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "esModuleInterop": true, 5 | "jsx": "react-native", 6 | "lib": ["ESNext"], 7 | "module": "CommonJS", 8 | "noEmit": true, 9 | "paths": { 10 | "react-native-radial-slider": ["../src"] 11 | }, 12 | "skipLibCheck": true, 13 | "strict": true, 14 | "target": "ESNext" 15 | }, 16 | "include": ["src"] 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-radial-slider", 3 | "version": "1.1.0", 4 | "description": "React Native component to select or highlight a specific value from a range of values", 5 | "homepage": "https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider#readme", 6 | "main": "lib/index.js", 7 | "types": "lib/index.d.ts", 8 | "author": "Simform Solutions", 9 | "license": "MIT", 10 | "files": [ 11 | "lib" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider" 16 | }, 17 | "keywords": [ 18 | "react", 19 | "react-native", 20 | "typescript", 21 | "slider", 22 | "radial", 23 | "radial-slider", 24 | "circular-slider", 25 | "rn", 26 | "speedometer", 27 | "meter" 28 | ], 29 | "scripts": { 30 | "build": "rm -rf lib && tsc -p .", 31 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx", 32 | "prepare": "husky install && yarn build", 33 | "test": "jest", 34 | "example": "yarn --cwd example" 35 | }, 36 | "devDependencies": { 37 | "@babel/core": "^7.16.12", 38 | "@babel/runtime": "^7.16.7", 39 | "@commitlint/cli": "^16.1.0", 40 | "@commitlint/config-conventional": "^16.0.0", 41 | "@react-native-community/eslint-config": "^3.0.1", 42 | "@testing-library/react-native": "^9.0.0", 43 | "@types/jest": "^27.4.0", 44 | "@types/react-native": "^0.66.15", 45 | "@types/react-test-renderer": "^17.0.1", 46 | "babel-jest": "^27.4.6", 47 | "eslint": "^7.32.0", 48 | "eslint-plugin-simple-import-sort": "^7.0.0", 49 | "husky": "^7.0.4", 50 | "jest": "^27.4.7", 51 | "lint-staged": "^11.1.2", 52 | "metro-react-native-babel-preset": "^0.67.0", 53 | "prettier": "^2.7.1", 54 | "react": "^17.0.2", 55 | "react-native": "^0.67.1", 56 | "react-native-svg": "^13.9.0", 57 | "react-test-renderer": "^17.0.2", 58 | "typescript": "^4.5.5" 59 | }, 60 | "peerDependencies": { 61 | "react": "*", 62 | "react-native": "*", 63 | "react-native-svg": "*" 64 | }, 65 | "jest": { 66 | "preset": "react-native", 67 | "moduleFileExtensions": [ 68 | "ts", 69 | "tsx", 70 | "js", 71 | "jsx", 72 | "json", 73 | "node" 74 | ] 75 | }, 76 | "lint-staged": { 77 | "src/**/*.{js,ts,tsx}": [ 78 | "eslint" 79 | ] 80 | }, 81 | "eslintIgnore": [ 82 | "node_modules/", 83 | "lib/" 84 | ], 85 | "husky": { 86 | "hooks": { 87 | "pre-commit": "lint-staged", 88 | "pre-push": "yarn build && yarn test" 89 | } 90 | }, 91 | "commitlint": { 92 | "extends": [ 93 | "@commitlint/config-conventional" 94 | ] 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/components/RadialSlider/ButtonContent.tsx: -------------------------------------------------------------------------------- 1 | import { TouchableOpacity } from 'react-native'; 2 | import React from 'react'; 3 | import Svg, { Path, Circle, G } from 'react-native-svg'; 4 | import type { ButtonProps } from './types'; 5 | 6 | const ButtonContent = (props: ButtonProps) => { 7 | const { disabled, onPress, style, buttonType, stroke } = props; 8 | 9 | return ( 10 | 17 | 18 | 19 | 20 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export default ButtonContent; 39 | -------------------------------------------------------------------------------- /src/components/RadialSlider/CenterContent.tsx: -------------------------------------------------------------------------------- 1 | import { View, Text } from 'react-native'; 2 | import React from 'react'; 3 | import { styles } from './styles'; 4 | import type { CenterContentProps } from './types'; 5 | 6 | const CenterContent = (props: CenterContentProps) => { 7 | const { 8 | title, 9 | subTitle, 10 | unit, 11 | titleStyle, 12 | subTitleStyle, 13 | valueStyle, 14 | unitStyle, 15 | isHideTitle, 16 | isHideSubtitle, 17 | isHideValue, 18 | value, 19 | centerContentStyle, 20 | unitValueContentStyle, 21 | } = props; 22 | 23 | return ( 24 | 25 | {!isHideTitle && ( 26 | 27 | {title} 28 | 29 | )} 30 | {!isHideValue && ( 31 | 32 | 33 | {value} 34 | 35 | 36 | {unit} 37 | 38 | 39 | )} 40 | {!isHideSubtitle && ( 41 | 42 | {subTitle} 43 | 44 | )} 45 | 46 | ); 47 | }; 48 | 49 | export default CenterContent; 50 | -------------------------------------------------------------------------------- /src/components/RadialSlider/LineContent.tsx: -------------------------------------------------------------------------------- 1 | import { Platform } from 'react-native'; 2 | import React, { useState, useEffect } from 'react'; 3 | import type { LineContentProps } from './types'; 4 | import { G, Line } from 'react-native-svg'; 5 | import { useRadialSlider } from './hooks'; 6 | import { Colors } from '../../theme'; 7 | 8 | const LineContent = (props: LineContentProps) => { 9 | const [markerPositionValues, setMarkerPositionValues] = useState([]); 10 | const { 11 | radius = 100, 12 | linearGradient = [], 13 | thumbBorderWidth = 5, 14 | markerLineSize = 50, 15 | lineColor = Colors.grey, 16 | lineSpace = 3, 17 | min = 0, 18 | max = 100, 19 | markerValue, 20 | isHideMarkerLine, 21 | fixedMarker = false, 22 | value, 23 | markerValueInterval = 10, 24 | } = props; 25 | 26 | const { 27 | angle, 28 | lineCount, 29 | lines, 30 | lineHeight, 31 | isMarkerVariant, 32 | marks, 33 | isRadialCircleVariant, 34 | isRadialSliderVariant, 35 | isSpeedoMeterVariant, 36 | } = useRadialSlider(props); 37 | 38 | const markerInnerValue = Math.round((max / markerValueInterval) as number); 39 | 40 | useEffect(() => { 41 | const arr: any = []; 42 | for (let i = 0; i < marks.length; i = i + markerInnerValue) { 43 | arr.push(marks[i].value); 44 | } 45 | setMarkerPositionValues(arr); 46 | }, [markerInnerValue, marks, max]); 47 | 48 | return ( 49 | 50 | {lines.map((_value, index) => { 51 | const plusActiveIndex = index === 0 ? 0 : 1; 52 | const activeIndex = 53 | (((((value as number) - min) * 100) / (max - min)) * lineCount) / 54 | 100 + 55 | plusActiveIndex; 56 | 57 | const getMarketIndex = () => { 58 | return markerPositionValues.map((val: number) => { 59 | return Math.floor( 60 | ((((val - min) * 100) / (max - min)) * lineCount) / 100 61 | ); 62 | }); 63 | }; 64 | 65 | const markIndex = Math.floor( 66 | (((((!fixedMarker ? (markerValue as number) : (value as number)) - 67 | min) * 68 | 100) / 69 | (max - min)) * 70 | lineCount) / 71 | 100 72 | ); 73 | 74 | const isMarkerLine = getMarketIndex()?.includes(index); 75 | 76 | const isSpeedoMarker = !isMarkerVariant ? 0 : isMarkerLine ? -10 : 0; 77 | 78 | const isSpeedoMeterMarkerLine = 79 | isRadialCircleVariant || isRadialSliderVariant || isSpeedoMeterVariant 80 | ? false 81 | : isMarkerLine; 82 | 83 | // Calculate the slider point adjustment based on the provided start point 84 | // The values -4 and -2 are used for fine-tuning the adjustment 85 | // -4 accounts for a base adjustment, and -2 is a multiplier applied to the start point 86 | const sliderPointAdjustment = -4 - 2 * (props?.startAngle || 0); 87 | 88 | // Adjust the slider start point based on variant type or use a default value (86) 89 | const adjustedSliderStartPoint = 90 | isRadialCircleVariant && props?.startAngle != null 91 | ? props.startAngle + sliderPointAdjustment 92 | : 86; 93 | 94 | const radialCircleLineRotation = isRadialCircleVariant 95 | ? adjustedSliderStartPoint 96 | : 90; 97 | 98 | return ( 99 | 100 | {(index % lineSpace === 0 || 101 | index === markIndex || 102 | isSpeedoMeterMarkerLine) && ( 103 | 107 | index || 120 | (index === markIndex && !isHideMarkerLine) 121 | ? Platform.OS === 'web' 122 | ? linearGradient[0].color 123 | : 'url(#gradient)' 124 | : lineColor 125 | } 126 | fill="none" 127 | strokeLinecap="round" 128 | /> 129 | 130 | )} 131 | 132 | ); 133 | })} 134 | 135 | ); 136 | }; 137 | 138 | export default LineContent; 139 | -------------------------------------------------------------------------------- /src/components/RadialSlider/MarkerValueContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import type { MarkerValueContentProps } from './types'; 3 | import { G, Text as SVGText } from 'react-native-svg'; 4 | import { useRadialSlider } from './hooks'; 5 | 6 | const MarkerValueContent = (props: MarkerValueContentProps) => { 7 | const { 8 | radius = 100, 9 | thumbBorderWidth = 5, 10 | min = 0, 11 | max = 100, 12 | markerValue, 13 | fixedMarker = false, 14 | markerValueInterval = 10, 15 | value, 16 | markerValueColor, 17 | } = props; 18 | 19 | const { lineHeight, lineCount, angle, marks, centerValue } = 20 | useRadialSlider(props); 21 | 22 | return ( 23 | <> 24 | {marks.map((mark: { value: number }, index: number) => { 25 | const markIndex = Math.floor( 26 | (((((!fixedMarker ? (markerValue as number) : (value as number)) - 27 | min) * 28 | 100) / 29 | (max - min)) * 30 | lineCount) / 31 | 100 32 | ); 33 | 34 | const maxCount = (lineCount / max) as number; 35 | 36 | const markerInnerValue = Math.round( 37 | (max / markerValueInterval) as number 38 | ); 39 | 40 | // if number is below 99(two digit number) then we set -2 for x property in svg Text 41 | const twoDigitsPositionValue = max < 99 ? -2 : -3; 42 | 43 | const getTransformValue = () => { 44 | return `rotate(92) translate(${twoDigitsPositionValue})`; 45 | }; 46 | 47 | const getTextPositionValue = (type: string) => { 48 | if (mark?.value < centerValue) { 49 | return type === 'x' ? '0' : '-85'; 50 | } else { 51 | return type === 'x' ? twoDigitsPositionValue : '-85'; 52 | } 53 | }; 54 | 55 | return ( 56 | 57 | {(index % markerInnerValue === 0 || index === markIndex) && ( 58 | 62 | 71 | 72 | )} 73 | 74 | ); 75 | })} 76 | 77 | ); 78 | }; 79 | 80 | export default MarkerValueContent; 81 | -------------------------------------------------------------------------------- /src/components/RadialSlider/NeedleContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useRadialSlider } from './hooks'; 3 | import type { NeedleContentProps } from './types'; 4 | import { Circle, G, Polygon } from 'react-native-svg'; 5 | 6 | const NeedleContent = (props: NeedleContentProps) => { 7 | const { 8 | radius = 100, 9 | min = 0, 10 | max = 100, 11 | markerCircleSize, 12 | markerCircleColor, 13 | markerPositionY, 14 | markerPositionX, 15 | needleBackgroundColor, 16 | needleColor, 17 | needleBorderWidth, 18 | needleHeight, 19 | } = props; 20 | 21 | const { lineCount, lines } = useRadialSlider(props); 22 | 23 | return ( 24 | <> 25 | {lines.map(_value => { 26 | const activeIndex = 27 | (((((props?.value as number) - min) * 100) / (max - min)) * 28 | lineCount) / 29 | 100; 30 | 31 | const needleRotation = activeIndex < 50 ? 122 : 119; 32 | 33 | const circleSize = 34 | Math.round(radius / (markerCircleSize as number)) * 2; 35 | 36 | const dynamicNeedleHeight = 37 | (((needleHeight as number) / radius) as number) * 100 + 5; 38 | 39 | return ( 40 | 47 | 53 | 62 | 63 | ); 64 | })} 65 | 66 | ); 67 | }; 68 | 69 | export default NeedleContent; 70 | -------------------------------------------------------------------------------- /src/components/RadialSlider/RadialSlider.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import Svg, { 3 | Path, 4 | Defs, 5 | LinearGradient, 6 | Stop, 7 | Circle, 8 | NumberProp, 9 | } from 'react-native-svg'; 10 | import { View, Platform, StyleSheet } from 'react-native'; 11 | import type { RadialSliderProps } from './types'; 12 | import { styles } from './styles'; 13 | import { Colors } from '../../theme'; 14 | import { useSliderAnimation, useRadialSlider } from './hooks'; 15 | import { defaultProps } from './SliderDefaultProps'; 16 | import ButtonContent from './ButtonContent'; 17 | import CenterContent from './CenterContent'; 18 | import TailText from './TailText'; 19 | import LineContent from './LineContent'; 20 | 21 | const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => { 22 | const [isStart, setIsStart] = useState(false); 23 | const [iconPosition, setIconPosition] = useState(''); 24 | 25 | const { 26 | step, 27 | radius, 28 | sliderWidth, 29 | sliderTrackColor, 30 | linearGradient, 31 | thumbRadius, 32 | thumbBorderColor, 33 | thumbColor, 34 | thumbBorderWidth, 35 | style, 36 | markerLineSize, 37 | disabled, 38 | contentStyle, 39 | buttonContainerStyle, 40 | min, 41 | max, 42 | isHideSlider, 43 | isHideCenterContent, 44 | isHideTailText, 45 | isHideButtons, 46 | isHideLines, 47 | leftIconStyle, 48 | rightIconStyle, 49 | stroke, 50 | } = props; 51 | 52 | const { panResponder, value, setValue, curPoint, currentRadian, prevValue } = 53 | useSliderAnimation(props); 54 | 55 | const { 56 | svgSize, 57 | containerRef, 58 | startPoint, 59 | endPoint, 60 | startRadian, 61 | radianValue, 62 | isRadialCircleVariant, 63 | centerValue, 64 | } = useRadialSlider(props); 65 | 66 | useEffect(() => { 67 | //check max value length 68 | const maxLength = max?.toString()?.length; 69 | 70 | const timerId = setTimeout(handleValue, maxLength > 2 ? 10 : 100); 71 | return () => clearTimeout(timerId); 72 | }); 73 | 74 | const handleValue = () => { 75 | if (iconPosition === 'up' && max > value) { 76 | isStart && onPressButtons('up'); 77 | } else if (iconPosition === 'down' && min < value) { 78 | isStart && onPressButtons('down'); 79 | } 80 | }; 81 | 82 | const leftButtonStyle = StyleSheet.flatten([ 83 | leftIconStyle, 84 | (disabled || min === value) && { 85 | opacity: 0.5, 86 | }, 87 | ]); 88 | 89 | const rightButtonStyle = StyleSheet.flatten([ 90 | rightIconStyle, 91 | (disabled || max === value) && { 92 | opacity: 0.5, 93 | }, 94 | ]); 95 | 96 | const onLayout = () => { 97 | const ref = containerRef.current as any; 98 | if (ref) { 99 | ref.measure((_x: any, _y: any, _width: any, _height: any) => {}); 100 | } 101 | }; 102 | 103 | const onPressButtons = (type: string) => { 104 | if (type === 'up' && max > value) { 105 | setValue((prevState: number) => { 106 | const calculatedValue = prevState + step; 107 | const roundedValue = parseFloat(calculatedValue.toFixed(1)); 108 | 109 | return roundedValue; 110 | }); 111 | } else if (type === 'down' && min < value) { 112 | setValue((prevState: number) => { 113 | const calculatedValue = prevState - step; 114 | const roundedValue = parseFloat(calculatedValue.toFixed(1)); 115 | prevValue.current = roundedValue; 116 | 117 | return roundedValue; 118 | }); 119 | } 120 | }; 121 | 122 | const circleXPosition = isRadialCircleVariant 123 | ? centerValue < value 124 | ? -7 125 | : 4 126 | : 0; 127 | 128 | const strokeLinecap = isRadialCircleVariant ? 'square' : 'round'; 129 | 130 | return ( 131 | 136 | 143 | 144 | 145 | {linearGradient.map( 146 | ( 147 | item: { 148 | offset: NumberProp | undefined; 149 | color: string | undefined; 150 | }, 151 | index: React.Key | null | undefined 152 | ) => ( 153 | 154 | ) 155 | )} 156 | 157 | 158 | {!isRadialCircleVariant && !isHideTailText && } 159 | {!isHideLines && } 160 | {!isHideSlider && ( 161 | <> 162 | = Math.PI ? '1' : '0' 169 | },1,${endPoint.x},${endPoint.y}`} 170 | /> 171 | = Math.PI ? '1' : '0' 178 | },1,${curPoint.x},${curPoint.y}`} 179 | /> 180 | 189 | 190 | )} 191 | 192 | 193 | {/* Center Content */} 194 | {!isHideCenterContent && } 195 | {/* Button Content */} 196 | {!isRadialCircleVariant && !isHideButtons && ( 197 | 198 | 199 | onPressButtons('down')} 201 | onLongPress={() => { 202 | setIsStart(true); 203 | setIconPosition('down'); 204 | }} 205 | onPressOut={() => setIsStart(false)} 206 | buttonType="left-btn" 207 | style={leftButtonStyle} 208 | disabled={disabled || min === value} 209 | stroke={stroke ?? Colors.blue} 210 | /> 211 | onPressButtons('up')} 214 | onLongPress={() => { 215 | setIsStart(true); 216 | setIconPosition('up'); 217 | }} 218 | onPressOut={() => setIsStart(false)} 219 | style={rightButtonStyle} 220 | buttonType="right-btn" 221 | stroke={stroke ?? Colors.blue} 222 | /> 223 | 224 | 225 | )} 226 | 227 | 228 | ); 229 | }; 230 | 231 | RadialSlider.defaultProps = defaultProps; 232 | export default RadialSlider; 233 | -------------------------------------------------------------------------------- /src/components/RadialSlider/RootSlider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Constants from '../../constants'; 3 | import RadialSlider from './RadialSlider'; 4 | import SpeedoMeter from './SpeedoMeter'; 5 | import type { RootSliderProps, SpeedoMeterProps } from './types'; 6 | import type { defaultSpeedoMeterProps } from './SpeedometerDefaultProps'; 7 | 8 | const RootSlider = (props: RootSliderProps) => { 9 | const { variant } = props; 10 | 11 | return variant === Constants.speedoMeterMarker || 12 | variant === Constants.speedometer ? ( 13 | // @ts-ignore 14 | 18 | ) : ( 19 | 20 | ); 21 | }; 22 | 23 | export default RootSlider; 24 | -------------------------------------------------------------------------------- /src/components/RadialSlider/SliderDefaultProps.ts: -------------------------------------------------------------------------------- 1 | import { Colors } from '../../theme'; 2 | 3 | export const defaultProps = { 4 | radius: 100, 5 | min: 0, 6 | max: 100, 7 | step: 1, 8 | value: 0, 9 | title: '', 10 | subTitle: 'Goal', 11 | unit: 'kCal', 12 | thumbRadius: 18, 13 | thumbColor: Colors.blue, 14 | thumbBorderWidth: 5, 15 | thumbBorderColor: Colors.white, 16 | markerLineSize: 50, 17 | sliderWidth: 18, 18 | sliderTrackColor: Colors.grey, 19 | lineColor: Colors.grey, 20 | lineSpace: 3, 21 | linearGradient: [ 22 | { offset: '0%', color: Colors.skyBlue }, 23 | { offset: '100%', color: Colors.darkBlue }, 24 | ], 25 | onChange: (_v: number) => {}, 26 | onComplete: (_v: number) => {}, 27 | openingRadian: Math.PI / 3, 28 | disabled: false, 29 | isHideSlider: false, 30 | isHideTitle: false, 31 | isHideSubtitle: false, 32 | isHideValue: false, 33 | isHideTailText: false, 34 | isHideButtons: false, 35 | isHideLines: false, 36 | isHideMarkerLine: false, 37 | isHideCenterContent: false, 38 | fixedMarker: false, 39 | variant: 'default', 40 | markerValueInterval: 10, 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/RadialSlider/SpeedoMeter.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import Svg, { 3 | Path, 4 | Defs, 5 | LinearGradient, 6 | Stop, 7 | NumberProp, 8 | Linecap, 9 | } from 'react-native-svg'; 10 | import { View, Platform } from 'react-native'; 11 | import type { SpeedoMeterProps } from './types'; 12 | import { styles } from './styles'; 13 | import { useSliderAnimation, useRadialSlider } from './hooks'; 14 | import CenterContent from './CenterContent'; 15 | import TailText from './TailText'; 16 | import LineContent from './LineContent'; 17 | import NeedleContent from './NeedleContent'; 18 | import { defaultSpeedoMeterProps } from './SpeedometerDefaultProps'; 19 | import MarkerValueContent from './MarkerValueContent'; 20 | 21 | const SpeedoMeter = ( 22 | props: SpeedoMeterProps & typeof defaultSpeedoMeterProps 23 | ) => { 24 | const { 25 | radius, 26 | sliderWidth, 27 | sliderTrackColor, 28 | openingRadian, 29 | linearGradient = [], 30 | style, 31 | markerLineSize, 32 | contentStyle, 33 | isHideSlider, 34 | isHideCenterContent, 35 | isHideTailText, 36 | isHideLines, 37 | unit = '', 38 | strokeLinecap, 39 | max, 40 | unitStyle, 41 | value = 0, 42 | unitValueContentStyle, 43 | min, 44 | } = props; 45 | 46 | const { 47 | value: sliderValue = 0, 48 | setValue, 49 | curPoint, 50 | currentRadian, 51 | } = useSliderAnimation(props); 52 | 53 | useEffect(() => { 54 | if (value < min) { 55 | setValue(min); 56 | } else if (value > max) { 57 | setValue(max); 58 | } else { 59 | setValue(value); 60 | } 61 | }, [max, min, setValue, value]); 62 | 63 | const { 64 | svgSize, 65 | containerRef, 66 | startPoint, 67 | endPoint, 68 | startRadian, 69 | isMarkerVariant, 70 | } = useRadialSlider(props); 71 | 72 | const onLayout = () => { 73 | const ref = containerRef.current as any; 74 | if (ref) { 75 | ref.measure((_x: any, _y: any, _width: any, _height: any) => {}); 76 | } 77 | }; 78 | 79 | return ( 80 | 85 | 92 | 93 | 94 | {linearGradient?.map( 95 | ( 96 | item: { 97 | offset: NumberProp | undefined; 98 | color: string | undefined; 99 | }, 100 | index: React.Key | null | undefined 101 | ) => ( 102 | 103 | ) 104 | )} 105 | 106 | 107 | {!isHideTailText && } 108 | {!isHideLines && ( 109 | 110 | )} 111 | {isMarkerVariant && ( 112 | 113 | )} 114 | 115 | {!isMarkerVariant && !isHideSlider && ( 116 | <> 117 | = Math.PI ? '1' : '0' 124 | },1,${endPoint.x},${endPoint.y}`} 125 | /> 126 | = Math.PI ? '1' : '0' 133 | },1,${curPoint.x},${curPoint.y}`} 134 | /> 135 | 136 | )} 137 | 138 | 139 | 140 | {/* Center Content */} 141 | {!isHideCenterContent && ( 142 | 156 | )} 157 | 158 | 159 | ); 160 | }; 161 | 162 | SpeedoMeter.defaultProps = defaultSpeedoMeterProps; 163 | export default SpeedoMeter; 164 | -------------------------------------------------------------------------------- /src/components/RadialSlider/SpeedometerDefaultProps.ts: -------------------------------------------------------------------------------- 1 | import { Colors } from '../../theme'; 2 | 3 | export const defaultSpeedoMeterProps = { 4 | radius: 100, 5 | min: 0, 6 | max: 100, 7 | step: 1, 8 | value: 0, 9 | title: '', 10 | unit: 'MB/S', 11 | markerLineSize: 50, 12 | sliderWidth: 18, 13 | sliderTrackColor: Colors.grey, 14 | lineColor: Colors.grey, 15 | lineSpace: 3, 16 | linearGradient: [ 17 | { offset: '0%', color: Colors.skyBlue }, 18 | { offset: '100%', color: Colors.darkBlue }, 19 | ], 20 | onChange: (_v: number) => {}, 21 | onComplete: (_v: number) => {}, 22 | openingRadian: Math.PI / 3, 23 | disabled: false, 24 | isHideSlider: false, 25 | isHideTitle: false, 26 | isHideSubtitle: false, 27 | isHideValue: false, 28 | isHideTailText: false, 29 | isHideLines: false, 30 | isHideMarkerLine: false, 31 | isHideCenterContent: false, 32 | fixedMarker: false, 33 | markerCircleSize: 15, 34 | markerCircleColor: Colors.grey, 35 | markerPositionY: 20, 36 | markerPositionX: 20, 37 | needleBackgroundColor: 'purple', 38 | needleColor: '#175BAD', 39 | needleBorderWidth: 1.5, 40 | needleHeight: 30, 41 | variant: 'default', 42 | markerValueInterval: 10, 43 | markerValueColor: Colors.darkCharcoal, 44 | strokeLinecap: 'butt', 45 | }; 46 | -------------------------------------------------------------------------------- /src/components/RadialSlider/TailText.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text as SVGText, G, TSpan } from 'react-native-svg'; 3 | import { useRadialSlider } from './hooks'; 4 | import type { RadialSliderProps, TextTailProps } from './types'; 5 | import { Colors } from '../../theme'; 6 | 7 | const TailText = (props: TextTailProps) => { 8 | const { unit, min, max } = props; 9 | const { startPoint, endPoint } = useRadialSlider(props as RadialSliderProps); 10 | 11 | return ( 12 | <> 13 | 14 | 15 | 16 | {`${min} ${unit}`} 17 | 18 | 19 | 20 | 21 | 22 | 23 | {`${max} ${unit}`} 24 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default TailText; 32 | -------------------------------------------------------------------------------- /src/components/RadialSlider/__tests__/RadialSlider.test.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React from 'react'; 3 | import { render } from '@testing-library/react-native'; 4 | import RadialSlider from '../RadialSlider'; 5 | 6 | jest.useFakeTimers(); 7 | 8 | describe('RadialSlider component', () => { 9 | it('Match Snapshot', () => { 10 | const { toJSON } = render(); 11 | expect(toJSON()).toMatchSnapshot(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/components/RadialSlider/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import useSliderAnimation from './useSliderAnimation'; 2 | import useRadialSlider from './useRadialSlider'; 3 | 4 | export { useRadialSlider, useSliderAnimation }; 5 | -------------------------------------------------------------------------------- /src/components/RadialSlider/hooks/useRadialSlider.ts: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useMemo } from 'react'; 2 | import { 3 | createRange, 4 | getExtraSize, 5 | polarToCartesian, 6 | } from '../../../utils/commonHelpers'; 7 | import type { RadialSliderHookProps } from '../types'; 8 | import Constants from '../../../constants'; 9 | 10 | const useRadialSlider = (props: RadialSliderHookProps) => { 11 | const { 12 | radius = 100, 13 | sliderWidth = 18, 14 | openingRadian = Math.PI / 3, 15 | thumbRadius = 18, 16 | thumbBorderWidth = 5, 17 | min = 0, 18 | max = 200, 19 | variant = 'default', 20 | step = 1, 21 | startAngle = 270, 22 | } = props; 23 | 24 | const centerValue = Math.round((max - min) / 2) as number; 25 | 26 | //For default variant in radial slider 27 | const isRadialSliderVariant = variant === Constants.radialSlider; 28 | 29 | //For radial-circle-slider variant 30 | const isRadialCircleVariant = variant === Constants.radialCircleSlider; 31 | 32 | //For speedometer-marker variant 33 | const isMarkerVariant = variant === Constants.speedoMeterMarker; 34 | 35 | //For speedometer variant 36 | const isSpeedoMeterVariant = variant === Constants.speedometer; 37 | 38 | const radianValue = isRadialCircleVariant ? 0.057 : openingRadian; 39 | 40 | useEffect(() => { 41 | if (isMarkerVariant) 42 | if (min < 0) { 43 | throw 'Negative number is not allowed'; 44 | } else if (max < 0) { 45 | throw 'Negative number is not allowed'; 46 | } 47 | if (max < min) { 48 | throw 'max value should be greater than min'; 49 | } 50 | }, [isMarkerVariant, max, min]); 51 | 52 | const angle = (radianValue * 180.0) / Math.PI; 53 | 54 | const addRadialCircleCount = isRadialCircleVariant ? 6 : 0; 55 | 56 | const lineCount = (360 - angle * 2 + addRadialCircleCount) as number; 57 | 58 | const lines = createRange(min, lineCount + min, 1); 59 | 60 | const svgSize = 61 | radius * 2 + getExtraSize(sliderWidth, thumbRadius, thumbBorderWidth); 62 | 63 | const containerRef = React.createRef(); 64 | 65 | const lineHeight = 66 | getExtraSize(sliderWidth, thumbRadius, thumbBorderWidth) / 2 + 67 | thumbBorderWidth; 68 | 69 | const startRadian = 2 * Math.PI - radianValue; 70 | 71 | const startPoint = polarToCartesian( 72 | startRadian, 73 | radius, 74 | sliderWidth, 75 | thumbRadius, 76 | thumbBorderWidth, 77 | startAngle, 78 | variant 79 | ); 80 | 81 | const endPoint = polarToCartesian( 82 | radianValue, 83 | radius, 84 | sliderWidth, 85 | thumbRadius, 86 | thumbBorderWidth, 87 | startAngle, 88 | variant 89 | ); 90 | 91 | const marks = useMemo(() => { 92 | if (isMarkerVariant) { 93 | const stepsLength = Math.round((max - min) / step); 94 | 95 | return [...Array(stepsLength + 1)].map((_val, index) => { 96 | const isEven = index % 2 === 0; 97 | 98 | return { 99 | isEven, 100 | value: Math.round(index * step), 101 | }; 102 | }); 103 | } else { 104 | const array: any = []; 105 | for (let i = 0; i <= max; i++) { 106 | array.push(i); 107 | } 108 | 109 | return array.map((index: number) => { 110 | const isEven = index % 2 === 0; 111 | 112 | return { 113 | isEven, 114 | value: Math.round(index * step), 115 | }; 116 | }); 117 | } 118 | }, [isMarkerVariant, max, min, step]); 119 | 120 | return { 121 | angle, 122 | lineCount, 123 | lines, 124 | svgSize, 125 | containerRef, 126 | lineHeight, 127 | startPoint, 128 | endPoint, 129 | startRadian, 130 | radianValue, 131 | isMarkerVariant, 132 | marks, 133 | isRadialCircleVariant, 134 | centerValue, 135 | isRadialSliderVariant, 136 | isSpeedoMeterVariant, 137 | }; 138 | }; 139 | 140 | export default useRadialSlider; 141 | -------------------------------------------------------------------------------- /src/components/RadialSlider/hooks/useSliderAnimation.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from 'react'; 2 | import { 3 | GestureResponderEvent, 4 | PanResponder, 5 | PanResponderGestureState, 6 | } from 'react-native'; 7 | import { 8 | cartesianToPolar, 9 | getCurrentRadian, 10 | getRadianByValue, 11 | polarToCartesian, 12 | } from '../../../utils/commonHelpers'; 13 | import type { RadialSliderAnimationHookProps } from '../types'; 14 | import useRadialSlider from './useRadialSlider'; 15 | 16 | interface StartCartesianProps { 17 | x: number; 18 | y: number; 19 | } 20 | 21 | const useSliderAnimation = (props: RadialSliderAnimationHookProps) => { 22 | const { 23 | step = 1, 24 | radius = 100, 25 | sliderWidth = 18, 26 | thumbRadius = 18, 27 | thumbBorderWidth = 5, 28 | disabled, 29 | min = 0, 30 | onChange = () => {}, 31 | max = 100, 32 | onComplete = () => {}, 33 | startAngle = 270, 34 | variant = 'default', 35 | } = props; 36 | 37 | let moveStartValue: number; 38 | let startCartesian: StartCartesianProps; 39 | let moveStartRadian: number; 40 | const { radianValue } = useRadialSlider(props); 41 | const prevValue = useRef(props.value > min ? props.value : min); 42 | 43 | const [value, setValue] = useState( 44 | props?.value < min ? min : props?.value > max ? max : props?.value 45 | ); 46 | 47 | useEffect(() => { 48 | if (max < props?.value) { 49 | setValue(max); 50 | } else if (min > props?.value) { 51 | setValue(min); 52 | } 53 | // eslint-disable-next-line react-hooks/exhaustive-deps 54 | }, [max, min]); 55 | 56 | useEffect(() => { 57 | if (min <= props?.value && max >= props?.value) { 58 | setValue(props?.value); 59 | prevValue.current = props?.value; 60 | } 61 | // eslint-disable-next-line react-hooks/exhaustive-deps 62 | }, [props?.value]); 63 | 64 | useEffect(() => { 65 | onChange(value); 66 | prevValue.current = value; 67 | // eslint-disable-next-line react-hooks/exhaustive-deps 68 | }, [value]); 69 | 70 | const handlePanResponderGrant = () => { 71 | moveStartValue = prevValue.current; 72 | moveStartRadian = getRadianByValue( 73 | prevValue.current, 74 | radianValue, 75 | max, 76 | min 77 | ); 78 | startCartesian = polarToCartesian( 79 | moveStartRadian, 80 | radius, 81 | sliderWidth, 82 | thumbRadius, 83 | thumbBorderWidth as number, 84 | startAngle, 85 | variant 86 | ); 87 | return true; 88 | }; 89 | 90 | const handlePanResponderMove = ( 91 | _e: GestureResponderEvent, 92 | gestureState: PanResponderGestureState 93 | ) => { 94 | if (disabled) { 95 | return; 96 | } 97 | let { x, y } = startCartesian; 98 | x += gestureState.dx; 99 | y += gestureState.dy; 100 | 101 | const radian = cartesianToPolar( 102 | x, 103 | y, 104 | radius, 105 | sliderWidth, 106 | thumbRadius, 107 | thumbBorderWidth as number, 108 | startAngle, 109 | variant 110 | ); 111 | 112 | const ratio = 113 | (moveStartRadian - radian) / ((Math.PI - (radianValue as number)) * 2); 114 | 115 | const diff = max - min; 116 | 117 | let nValue: any; 118 | if (step) { 119 | nValue = moveStartValue + Math.round((ratio * diff) / step) * step; 120 | } else { 121 | nValue = moveStartValue + ratio * diff; 122 | } 123 | nValue = Math.max(min, Math.min(max, nValue)); 124 | 125 | setValue((prevState: number) => { 126 | const roundedValue = parseFloat(nValue.toFixed(1)); 127 | prevValue.current = 128 | Math.abs(roundedValue - prevState) > diff / 4 129 | ? prevState 130 | : roundedValue; 131 | return Math.abs(roundedValue - prevState) > diff / 4 132 | ? prevState 133 | : roundedValue; 134 | }); 135 | 136 | onChange(prevValue.current); 137 | }; 138 | 139 | const handlePanResponderEnd = () => { 140 | if (disabled) { 141 | return; 142 | } 143 | onComplete(prevValue.current); 144 | }; 145 | 146 | const panResponder = useRef( 147 | PanResponder.create({ 148 | onStartShouldSetPanResponder: () => true, 149 | onMoveShouldSetPanResponder: () => false, 150 | onPanResponderGrant: handlePanResponderGrant, 151 | onPanResponderMove: handlePanResponderMove, 152 | onPanResponderRelease: handlePanResponderEnd, 153 | onPanResponderTerminationRequest: () => false, 154 | onPanResponderTerminate: handlePanResponderEnd, 155 | }) 156 | ).current; 157 | 158 | const currentRadian = getCurrentRadian(value, radianValue, max, min); 159 | 160 | const curPoint = polarToCartesian( 161 | currentRadian, 162 | radius, 163 | sliderWidth, 164 | thumbRadius, 165 | thumbBorderWidth as number, 166 | startAngle, 167 | variant 168 | ); 169 | 170 | return { 171 | panResponder, 172 | prevValue, 173 | value, 174 | setValue, 175 | curPoint, 176 | currentRadian, 177 | }; 178 | }; 179 | 180 | export default useSliderAnimation; 181 | -------------------------------------------------------------------------------- /src/components/RadialSlider/index.ts: -------------------------------------------------------------------------------- 1 | import RootSlider from './RootSlider'; 2 | 3 | export { RootSlider as RadialSlider }; 4 | export type { 5 | RadialSliderProps, 6 | SpeedoMeterProps, 7 | RootSliderProps, 8 | } from './types'; 9 | -------------------------------------------------------------------------------- /src/components/RadialSlider/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { 3 | Colors, 4 | horizontalScale, 5 | moderateScale, 6 | verticalScale, 7 | } from '../../theme'; 8 | 9 | export const styles = StyleSheet.create({ 10 | container: { 11 | justifyContent: 'center', 12 | alignItems: 'center', 13 | }, 14 | content: { 15 | justifyContent: 'center', 16 | alignItems: 'center', 17 | position: 'absolute', 18 | left: 0, 19 | top: 0, 20 | bottom: 0, 21 | right: 0, 22 | }, 23 | statusView: { 24 | position: 'absolute', 25 | top: -10, 26 | right: -25, 27 | }, 28 | statusValueText: { 29 | fontSize: moderateScale(18), 30 | marginTop: verticalScale(-5), 31 | marginBottom: verticalScale(-5), 32 | }, 33 | valueText: { 34 | fontSize: moderateScale(40), 35 | }, 36 | valueUnit: { 37 | fontSize: moderateScale(15), 38 | marginLeft: horizontalScale(5), 39 | }, 40 | statusValueUnit: { 41 | fontSize: moderateScale(12), 42 | marginTop: verticalScale(-5), 43 | paddingLeft: horizontalScale(2), 44 | }, 45 | buttonsWrapper: { 46 | position: 'absolute', 47 | bottom: 35, 48 | justifyContent: 'center', 49 | alignItems: 'center', 50 | }, 51 | large_header: { 52 | color: Colors.darkBlue, 53 | fontWeight: '600', 54 | fontSize: moderateScale(27), 55 | }, 56 | center: { 57 | flexDirection: 'row', 58 | alignItems: 'center', 59 | justifyContent: 'center', 60 | }, 61 | helperText: { 62 | color: Colors.darkCharcoal, 63 | fontWeight: '400', 64 | fontSize: moderateScale(14), 65 | }, 66 | hideValue: { 67 | flexDirection: 'row', 68 | alignItems: 'center', 69 | }, 70 | hideCenterContent: { 71 | justifyContent: 'center', 72 | alignItems: 'center', 73 | marginTop: verticalScale(-20), 74 | }, 75 | hideStatus: { 76 | flexDirection: 'row', 77 | alignItems: 'center', 78 | marginTop: verticalScale(3), 79 | }, 80 | subTitleWidth: { 81 | textAlign: 'center', 82 | width: horizontalScale(120), 83 | }, 84 | centerText: { 85 | flexDirection: 'column', 86 | }, 87 | centerTextView: { 88 | marginTop: verticalScale(110), 89 | marginRight: horizontalScale(20), 90 | }, 91 | speedValueUnit: { 92 | paddingLeft: horizontalScale(0), 93 | }, 94 | }); 95 | -------------------------------------------------------------------------------- /src/components/RadialSlider/types.ts: -------------------------------------------------------------------------------- 1 | import type { ViewStyle, TextStyle, StyleProp } from 'react-native'; 2 | import type { Linecap } from 'react-native-svg'; 3 | 4 | type Enumerate< 5 | N extends number, 6 | Acc extends number[] = [] 7 | > = Acc['length'] extends N 8 | ? Acc[number] 9 | : Enumerate; 10 | 11 | export type Range = Exclude< 12 | Enumerate, 13 | Enumerate 14 | >; 15 | 16 | type RadialSliderExcludedProps = { 17 | unitValueContentStyle?: StyleProp; 18 | markerCircleSize?: never; 19 | markerCircleColor?: never; 20 | markerPositionY?: never; 21 | markerPositionX?: never; 22 | needleBackgroundColor?: never; 23 | needleColor?: never; 24 | needleBorderWidth?: never; 25 | needleHeight?: never; 26 | markerValueInterval?: never; 27 | markerValueColor?: never; 28 | strokeLinecap?: never; 29 | }; 30 | 31 | export type CenterContentProps = { 32 | title?: string; 33 | subTitle?: string; 34 | unit?: string; 35 | titleStyle?: StyleProp; 36 | subTitleStyle?: StyleProp; 37 | valueStyle?: StyleProp; 38 | unitStyle?: StyleProp; 39 | isHideTitle?: boolean; 40 | isHideSubtitle?: boolean; 41 | isHideValue?: boolean; 42 | value?: number; 43 | centerContentStyle?: StyleProp; 44 | unitValueContentStyle?: StyleProp; 45 | }; 46 | 47 | export type LineContentProps = { 48 | radius?: number; 49 | linearGradient?: { offset: string; color: string }[]; 50 | thumbBorderWidth?: number; 51 | markerLineSize?: number; 52 | lineColor?: string; 53 | lineSpace?: number; 54 | min?: number; 55 | max?: number; 56 | markerValue?: number; 57 | isHideMarkerLine?: boolean; 58 | fixedMarker?: boolean; 59 | value?: number; 60 | markerValueInterval?: number; 61 | startAngle?: number; 62 | }; 63 | 64 | export type TextTailProps = { 65 | min?: number; 66 | max?: number; 67 | unit?: string; 68 | }; 69 | 70 | export type RadialSliderHookProps = { 71 | radius?: number; 72 | sliderWidth?: number; 73 | openingRadian?: number; 74 | thumbRadius?: number; 75 | thumbBorderWidth?: number; 76 | min?: number; 77 | max?: number; 78 | variant?: 'radial-circle-slider' | string; 79 | step?: number; 80 | startAngle?: number; 81 | }; 82 | 83 | export type MarkerValueContentProps = { 84 | radius?: number; 85 | thumbBorderWidth?: number; 86 | min?: number; 87 | max?: number; 88 | markerValue?: number; 89 | fixedMarker?: boolean; 90 | markerValueInterval?: number; 91 | value?: number; 92 | markerValueColor?: string; 93 | }; 94 | 95 | export type RadialSliderAnimationHookProps = { 96 | step?: number; 97 | radius?: number; 98 | sliderWidth?: number; 99 | thumbRadius?: number; 100 | thumbBorderWidth?: number; 101 | disabled?: boolean; 102 | min?: number; 103 | max?: number; 104 | onChange?: (v: number) => void; 105 | onComplete?: (v: number) => void; 106 | value: number; 107 | variant?: string; 108 | startAngle?: number; 109 | }; 110 | 111 | export type NeedleContentProps = { 112 | radius?: number; 113 | min?: number; 114 | max?: number; 115 | markerCircleSize?: number; 116 | markerCircleColor?: string; 117 | markerPositionY?: number; 118 | markerPositionX?: number; 119 | needleBackgroundColor?: string; 120 | needleColor?: string; 121 | needleBorderWidth?: number; 122 | needleHeight?: number; 123 | value?: number; 124 | }; 125 | 126 | export type RootSliderProps = 127 | | ({ 128 | variant?: 'radial-circle-slider'; 129 | } & RadialSliderExcludedProps & 130 | RadialSliderProps) 131 | | ({ 132 | variant: 'speedometer-marker' | 'speedometer'; 133 | } & SpeedoMeterProps); 134 | 135 | export type RadialSliderProps = { 136 | /** 137 | * Radious of radial slider. 138 | */ 139 | radius?: number; 140 | /** 141 | * Min value of radial slider. 142 | */ 143 | min?: number; 144 | /** 145 | * Max value to radial slider. 146 | */ 147 | max?: number; 148 | /** 149 | * Radial slider step value. 150 | */ 151 | step?: number; 152 | /** 153 | * Show marker on specific number. 154 | */ 155 | markerValue?: number; 156 | /** 157 | * Show selection upto this value. 158 | */ 159 | value?: number; 160 | /** 161 | * Radial slider title. 162 | */ 163 | title?: string; 164 | /** 165 | * Radial slider subtitle. 166 | */ 167 | subTitle?: string; 168 | /** 169 | * Radial slider unit. 170 | */ 171 | unit?: string; 172 | /** 173 | * Radious of thumb/knob. 174 | */ 175 | thumbRadius?: number; 176 | /** 177 | * Color of thumb/knob. 178 | */ 179 | thumbColor?: string; 180 | /** 181 | * Border width of thumb/knob. 182 | */ 183 | thumbBorderWidth?: number; 184 | /** 185 | * Border color of thumb/knob. 186 | */ 187 | thumbBorderColor?: string; 188 | /** 189 | * @description Starting angle position of the thumb/knob. 190 | * @default 270 191 | * @static {Range<0, 360>} startAngle - The starting angle should be a value within the Range of 0 to 360 (inclusive). 192 | */ 193 | startAngle?: Range<0, 360>; 194 | /** 195 | * Size of marker line. 196 | */ 197 | markerLineSize?: number; 198 | /** 199 | * Width of slider. 200 | */ 201 | sliderWidth?: number; 202 | /** 203 | * Color of unselected slider track. 204 | */ 205 | sliderTrackColor?: string; 206 | /** 207 | * Color of unselected lines. 208 | */ 209 | lineColor?: string; 210 | /** 211 | * Space between each line. 212 | */ 213 | lineSpace?: number; 214 | /** 215 | * Gradient color of selected track. 216 | */ 217 | linearGradient?: { offset: string; color: string }[]; 218 | /** 219 | * Callback function which fired on change in track. 220 | */ 221 | onChange?: (v: number) => void; 222 | /** 223 | * Callback function which defines what to do after completion. 224 | */ 225 | onComplete?: (v: number) => void; 226 | /** 227 | * Center content styling. 228 | */ 229 | centerContentStyle?: StyleProp; 230 | /** 231 | * Status title container styling. 232 | */ 233 | titleStyle?: StyleProp; 234 | /** 235 | * Status subtitle text styling. 236 | */ 237 | subTitleStyle?: StyleProp; 238 | /** 239 | * Center value style. 240 | */ 241 | valueStyle?: StyleProp; 242 | /** 243 | * Button container styling. 244 | */ 245 | buttonContainerStyle?: StyleProp; 246 | /** 247 | * Left Icon styling. 248 | */ 249 | leftIconStyle?: StyleProp; 250 | /** 251 | * Right Icon styling. 252 | */ 253 | rightIconStyle?: StyleProp; 254 | /** 255 | * Whole content styling. 256 | */ 257 | contentStyle?: StyleProp; 258 | /** 259 | * Unit text styling. 260 | */ 261 | unitStyle?: StyleProp; 262 | /** 263 | * Inner container styling. 264 | */ 265 | style?: StyleProp; 266 | /** 267 | * Radian of the slider. 268 | */ 269 | openingRadian?: number; 270 | /** 271 | * If true, buttons will be in disabled state. 272 | */ 273 | disabled?: boolean; 274 | /** 275 | * If true, slider will be hidden. 276 | */ 277 | isHideSlider?: boolean; 278 | /** 279 | * If true, center content will be hidden. 280 | */ 281 | isHideCenterContent?: boolean; 282 | /** 283 | * If true, title will be hidden. 284 | */ 285 | isHideTitle?: boolean; 286 | /** 287 | * If true, subtitle will be hidden. 288 | */ 289 | isHideSubtitle?: boolean; 290 | /** 291 | * If true, value will be hidden. 292 | */ 293 | isHideValue?: boolean; 294 | /** 295 | * If true, tail text will be hidden. 296 | */ 297 | isHideTailText?: boolean; 298 | /** 299 | * If true, buttons will be hidden. 300 | */ 301 | isHideButtons?: boolean; 302 | /** 303 | * If true, lines will be hidden. 304 | */ 305 | isHideLines?: boolean; 306 | /** 307 | * If true, marked lines will be hidden. 308 | */ 309 | isHideMarkerLine?: boolean; 310 | /** 311 | * If true, marked value will be hidden. 312 | */ 313 | fixedMarker?: boolean; 314 | /** 315 | * Color for icon 316 | */ 317 | stroke?: string; 318 | }; 319 | 320 | export interface ButtonProps { 321 | /** 322 | * If true, buttons will be in disabled state. 323 | */ 324 | disabled?: boolean; 325 | /** 326 | * Based on click value will be increased or decreased 327 | */ 328 | onPress?: () => void; 329 | /** 330 | * Button container styling. 331 | */ 332 | style: any; 333 | /** 334 | * buttonType for the icon 335 | */ 336 | buttonType?: string; 337 | /** 338 | * Color for icon 339 | */ 340 | stroke?: string; 341 | /** 342 | * Based on click, the value will continue to increase or decrease 343 | */ 344 | onLongPress?: () => void; 345 | /** 346 | * Based on click, the value will stop to continue to increase or decrease 347 | */ 348 | onPressOut?: () => void; 349 | } 350 | 351 | export type SpeedoMeterProps = RadialSliderProps & { 352 | /** 353 | * SpeedoMeter content styling. 354 | */ 355 | unitValueContentStyle?: StyleProp; 356 | /** 357 | * Size for marker circle. 358 | */ 359 | markerCircleSize?: number; 360 | /** 361 | * Color for marker circle. 362 | */ 363 | markerCircleColor?: string; 364 | /** 365 | * Marker position for up and down. 366 | */ 367 | markerPositionY?: number; 368 | /** 369 | * Marker position for right and left. 370 | */ 371 | markerPositionX?: number; 372 | /** 373 | * BackgroundColor for needle. 374 | */ 375 | needleBackgroundColor?: string; 376 | /** 377 | * Color for needle. 378 | */ 379 | needleColor?: string; 380 | /** 381 | * Width of needle. 382 | */ 383 | needleBorderWidth?: number; 384 | /** 385 | * Width of needle. 386 | */ 387 | needleHeight?: number; 388 | /** 389 | * Show number of value in sequence. 390 | */ 391 | markerValueInterval?: number; 392 | /** 393 | * Color for marker value. 394 | */ 395 | markerValueColor?: string; 396 | /** 397 | * StrokeLineCap for path. 398 | */ 399 | strokeLinecap?: Linecap | string; 400 | centerContentStyle?: never; 401 | buttonContainerStyle?: never; 402 | leftIconStyle?: never; 403 | rightIconStyle?: never; 404 | subTitleStyle?: never; 405 | disabled?: never; 406 | isHideButtons?: never; 407 | subTitle?: never; 408 | thumbColor?: never; 409 | thumbBorderWidth?: never; 410 | thumbBorderColor?: never; 411 | thumbRadius?: never; 412 | title?: never; 413 | titleStyle?: never; 414 | step?: never; 415 | }; 416 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './RadialSlider'; 2 | -------------------------------------------------------------------------------- /src/constants/index.ts: -------------------------------------------------------------------------------- 1 | const Constants = { 2 | radialSlider: 'default', 3 | speedometer: 'speedometer', 4 | radialCircleSlider: 'radial-circle-slider', 5 | speedoMeterMarker: 'speedometer-marker', 6 | }; 7 | 8 | export default Constants; 9 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | -------------------------------------------------------------------------------- /src/theme/Colors.ts: -------------------------------------------------------------------------------- 1 | const colors = { 2 | darkCharcoal: '#333333', 3 | white: '#FFFFFF', 4 | blue: '#008ABC', 5 | grey: '#E5E5E5', 6 | pink: '#ffaca6', 7 | red: '#EA4800', 8 | darkBlue: '#0B3471', 9 | skyBlue: '#0F91E3', 10 | }; 11 | 12 | export default colors; 13 | -------------------------------------------------------------------------------- /src/theme/Metrics.ts: -------------------------------------------------------------------------------- 1 | import { Dimensions } from 'react-native'; 2 | const { width, height } = Dimensions.get('window'); 3 | //Guideline sizes are based on standard ~5" screen mobile device 4 | const guidelineBaseWidth = 375; 5 | const guidelineBaseHeight = 812; 6 | const horizontalScale = (size: number) => (width / guidelineBaseWidth) * size; 7 | const verticalScale = (size: number) => (height / guidelineBaseHeight) * size; 8 | const moderateScale = (size: number, factor = 0.5) => 9 | size + (horizontalScale(size) - size) * factor; 10 | // Used via Metrics.baseMargin 11 | const Metrics = { 12 | screenWidth: width < height ? width : height, 13 | screenHeight: width < height ? height : width, 14 | }; 15 | export { horizontalScale, verticalScale, moderateScale, Metrics }; 16 | -------------------------------------------------------------------------------- /src/theme/index.ts: -------------------------------------------------------------------------------- 1 | import Colors from './Colors'; 2 | import { 3 | Metrics, 4 | moderateScale, 5 | verticalScale, 6 | horizontalScale, 7 | } from './Metrics'; 8 | export { Colors, Metrics, moderateScale, verticalScale, horizontalScale }; 9 | -------------------------------------------------------------------------------- /src/utils/commonHelpers.ts: -------------------------------------------------------------------------------- 1 | import Constants from '../constants'; 2 | 3 | const createRange = (start: any, end: number, step: number | undefined) => { 4 | const lists = []; 5 | if (step === undefined) { 6 | step = 1; 7 | } 8 | if (step > 0) { 9 | for (var i = start; i <= end; i += step) { 10 | lists.push(i); 11 | } 12 | } else { 13 | for (var i = start; i >= end; i += step) { 14 | lists.push(i); 15 | } 16 | } 17 | return lists; 18 | }; 19 | 20 | const getExtraSize = ( 21 | sliderWidth: number, 22 | thumbRadius: number, 23 | thumbBorderWidth: number 24 | ) => { 25 | return Math.max(sliderWidth, (thumbRadius + thumbBorderWidth) * 2); 26 | }; 27 | 28 | const getRadianByValue = ( 29 | nvalue: number, 30 | openingRadian: number, 31 | max: number, 32 | min: number 33 | ) => { 34 | return ( 35 | ((Math.PI - openingRadian) * 2 * (max - nvalue)) / (max - min) + 36 | openingRadian 37 | ); 38 | }; 39 | 40 | const calculateRadianForCircleVariant = (sliderStartPointValue: number) => { 41 | const angleOffset = 90 + sliderStartPointValue; 42 | const offsetRadian = (angleOffset * Math.PI) / 180; 43 | return offsetRadian; 44 | }; 45 | 46 | const polarToCartesian = ( 47 | radian: number, 48 | radius: number, 49 | sliderWidth: number, 50 | thumbRadius: number, 51 | thumbBorderWidth: number, 52 | sliderPoint: number, 53 | variant: string 54 | ) => { 55 | const calculatedRadian = 56 | variant === Constants.radialCircleSlider 57 | ? radian + calculateRadianForCircleVariant(sliderPoint) 58 | : radian; 59 | 60 | const distance = 61 | radius + getExtraSize(sliderWidth, thumbBorderWidth, thumbRadius) / 2; 62 | const x = distance + radius * Math.sin(calculatedRadian); 63 | const y = distance + radius * Math.cos(calculatedRadian); 64 | 65 | return { x, y }; 66 | }; 67 | 68 | const cartesianToPolar = ( 69 | x: number, 70 | y: number, 71 | radius: number, 72 | sliderWidth: number, 73 | thumbRadius: number, 74 | thumbBorderWidth: number, 75 | sliderPoint: number, 76 | variant: string 77 | ) => { 78 | const TWO_PI = 2 * Math.PI; 79 | 80 | // Calculate the distance from the center to the edge considering extra size 81 | const distance = 82 | radius + getExtraSize(sliderWidth, thumbRadius, thumbBorderWidth) / 2; 83 | 84 | if (variant === Constants.radialCircleSlider) { 85 | // Calculate the angle from the center to the given point 86 | const angleFromCenter = Math.atan2(y - distance, x - distance); 87 | 88 | // Convert slider point from degrees to radians 89 | let angle = (sliderPoint * Math.PI) / 180; 90 | // Normalize the angle to be between 0 and 2*PI 91 | angle = (TWO_PI - angle) % TWO_PI; 92 | 93 | // Calculate the clockwise difference between the slider point and the angle from the center 94 | let clockwiseDifference = angle - angleFromCenter; 95 | 96 | if (clockwiseDifference < 0) { 97 | clockwiseDifference += TWO_PI; 98 | } 99 | 100 | // Normalize the result to be between 0 and 2*PI 101 | clockwiseDifference %= TWO_PI; 102 | 103 | return clockwiseDifference; 104 | } else { 105 | if (x === distance) { 106 | return y > distance ? 0 : Math.PI / 2; 107 | } 108 | // Calculate the angle from the center to the given point 109 | const angleFromCenterToGivenPoint = Math.atan( 110 | (y - distance) / (x - distance) 111 | ); 112 | // Determine the quadrant and adjust the angle accordingly 113 | return ( 114 | (x < distance ? (Math.PI * 3) / 2 : Math.PI / 2) - 115 | angleFromCenterToGivenPoint 116 | ); 117 | } 118 | }; 119 | 120 | const getCurrentRadian = ( 121 | value: number, 122 | openingRadian: number, 123 | max: number, 124 | min: number 125 | ) => { 126 | return getRadianByValue(value, openingRadian!, max, min); 127 | }; 128 | 129 | export { 130 | polarToCartesian, 131 | createRange, 132 | getRadianByValue, 133 | getExtraSize, 134 | cartesianToPolar, 135 | getCurrentRadian, 136 | }; 137 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "declaration": true, 5 | "esModuleInterop": true, 6 | "allowUnreachableCode": false, 7 | "allowUnusedLabels": false, 8 | "jsx": "react", 9 | "lib": ["ESNext"], 10 | "module": "ESNext", 11 | "importsNotUsedAsValues": "error", 12 | "forceConsistentCasingInFileNames": true, 13 | "moduleResolution": "Node", 14 | "noFallthroughCasesInSwitch": true, 15 | "noImplicitReturns": true, 16 | "noImplicitUseStrict": false, 17 | "noStrictGenericChecks": false, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "resolveJsonModule": true, 21 | "noEmitOnError": true, 22 | "outDir": "./lib", 23 | "skipLibCheck": true, 24 | "sourceMap": true, 25 | "strict": true, 26 | "target": "ES2018", 27 | }, 28 | "exclude": ["**/__tests__/*"], 29 | "include": ["src"] 30 | } 31 | --------------------------------------------------------------------------------