How to smoothly rotate line without interpolate method on React-Native

Question

I have a line on the middle of my screen, that works with Accelerometer and moves this top or bottom and also supposed to rotate. I am using LayoutAnimation, but seems like this method doesn't allow me to rotate my line smoothly, it goes well with 'top' property, but it's not working with rotation

I've tried to install react-native-canvas, but this package wrecks my app at all so I have to recreate it ;D (it pissed me off). Also I tried to make this animation with interpolate, but it seems like working for fixed degrees and looks weird

componentDidMount(){
    setUpdateIntervalForType(SensorTypes.accelerometer, 150);
    const subscription = accelerometer.subscribe(({ x, y, z }) =>{
        let d = getAngles(x,y,z);
        this.updateValues(d.roll,d.pitch);
      }
    );
  }

updateValues(roll,pitch){
    LayoutAnimation.configureNext(CustomLayoutAnimation)
    this.setState({roll,pitch})
  }

render() {

    return (
...
    {<View style={{position:"relative",top:calculateOffset(this.state.roll,this.state.screenOffset)+"%",width:"80%",height:4,backgroundColor:"orange",transform:[{rotate:`${this.state.pitch}deg`}]}} />}
...
);
  }

I'm on search for some working package to work with or way to solve this problem.

Can you show the current output screenshot for more detail without rotating effect? — Muhammad Mehar, May 20 '19 at 11:55
Yes, I actualy did this with old and new values via interpolate, but it's weird that it looks so complicated, is there any fine decision? — omni, May 20 '19 at 12:41
You should use directly degree in your interpolation instead of concatenating your number in a string. Take a look at this [answer](https://stackoverflow.com/a/37445916/5555458) — Antoine Grandchamp, May 20 '19 at 13:22

score 0 · Answer 1 · answered May 20 '19 at 13:20

Try this:

<View
   style={{
      position:"relative",
      top: calculateOffset(this.state.roll,this.state.screenOffset)+"%",
      width: "80%",
      height: "80%",
      backgroundColor: "transparent",
      justifyContent: "center",
      transform:[{rotate:`${this.state.pitch}deg`}]}}
   }}
>
   <View
      style={{
         height: 4,
         backgroundColor: "orange",
         width: "100%"
      }}
   />
</View>

I hope it help you.

score 0 · Answer 2 · answered May 21 '19 at 14:47

0

I resolved this with interpolation and Animated API. It looks weird though, but works ;)

answered May 21 '19 at 14:47

omni

3
5

How to smoothly rotate line without interpolate method on React-Native

2 Answers2