Weird and buggy animation on Android

[idrakimuhamad]

Snack example: https://snack.expo.io/@idraki/rotating-animate

Refer to the Snack above, I'm trying to animate an image in circular motion, without the image itself being rotated from its normal view. For example like this solar system CSS from the link below:

https://codepen.io/tadywankenobi/pen/QbWNGR

Noticed that the planet rotate on its orbit, without the planet itself spinning and rotating. So I tried to use the similar approach, but my image still spinning.

<Animate.View
  duration={3000}
  animation={{
    from: {
        rotate: '0deg',
        translateY: -20,
        rotate: '0deg'
      },
      to: {
        rotate: '360deg',
        translateY: -20,
        rotate: '-360deg'
      }
  }}
  iterationCount="infinite"
  iterationDelay={0}
  easing="linear"
  useNativeDriver>
    <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
</Animate.View>

To avoid the image from spinning, I wrap it inside another Animatable View, which then spin in opposite of the outer View

<Animate.View
  duration={3000}
  animation={{
    from: {
      rotate: '-360deg',
      translateX: -20
    },
    to: {
      rotate: '0deg',
      translateX: -20
    }
  }}
  iterationCount="infinite"
  iterationDelay={0}
  easing="linear"
  useNativeDriver
  style={{
    justifyContent: 'center',
    alignItems: 'center',
  }}>
  <Animate.View
  duration={3000}
  animation={{
    from: {
      rotate: '0deg',
    },
    to: {
      rotate: '-360deg',
    }
  }}
  iterationCount="infinite"
  iterationDelay={0}
  easing="linear"
  useNativeDriver
  style={{
    justifyContent: 'center',
    alignItems: 'center',
  }}>
    <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
  </Animate.View>
</Animate.View>

This works, as I hope for but only on iOS. On Android, after the first few spin, it will start to be very buggy. The image itself will sort of shaking, and if you let it move for a while you will notice the image will actually rotated from its initial position, which is not what I hope for.

Example of image in my app when it starts animating.

Notice it starts to rotate to the right a little bit. Few minutes afterwards it starts to rotate almost 45 degree. 😅

It seems to me as the inner wrapper are not in sync with outer View, so that when the outer rotate to the right, it should rotate to the left, and maintaining its position. But because they didn't do at the same time, the behavior become rather sluggish and the final results didn't meet my intention.

Again, this only happen on Android. Even on standalone build. On iOS it's perfection. Smooth as I could have hope for.

Wondering if its because of the nested Animation, and if it is, I hope someone can shed the light on the better and optimize way to do such animation.

PS: The absolute positioning in the snack is just a workaround for android clipping in view so that we can get the image visible with overflow. And the image in snack obviously not the same as the picture, that's from my actual project

[code-jenn-or]

Having weird and buggy on simple ease in/out animatable views too. Works beautiful on IOS, very buggy on android.

[reinvanimschoot]

I have the same issue. Is there any update on this?

[RWOverdijk]

I'm experiencing animations that sometimes don't even run on android. If this is related, I could add more info.