How to make a spinner in React Native? I want to rotate box via PanResponder

Question

I am trying to use PanResponder in react native in order to rotate a box at its center. This is my code so far:

class Spinner extends React.Component {

 pan = new Animated.ValueXY();
 panResponder = PanResponder.create({
   onMoveShouldSetPanResponder: () => true,
   onPanResponderGrant: () => {
    this.pan.setOffset({
      x: this.pan.x._value,
      y: this.pan.y._value
    });
   },
   onPanResponderMove: Animated.event([
    null,
    { dx: this.pan.x, dy: this.pan.y }
   ]),
   onPanResponderRelease: () => {
    this.pan.flattenOffset();
   }

 });


 render() {

  const RotateValue = "10deg"

  return (

    <View style={styles.container}>
      <Animated.View
        style={{
          width:100,
          height:300,
          transform:[{ rotate: RotateValue }]
        }}
        {...this.panResponder.panHandlers}
      >
       <View style={styles.box} />
      </Animated.View>
    </View>

  )
}

}

'''

In this const RotateValue, I am trying to use this.pan.x and this.pan.y in order to covert to a value of degrees. I put "10deg" to demonstrate that it would rotate 10 degrees. But I am lost in how to accomplish what I am setting out to do.

Any help will be greatly appreciated. Thank you so much.

Answer 1

I think that what you are looking for is something called interpolation. you can find more about it here: https://animationbook.codedaily.io/interpolate/#:~:text=The%20interpolate%20function%20allows%20animated,interpolate%20from%20other%20interpolate%20values.&text=What%20this%20is%20doing%20is,we%20are%20interpolating%20the%20opacity.

const RotateValue = this.pan.x.interpolate({
    inputRange: [0, 360],
    outputRange: ['0deg', '360deg'],
    extrapolate: 'clamp'
});

I know that it is not the most accurate or best answer but I hope you will find this helpful somehow.