import React from 'react' ; import { View , StyleSheet } from 'react-native' ; import { ReanimatedArcBase } from './ReanimatedArc' ; import Reanimated from 'react-native-reanimated' ; import { PanGestureHandler } from 'react-native-gesture-handler' ; const { divide , multiply , diffClamp , interpolate } = Reanimated ; const containerWidth = 200 ; class Slider extends React . Component { _touchX = new Reanimated . Value ( 100 ) ; _onPanGestureEvent = Reanimated . event ( [ { nativeEvent : { x : this . _touchX } } ] , { useNativeDriver : true , } ) ; progress = diffClamp ( divide ( this . _touchX , containerWidth ) , 0 , 1 ) ; arcAngle = multiply ( this . progress , 150 ) ; barOpacity = interpolate ( this . progress , { inputRange : [ 0 , 1 ] , outputRange : [ 0.4 , 1 ] , } ) ; render ( ) { return ( < View > < View style = { styles . container } > < ReanimatedArcBase color = "lightgrey" diameter = { containerWidth } width = { 15 } arcSweepAngle = { 150 } lineCap = "round" rotation = { 285 } style = { styles . absolute } / > < Reanimated . View style = { [ styles . absolute , { opacity : this . barOpacity } ] } > < ReanimatedArcBase color = "yellow" diameter = { containerWidth } width = { 15 } arcSweepAngle = { this . arcAngle } lineCap = "round" rotation = { 285 } / > < /Reanimated.View> < View style = { [ styles . absolute , { alignSelf : 'flex-start' } ] } > < PanGestureHandler onGestureEvent = { this . _onPanGestureEvent } > < Reanimated . View style = { { width : containerWidth - 10 , height : 160 , } } /> < /PanGestureHandler> < /View> < /View> < /View>); } } const styles = StyleSheet . create ( { container : { flexDirection : 'row' , position : 'relative' , justifyContent : 'center' , width : 200 , height : 90 , overflow : 'hidden' , } , absolute : { position : 'absolute' , } , } ) ; export default Slider ;