I'm looking for some advice optimizing this component. It's my first time working with react-native-reanimated (v 2.14.4).
Client wants this ID card to constantly move as a security measure. After a few loops, it seems to run really badly on a low end android device the client is testing on (Samsung A-something phone. Runs fine on my old Samsung S5). The app will actually crash after about 30 seconds. We've tested a version without the animation at all and the app runs fine without crashing.
Are there any optimizations or changes I can make to it to help ensure performance on low end devices? I might remove one of the axis animations, but just wondering if I'd missed something obvious or made a mistake that is causing issues.
import React, { useEffect } from 'react';
import Animated, {
useSharedValue,
withRepeat,
withTiming,
Easing,
useAnimatedStyle,
} from 'react-native-reanimated';
interface IdCardAnimationProps {
children: React.ReactNode;
}
const IdCardAnimation: React.FC<IdCardAnimationProps> = ({ children }) => {
const rotationX = useSharedValue(0);
const rotationY = useSharedValue(0);
useEffect(() => {
rotationX.value = withRepeat(
withTiming(10, {
duration: 4000,
easing: Easing.inOut(Easing.ease),
}),
-1,
true
);
rotationY.value = withRepeat(
withTiming(5, {
duration: 2500,
easing: Easing.inOut(Easing.ease),
}),
-1,
true
);
// Clean up function will stop the animation when component unmounts
return () => {
rotationX.value = 0;
rotationY.value = 0;
};
}, []);
const animatedStyle = useAnimatedStyle(() => {
const rotateX = `${rotationX.value}deg`;
const rotateY = `${rotationY.value}deg`;
return {
transform: [
{ perspective: 500 },
{
rotateX,
},
{
rotateY,
},
],
};
});
return <Animated.View style={animatedStyle}>{children}</Animated.View>;
};
export default IdCardAnimation;