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;