Touch event

[voulgarakis]

Hello,

Is it possible to change the progress fill by touching and moving the circle in the renderCap?

[sturmenta]

Are you planning to add this functionality in the future?

[voulgarakis]

I did a custom implementation using PanResponder

[mohamad-1994]

I did a custom implementation using PanResponder

can you share it with me ? I need change progress on touch

[voulgarakis]

import { ... PanResponder, } from 'react-native';

const _circularProgressRef = React.createRef(); const _panResponder = PanResponder.create({ onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, onMoveShouldSetPanResponder: (evt, gestureState) => true, onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

onPanResponderGrant: (evt, gestureState) => {
  setIsMoving(true);
  setPointsDelta(0);
},

onPanResponderMove: (evt, gestureState) => {
  if (_circularProgressRef.current) {
    _circularProgressRef.current.animate(0, 0);
  }

  // Handle state variable

},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
  if (_circularProgressRef.current) {
    _circularProgressRef.current.animate(100, 3000);
  }

  setIsMoving(false);
  setPointsDelta(0);
},

});

. . .

<View style={styles.progressBar} {..._panResponder.panHandlers}> <AnimatedCircularProgress duration={0} size={300} width={25} fill={percentArc} tintColor="#6277f1" backgroundColor="#b1b1b1" padding={10} rotation={ROTATION} arcSweepAngle={ARC} renderCap={({center}) => ( <Circle cx={center.x} cy={center.y} r="18" fill="#4d4d4d" /> )}> ... </AnimatedCircularProgress> </View>

[halesh71]

is not working for me