performance issue on android

[sssajjad007]

Hi, i want create ripple effect with reanimted
but has performance issue on android ( ios is fine )

import React, { type FC } from 'react';
import type { GestureTouchEvent } from 'react-native-gesture-handler';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  measure,
  runOnJS,
  useAnimatedRef,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import type { RippleProps, TOnTapName } from './type';
import type { View } from 'react-native';

export const Ripple: FC<RippleProps> = (props) => {
  const {
    style,
    onPress,
    onDoublePress,
    onLongPress,
    children,
    rippleColor = 'rgba(0,0,0,0.2)',
    rippleDuration = 500,
    disabled,
  } = props;
  const centerX = useSharedValue(0);
  const centerY = useSharedValue(0);
  const scale = useSharedValue(0);
  const aRef = useAnimatedRef<View>();
  const width = useSharedValue(0);
  const height = useSharedValue(0);
  const rippleOpacity = useSharedValue(1);
  const isInside = useSharedValue(true);

  const onTapHandler = (onTapName: TOnTapName) => {
    if (disabled) return;
    if (onTapName === 'double' && onDoublePress !== undefined) {
      return onDoublePress();
    } else if (onTapName === 'long' && onLongPress !== undefined) {
      return onLongPress();
    }
    return onPress?.();
  };
  const tapGesture = Gesture.Tap()
    .numberOfTaps(1)
    .onBegin((tapEvent) => {
      if (disabled) return;
      const layout = measure(aRef);
      width.value = layout!.width;
      height.value = layout!.height;

      centerX.value = tapEvent.x;
      centerY.value = tapEvent.y;
      rippleOpacity.value = 1;
      scale.value = 0;
      scale.value = withTiming(1, { duration: rippleDuration });
    })
    .onEnd(() => {
      runOnJS(onTapHandler)('tap');
      rippleOpacity.value = withTiming(0, { duration: rippleDuration });
    });

  const longPressGesture = Gesture.LongPress()
    .minDuration(500)
    .maxDistance(10000)
    .shouldCancelWhenOutside(false)
    .onTouchesMove((event: GestureTouchEvent) => {
      const { x, y } = event.allTouches[0]!;
      const layout = measure(aRef);
      if (layout) {
        isInside.value =
          x >= 0 && y >= 0 && x <= layout.width && y <= layout.height;
      }
    })
    .onTouchesCancelled(() => {
      rippleOpacity.value = withTiming(0, { duration: rippleDuration });
    })
    .onEnd(() => {
      if (isInside.value) {
        runOnJS(onTapHandler)('long');
        rippleOpacity.value = withTiming(0, { duration: rippleDuration });
      } else {
        rippleOpacity.value = withTiming(0, { duration: rippleDuration });
      }
    });

  const doubleTapGesture = Gesture.Tap()
    .numberOfTaps(2)
    .onEnd(() => {
      runOnJS(onTapHandler)('double');
      rippleOpacity.value = withTiming(0, { duration: rippleDuration });
    });

  const exclusiveGesture = Gesture.Exclusive(
    doubleTapGesture,
    tapGesture,
    longPressGesture
  );

  const rStyle = useAnimatedStyle(() => {
    const circleRadius = Math.sqrt(width.value ** 2 + height.value ** 2);

    const translateX = centerX.value - circleRadius;
    const translateY = centerY.value - circleRadius;

    return {
      width: circleRadius * 2,
      height: circleRadius * 2,
      borderRadius: circleRadius,
      opacity: rippleOpacity.value,
      backgroundColor: rippleColor,
      position: 'absolute',
      top: 0,
      left: 0,
      transform: [
        { translateX },
        { translateY },
        {
          scale: scale.value,
        },
      ],
    };
  });

  return (
    <GestureDetector gesture={exclusiveGesture}>
      <Animated.View ref={aRef} style={[style, { overflow: 'hidden' }]}>
        {children}
        <Animated.View style={rStyle} />
      </Animated.View>
    </GestureDetector>
  );
};

As you can see, there is a fps drop,
How could I fix this?

2024-11-16.19.33.25.mp4

[sssajjad007]

i found this https://github.com/bluesky-social/social-app/pull/6219/files,
i also try it but didn't work,

import React, { type FC, useMemo } from 'react';
import type { View } from 'react-native';
import type { GestureTouchEvent } from 'react-native-gesture-handler';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  makeMutable,
  measure,
  runOnJS,
  useAnimatedRef,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

import { RippleProps, TOnTapName } from './type';

const V0 = makeMutable(withTiming(0, { duration: 500 }));
const V1 = makeMutable(withTiming(1, { duration: 500 }));

export const Ripple: FC<RippleProps> = props => {
  const {
    style,
    onPress,
    onDoublePress,
    onLongPress,
    children,
    rippleColor = 'rgba(0,0,0,0.2)',
    rippleDuration = 500,
    disabled,
  } = props;
  const centerX = useSharedValue(0);
  const centerY = useSharedValue(0);
  const scale = useSharedValue(0);
  const aRef = useAnimatedRef<View>();
  const width = useSharedValue(0);
  const height = useSharedValue(0);
  const rippleOpacity = useSharedValue(1);
  const isInside = useSharedValue(true);

  const onTapHandler = useMemo(
    () => (onTapName: TOnTapName) => {
      if (disabled) {
        return;
      }
      if (onTapName === 'double' && onDoublePress !== undefined) {
        return onDoublePress();
      } else if (onTapName === 'long' && onLongPress !== undefined) {
        return onLongPress();
      }
      return onPress?.();
    },
    [disabled],
  );

  const tapGesture = useMemo(
    () =>
      Gesture.Tap()
        .numberOfTaps(1)
        .onBegin(tapEvent => {
          'worklet';
          if (disabled) {
            return;
          }
          const layout = measure(aRef);
          width.value = layout!.width;
          height.value = layout!.height;

          centerX.value = tapEvent.x;
          centerY.value = tapEvent.y;
          rippleOpacity.value = 1;
          scale.value = 0;
          scale.value = V1.value;
        })
        .onEnd(() => {
          'worklet';
          runOnJS(onTapHandler)('tap');
          rippleOpacity.value = V0.value;
        }),
    [disabled],
  );

  const longPressGesture = useMemo(
    () =>
      Gesture.LongPress()
        .minDuration(500)
        .maxDistance(10000)
        .shouldCancelWhenOutside(false)
        .onTouchesMove((event: GestureTouchEvent) => {
          'worklet';
          const { x, y } = event.allTouches[0]!;
          const layout = measure(aRef);
          if (layout) {
            isInside.value =
              x >= 0 && y >= 0 && x <= layout.width && y <= layout.height;
          }
        })
        .onTouchesCancelled(() => {
          'worklet';
          rippleOpacity.value = V0.value;
        })
        .onEnd(() => {
          'worklet';
          if (isInside.value) {
            runOnJS(onTapHandler)('long');
          }
          rippleOpacity.value = V0.value;
        }),
    [],
  );

  const doubleTapGesture = useMemo(
    () =>
      Gesture.Tap()
        .numberOfTaps(2)
        .onEnd(() => {
          runOnJS(onTapHandler)('double');
          rippleOpacity.value = V0.value;
        }),
    [],
  );

  const exclusiveGesture = useMemo(
    () => Gesture.Exclusive(doubleTapGesture, tapGesture, longPressGesture),
    [],
  );

  const rStyle = useAnimatedStyle(() => {
    const circleRadius = Math.sqrt(width.value ** 2 + height.value ** 2);

    const translateX = centerX.value - circleRadius;
    const translateY = centerY.value - circleRadius;

    return {
      width: circleRadius * 2,
      height: circleRadius * 2,
      borderRadius: circleRadius,
      opacity: rippleOpacity.value,
      backgroundColor: rippleColor,
      position: 'absolute',
      top: 0,
      left: 0,
      transform: [
        { translateX },
        { translateY },
        {
          scale: scale.value,
        },
      ],
    };
  });

  return (
    <GestureDetector gesture={exclusiveGesture}>
      <Animated.View ref={aRef} style={[style, { overflow: 'hidden' }]}>
        {children}
        <Animated.View style={rStyle} />
      </Animated.View>
    </GestureDetector>
  );
};

[MatiPl01]

Hey @sssajjad007!

I looked at your code and it looks good. There aren't many things you could improve.

I would say that you shouldn't bother much about performance in debug. Android tends to be laggy in debug and always is a few times slower than iOS. What is more, this FPS meter is not much accurate and, if you don't feel that your app performance is low, you shouldn't care that much.

To check how the app really performs, you can build the release app. You wouldn't be able to open developer settings in the release app to turn on the React Native performance monitor, so you should use the reanimated PerformanceMonitor component to measure the performance. You should put it somewhere in your app, close to the root component before building the release app APK.

How to build release APK

I would briefly describe you how you can build the release APK for testing purposes.

1. Enter the android directory
2. Run the ./gradlew assembleRelease command
3. Wait until build finishes (it can take a few minutes)
4. Copy the APK from android/app/build/outputs/apk/release and install it on your device or emulator

Why second example doesn't work

The second example you posted doesn't work because it uses layout animations, so you would have to update layout properties instead of transforms, which are non-layout properties (they never affect the layout of other components rendered on the screen). It shouldn't be faster than applying transforms to the view as you currently do. It is faster only if you have to animate layout properties, like width or heigh .

You can add these useMemo hooks for gestures. They are a good change but I would leave all remaining things unchanged.

Let me know if you have more questions!

[sssajjad007]

Hi @MatiPl01
Thank you very much for the explanations and the time you spent. I will follow the points you mentioned and send the results.