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}) => (

)}>
...

[halesh71]

is not working for me