Rotate discs with user touch in React Native

Question

I want to create a disc like component in react-native, which the user can rotate by touch and align the segments accordingly with respect to a marker.

Below is the image of the component I intent to make:

There are 3 discs pivoted at the center, and each disc should be rotated individually. There are few segments on each disc with some values. Once the segments are aligned, it may look like below image:

I am looking for a way to rotate the discs with a user touch such that, the segments could be aligned and show the corresponding values.

I have been trying to see React Native Animated API but not sure if I can achieve this with it.

Also, I don't know how to proceed with the user touch input in order to rotate the discs.

You have not added the intended output image to understand what you are trying to achieve. I really didn't get much. Moreover, here are few guiding links: https://facebook.github.io/react-native/docs/animations.html https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae https://proandroiddev.com/how-to-animate-on-android-f8d227135613 — Nah, Jun 25 '18 at 06:07

Javad Sameri · Answer 1 · 2018-06-26T06:13:12.280

first you need to compute the position of your element in disk style creatore function will calculate the style and return it , if you want to add element to your disk with your rotation you need Round Queue structure if not and your element on disk is always the same just use simple array

  styleCreator = (Ncircle,radius) => {
    //this.Styles = new RoundQueue()
    this.Styles = []
    var step = 360 / (Ncircle);
    var degrees = [];
    for(let index = 0; index < Ncircle ; index ++ ){
      degrees.push(0 + index * step)
    }
    for(let index = 0; index < Ncircle ; index ++ ){
      let radTdeg = degrees[index] * Math.PI / 180
      let TX = radius * Math.cos(radTdeg)
      let TY = radius * Math.sin(radTdeg)
      let Rotate = degrees[index]
      //this.Styles.enqueue          
      this.Styles.push({
        position: 'absolute',
        transform: [
                    {translateX : TX},
                    {translateY : TY},
                  ]
      })
    }
  }

and for letting your commponent to take control of touch use Pan responder (see react native doc)

handleStartShouldSetPanResponder = (e, gestureState) => {
    return true
  }
handlePanResponderGrant = (e, gestureState) => {
 this.setState({dragging: true})
}

you can handle the touch move like this :

handlePanResponderMove = (e, gestureState) => {
  let Moved = Math.sqrt(Math.pow(gestureState.dx,2)+Math.pow(gestureState.dy,2))
  if(Math.sign(gestureState.dx) == -1 &&  Math.abs(gestureState.dx) > Math.abs(gestureState.dy) || Math.sign(gestureState.dy) == -1 &&  Math.abs(gestureState.dy) > Math.abs(gestureState.dx)) {
    Moved = -1 * Moved
  }
  if(Moved > 10 ){
    if(10 < Moved ) {
        var Tm = Moved / 360
        this.state.rotation.setValue(Tm)
      }
  } else if (Moved < -10) {
        if(-80 < Moved &&  Moved < -10) {
            var Tm = Moved / 360
            this.state.rotation.setValue(Tm)
          }
        }
}

and your component renderer should look like this :

this.state = {
        rotation : new Animated.Value(0),
        animatedValuedeg : new Animated.Value(0)
        }

render() {
    return(
      <Animated.View style = {{backgroundColor: 'transparent',
                transform: [{ rotate: this.MainRotate }]}}>
        <Animated.View style = {{
          transform: [{ rotate: this.spin }],
          backgroundColor: 'transparent',
          position : 'relative',
          alignItems:'center' ,
          justifyContent: 'center',
        }}
        >
        {this.Components}
        </Animated.View>
      </Animated.View>

    )
  }

and you have to write a method to render your element that you want to put in disk and put it in this.Components variable since I didn't quite understand what you want to implement ,I just tried to give you and idea how to do it

enjoy buddy

Thanks a lot for your help. Just to be more clear, I am trying to make a component very similar to the image shown in the following link. https://www.electroschematics.com/wp-content/uploads/2011/05/resistor-colour-code-wheel.jpg I intent to have the rotation of the discs to work just like the disc shown in the image. Thanks again! — MMH, Jun 25 '18 at 11:31

Rotate discs with user touch in React Native

1 Answers1