import * as React from "react" ; import { Dimensions , View , StyleSheet } from "react-native" ; import { Svg , DangerZone } from "expo" ; import Cursor from "./Cursor" ; import { normalizeAngle } from "./Math" ; const { Animated } = DangerZone ; const { Value , multiply , sub , concat , lessThan , cond , and , greaterOrEq , block , debug , modulo , sqrt , add , or , } = Animated ; const { width } = Dimensions . get ( "window" ) ; const size = width - 32 ; const padding = 25 ; const radius = size / 2 - padding ; const { Defs , LinearGradient , Stop , Circle , G , Path , } = Svg ; const AnimatedCircle = Animated . createAnimatedComponent ( Circle ) ; export default ( ) => { const start = new Value ( 0 ) ; const end = new Value ( 0 ) ; const circumference = radius * 2 * Math . PI ; const delta = sub ( cond ( lessThan ( start , end ) , end , add ( end , Math . PI * 2 ) ) , start ) ; const strokeDashoffset = multiply ( delta , radius ) ; const rotateZ = concat ( sub ( Math . PI * 2 , start ) , "rad" ) ; return ( < View style = { styles . container } > < Animated . View style = { { ... StyleSheet . absoluteFillObject , transform : [ { rotateZ } , ] , } } > < Svg width = { size } height = { size } > < Defs > < LinearGradient id = "grad" x1 = "0" y1 = "0" x2 = "100%" y2 = "0" > < Stop offset = "0" stopColor = "#f7cd46" / > < Stop offset = "1" stopColor = "#ef9837" / > < /LinearGradient> < /Defs> < AnimatedCircle strokeWidth = { padding * 2 } stroke = "rgb(50, 50, 50)" fill = "none" cx = { size / 2 } cy = { size / 2 } r = { radius } / > < AnimatedCircle strokeWidth = { padding * 2 } stroke = "url(#grad)" fill = "none" cx = { size / 2 } cy = { size / 2 } r = { radius } strokeDasharray = { `${ circumference }, ${ circumference }` } { ... { strokeDashoffset } } /> < /Svg> < /Animated.View> < Animated . View style = { { ... StyleSheet . absoluteFillObject , justifyContent : "center" , alignItems : "center" } } > < Svg width = { size - padding * 4 } height = { size - padding * 4 } viewBox = "0 0 88 88" > < Path fill = "white" d = "M44 8.375a1 1 0 0 0 1-1V1.333a1 1 0 0 0-2 0v6.042a1 1 0 0 0 1 1zM24.822 12.781a1 1 0 1 0 1.732-1l-3.021-5.232a1 1 0 1 0-1.732 1l3.021 5.232zM6.552 23.53l5.232 3.021a.997.997 0 0 0 1.366-.366 1 1 0 0 0-.366-1.366l-5.232-3.021a1 1 0 1 0-1 1.732zM7.378 44.995a1 1 0 0 0 0-2l-6.043.001a1 1 0 0 0 0 2l6.043-.001zM13.149 61.805a.998.998 0 0 0-1.366-.366l-5.234 3.022a1 1 0 1 0 1 1.732l5.234-3.022a1 1 0 0 0 .366-1.366zM26.187 74.843a1 1 0 0 0-1.366.366l-3.022 5.235a1 1 0 0 0 1.732 1l3.022-5.235a1 1 0 0 0-.366-1.366zM43.996 79.617a1 1 0 0 0-1 1l.001 6.045a1 1 0 1 0 2 0l-.001-6.045a1 1 0 0 0-1-1zM63.172 75.211a.999.999 0 1 0-1.732 1l3.025 5.235a1 1 0 1 0 1.732-1l-3.025-5.235zM81.448 64.463l-5.238-3.021a1 1 0 1 0-1 1.732l5.238 3.021a1 1 0 0 0 1-1.732zM86.664 42.997L80.616 43a1 1 0 0 0 .001 1.999h.001l6.047-.003a1 1 0 0 0-.001-1.999zM74.849 26.191a1 1 0 0 0 1.366.366l5.234-3.026a.998.998 0 0 0 .364-1.366.998.998 0 0 0-1.366-.365l-5.234 3.026a.997.997 0 0 0-.364 1.365zM61.812 13.152a.998.998 0 0 0 1.366-.366l3.021-5.238a1 1 0 1 0-1.732-.999l-3.021 5.238a.997.997 0 0 0 .366 1.365zM39.871 5.216a.5.5 0 0 0 .498-.552l-.332-3.148a.5.5 0 1 0-.994.104l.332 3.148a.499.499 0 0 0 .496.448zM35.299 5.466a.5.5 0 0 0 .978-.208l-.659-3.097a.5.5 0 0 0-.978.209l.659 3.096zM31.319 6.587a.5.5 0 0 0 .952-.309l-.979-3.011a.5.5 0 0 0-.951.309l.978 3.011zM27.479 8.117a.5.5 0 0 0 .913-.407l-1.289-2.893a.5.5 0 1 0-.913.407l1.289 2.893zM20.381 12.335a.498.498 0 0 0 .698.11.498.498 0 0 0 .11-.698l-1.862-2.561a.499.499 0 1 0-.808.588l1.862 2.561zM15.824 11.956a.5.5 0 1 0-.744.67l2.12 2.353a.501.501 0 0 0 .744-.67l-2.12-2.353zM14.315 17.938a.498.498 0 0 0 .706-.038.5.5 0 0 0-.037-.706l-2.354-2.118a.5.5 0 1 0-.669.743l2.354 2.119zM11.754 21.184a.497.497 0 0 0 .698-.112.5.5 0 0 0-.111-.698l-2.563-1.86a.5.5 0 0 0-.587.809l2.563 1.861zM4.821 27.1l2.895 1.287a.504.504 0 0 0 .661-.254.5.5 0 0 0-.254-.66l-2.895-1.287a.5.5 0 1 0-.407.914zM3.27 31.288l3.014.978a.5.5 0 0 0 .309-.952l-3.014-.978a.5.5 0 1 0-.309.952zM2.164 35.615l3.1.658a.5.5 0 0 0 .208-.978l-3.1-.658a.5.5 0 1 0-.208.978zM1.516 40.033l3.152.33a.5.5 0 0 0 .105-.994l-3.152-.33a.485.485 0 0 0-.549.445c-.03.275.17.521.444.549zM5.217 48.07a.5.5 0 0 0-.549-.444l-3.151.332a.499.499 0 1 0 .105.994l3.151-.332a.499.499 0 0 0 .444-.55zM5.855 52.102a.505.505 0 0 0-.593-.385l-3.1.659a.5.5 0 0 0 .208.978l3.1-.659a.5.5 0 0 0 .385-.593zM6.912 56.045a.498.498 0 0 0-.63-.321l-3.015.979a.499.499 0 0 0 .155.976.515.515 0 0 0 .154-.024l3.015-.979a.5.5 0 0 0 .321-.631zM8.375 59.855a.501.501 0 0 0-.66-.254L4.819 60.89a.5.5 0 0 0 .407.914l2.896-1.289a.5.5 0 0 0 .253-.66zM12.45 66.915a.498.498 0 0 0-.698-.11l-2.564 1.863a.5.5 0 1 0 .588.808l2.564-1.863a.499.499 0 0 0 .11-.698zM15.019 70.087a.5.5 0 0 0-.706-.037l-2.356 2.121a.501.501 0 0 0 .669.744l2.356-2.121a.501.501 0 0 0 .037-.707zM17.199 73.011l-2.122 2.355a.5.5 0 0 0 .743.67l2.122-2.355a.5.5 0 0 0-.743-.67zM20.379 75.653l-1.864 2.564a.499.499 0 1 0 .808.588l1.864-2.564a.499.499 0 1 0-.808-.588zM28.137 79.619a.5.5 0 0 0-.66.254l-1.29 2.896a.5.5 0 1 0 .913.406l1.29-2.896a.5.5 0 0 0-.253-.66zM31.948 81.082a.5.5 0 0 0-.63.321l-.98 3.016a.5.5 0 0 0 .952.308l.98-3.016a.502.502 0 0 0-.322-.629zM35.89 82.139a.503.503 0 0 0-.593.385l-.66 3.102a.501.501 0 0 0 .978.209l.66-3.102a.5.5 0 0 0-.385-.594zM39.921 82.778a.5.5 0 0 0-.549.444l-.332 3.152a.5.5 0 0 0 .995.106l.332-3.152a.5.5 0 0 0-.446-.55zM48.074 82.778a.498.498 0 0 0-.445.549l.331 3.153a.498.498 0 0 0 .549.445.498.498 0 0 0 .445-.549l-.331-3.153a.499.499 0 0 0-.549-.445zM52.698 82.525a.51.51 0 0 0-.593-.386.5.5 0 0 0-.386.593l.659 3.102a.5.5 0 0 0 .979-.208l-.659-3.101zM56.678 81.404a.5.5 0 1 0-.951.309l.98 3.016a.5.5 0 1 0 .951-.308l-.98-3.017zM60.519 79.874a.5.5 0 0 0-.914.406l1.29 2.896a.5.5 0 1 0 .914-.406l-1.29-2.896zM67.616 75.655a.5.5 0 1 0-.808.588l1.864 2.564a.498.498 0 0 0 .698.11.5.5 0 0 0 .11-.698l-1.864-2.564zM70.796 73.013a.499.499 0 1 0-.742.67l2.122 2.355a.5.5 0 1 0 .742-.67l-2.122-2.355zM73.683 70.053a.5.5 0 1 0-.668.744l2.356 2.12a.496.496 0 0 0 .706-.038.499.499 0 0 0-.038-.706l-2.356-2.12zM76.244 66.809a.5.5 0 0 0-.588.808l2.565 1.861a.501.501 0 0 0 .698-.11.5.5 0 0 0-.11-.698l-2.565-1.861zM83.179 60.893l-2.896-1.287a.5.5 0 0 0-.406.914l2.896 1.287a.5.5 0 0 0 .406-.914zM84.73 56.705l-3.016-.978a.5.5 0 1 0-.309.951l3.016.978a.502.502 0 0 0 .63-.322.498.498 0 0 0-.321-.629zM85.836 52.378l-3.102-.657a.507.507 0 0 0-.593.386.5.5 0 0 0 .386.593l3.102.657a.5.5 0 0 0 .207-.979zM86.482 47.96l-3.152-.33a.498.498 0 0 0-.549.445.499.499 0 0 0 .445.549l3.152.33a.5.5 0 0 0 .104-.994zM82.782 39.923a.5.5 0 0 0 .55.444l3.151-.333a.5.5 0 1 0-.106-.994l-3.151.333a.5.5 0 0 0-.444.55zM82.144 35.892a.501.501 0 0 0 .593.385l3.1-.661a.5.5 0 0 0-.209-.977l-3.1.661a.498.498 0 0 0-.384.592zM81.088 31.948a.5.5 0 0 0 .631.321l3.013-.981a.5.5 0 0 0-.311-.951l-3.013.981a.5.5 0 0 0-.32.63zM79.625 28.137a.5.5 0 0 0 .661.253l2.894-1.29a.5.5 0 1 0-.408-.913l-2.894 1.291a.499.499 0 0 0-.253.659zM75.549 21.076a.498.498 0 0 0 .698.11l2.563-1.863a.5.5 0 1 0-.588-.808l-2.563 1.863a.5.5 0 0 0-.11.698zM72.98 17.904a.497.497 0 0 0 .706.038l2.354-2.121a.499.499 0 0 0 .036-.706.499.499 0 0 0-.706-.037l-2.354 2.121a.5.5 0 0 0-.036.705zM70.429 15.146a.5.5 0 0 0 .372-.166l2.12-2.355a.5.5 0 1 0-.744-.669l-2.12 2.355a.5.5 0 0 0 .372.835zM67.216 12.544a.496.496 0 0 0 .404-.206l1.862-2.564a.5.5 0 1 0-.808-.588l-1.862 2.564a.501.501 0 0 0 .404.794zM59.862 8.373a.5.5 0 0 0 .66-.254l1.289-2.896a.5.5 0 0 0-.914-.407l-1.289 2.896a.5.5 0 0 0 .254.661zM56.052 6.91a.5.5 0 0 0 .63-.322l.979-3.014a.501.501 0 0 0-.321-.63.502.502 0 0 0-.63.321l-.98 3.015a.502.502 0 0 0 .322.63zM52.109 5.854a.5.5 0 0 0 .592-.385l.659-3.101a.5.5 0 1 0-.979-.208l-.659 3.101a.503.503 0 0 0 .387.593zM48.078 5.214a.5.5 0 0 0 .549-.445l.331-3.153a.498.498 0 0 0-.445-.549.496.496 0 0 0-.549.445l-.331 3.153a.498.498 0 0 0 .445.549z" / > < /Svg> < /Animated.View> < Cursor angle = { start } { ... { radius } } /> < Cursor angle = { end } { ... { radius } } /> < /View>); } ; const styles = StyleSheet . create ( { container : { height : size , width : size , } , } ) ;