Flickering on Animation Change in React Native Windows

[HunainHumail]

Description

I am using lottie-react-native on all the platforms, First i was having flickering issue on changing the animation on Android, But after adding onAnimationFinish and hardwareAccelerationAndroid, I managed to make it smooth.
But when i am running the project in React Native windows, when the animation is changing to another animation, the Lottie animation flicker after changing. It is not smooth as in other platforms

Expected behavior: [What you expected to happen]
The animation should work smoothly, when changed to second animation, without any jerk or flicker, like in all other platforms

Actual behavior: [What actually happened]
Animation is flickering when changing to the second animation.

Versions

"react-native-windows": "0.71.16",
"lottie-react-native": "^5.1.5",
"react": "18.2.0",
"react-native": "0.71.6",
"react-native-svg": "^13.9.0",

Recording.2023-06-13.140043.mp4

[nastarfan]

hi @HunainHumail , I am facing the flickering issue on android when changing from one animation to another. How did you solve it with onAnimationFinish and hardwareAccelerationAndroid?
adding hardwareAccelerationAndroid doesn't work for me.

Would appreciate if you can share snippets/code

[HunainHumail]

@nastarfan I am using states for changing the lottie files for a VPN Application Connection Button in Android

function for onAnimationFinish:

   const onDisconnectingAnimationFinish = useCallback(() => {
    if (connectionState === 'disconnecting') {
      setConnectionState('disconnected');
      setConnectionStateText('You are unprotected');
      setConnectionStateBottomText('Tap to Connect');
      setConnectionStateDescriptionText(
        'Connect to a secure VPN server for safe browsing',
      );
    }
  }, [connectionState]);

This is my disconnecting animation, in which I have used the function onDisconnectingAnimationFinish as I have to manually switch the state to disconnected

             {connectionState === 'disconnecting' && (
              <Lottie
                hardwareAccelerationAndroid
                style={styles.lottieAnimationStyle}
                useNativeDriver
                source={disconnectingAnimation}
                onAnimationFinish={onDisconnectingAnimationFinish}
                autoPlay
                loop={false}
              />
            )} 

And when it gets disconnected, it shows the disconnected animation

{connectionState === 'disconnected' && (
              <Lottie
                hardwareAccelerationAndroid
                style={styles.lottieAnimationStyle}
                useNativeDriver
                source={disconnectAnimation}
                autoPlay
                loop={false}
              />
            )}

So this is what I am doing, and the animation is working smoothly..