0

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;

warm__tape
  • 250
  • 4
  • 19

0 Answers0