ButtonPressAnimation.android.js

import React, { createContext, useCallback, useContext, useMemo } from 'react';
import {
  processColor,
  requireNativeComponent,
  StyleSheet,
  View,
} from 'react-native';
import { createNativeWrapper } from 'react-native-gesture-handler';
import { PureNativeButton } from 'react-native-gesture-handler/src/components/GestureButtons';
import Animated, {
  Easing,
  runOnJS,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import { normalizeTransformOrigin } from './NativeButton';
import { useLongPressEvents } from '@rainbow-me/hooks';

const ZoomableRawButton = requireNativeComponent('RNZoomableButton');

const ZoomableButton = createNativeWrapper(ZoomableRawButton);

const AnimatedRawButton = createNativeWrapper(
  Animated.createAnimatedComponent(PureNativeButton),
  {
    shouldActivateOnStart: true,
    shouldCancelWhenOutside: true,
  }
);

const OVERFLOW_MARGIN = 5;

const ScaleButtonContext = createContext(null);

const transparentColor = processColor('transparent');

// I managed to implement partially overflow in scale button (up to 5px),
// but overflow is not visible beyond small boundaries. Hence, to make it reactive to touches
// I couldn't just expend boundaries, because then it intercepts touches, so I managed to
// extract animated component to external value

export const ScaleButtonZoomable = ({ children, style, duration = 160 }) => {
  const scale = useSharedValue(1);
  const scaleTraversed = useDerivedValue(() => {
    const value = withTiming(scale.value, {
      duration,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
    });
    return value;
  });
  const sz = useAnimatedStyle(() => {
    return {
      transform: [
        {
          scale: scaleTraversed.value,
        },
      ],
    };
  });

  return (
    <ScaleButtonContext.Provider value={scale}>
      <Animated.View style={[style, sz]}>{children}</Animated.View>
    </ScaleButtonContext.Provider>
  );
};

const ScaleButton = ({
  children,
  contentContainerStyle,
  duration,
  minLongPressDuration,
  onLongPress,
  onPress,
  overflowMargin,
  scaleTo,
  wrapperStyle,
  onPressStart,
  onPressCancel,
}) => {
  const parentScale = useContext(ScaleButtonContext);
  const childScale = useSharedValue(1);
  const scale = parentScale || childScale;
  const hasScaledDown = useSharedValue(0);
  const scaleTraversed = useDerivedValue(() => {
    const value = withTiming(scale.value, {
      duration,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
    });
    if (parentScale) {
      return 1;
    } else {
      return value;
    }
  });
  const sz = useAnimatedStyle(() => {
    return {
      transform: [
        {
          scale: scaleTraversed.value,
        },
      ],
    };
  });

  const { handleCancel, handlePress, handleStartPress } = useLongPressEvents({
    minLongPressDuration,
    onLongPress,
    onPress,
    onPressCancel,
    onPressStart,
  });

  const gestureHandler = useAnimatedGestureHandler({
    onActive: () => {
      runOnJS(handleStartPress)();
      if (hasScaledDown.value === 0) {
        scale.value = scaleTo;
      }
      hasScaledDown.value = 1;
    },
    onCancel: () => {
      scale.value = 1;
      hasScaledDown.value = 0;
      runOnJS(handleCancel)();
    },
    onEnd: () => {
      hasScaledDown.value = 0;
      scale.value = 1;
      runOnJS(handlePress)();
    },
    onFail: () => {
      runOnJS(handleCancel)();
    },
  });

  return (
    <View style={[cx.overflow, wrapperStyle]}>
      <View style={{ margin: -overflowMargin }}>
        <AnimatedRawButton
          hitSlop={-overflowMargin}
          onGestureEvent={gestureHandler}
          rippleColor={transparentColor}
          style={cx.overflow}
        >
          <View style={cx.transparentBackground}>
            <View style={{ padding: overflowMargin }}>
              <Animated.View style={[sz, contentContainerStyle]}>
                {children}
              </Animated.View>
            </View>
          </View>
        </AnimatedRawButton>
      </View>
    </View>
  );
};

const SimpleScaleButton = ({
  backgroundColor,
  borderRadius,
  children,
  contentContainerStyle,
  duration,
  minLongPressDuration,
  onLongPress,
  onLongPressEnded,
  shouldLongPressHoldPress,
  isLongPress,
  onLayout,
  onPress,
  overflowMargin,
  scaleTo,
  skipTopMargin,
  transformOrigin,
  wrapperStyle,
}) => {
  const onNativePress = useCallback(
    ({ nativeEvent: { type } }) => {
      if (type === 'longPress') {
        onLongPress?.();
      } else if (shouldLongPressHoldPress && type === 'longPressEnded') {
        onLongPressEnded?.();
      } else {
        onPress?.();
      }
    },
    [onLongPress, onLongPressEnded, onPress, shouldLongPressHoldPress]
  );

  // we won't guess if there are any animated styles in there but we can
  // not render the Animated.View if we don't use that prop at all
  const Wrapper = contentContainerStyle ? Animated.View : View;

  return (
    <View
      onLayout={onLayout}
      style={[
        {
          backgroundColor,
          borderRadius,
          overflow: 'visible',
        },
        wrapperStyle,
      ]}
    >
      <View
        style={{
          margin: -overflowMargin,
          marginTop: skipTopMargin ? -OVERFLOW_MARGIN : -overflowMargin,
        }}
      >
        <ZoomableButton
          duration={duration}
          hitSlop={-overflowMargin}
          isLongPress={isLongPress}
          minLongPressDuration={minLongPressDuration}
          onPress={onNativePress}
          rippleColor={transparentColor}
          scaleTo={scaleTo}
          shouldLongPressHoldPress={shouldLongPressHoldPress}
          style={cx.overflow}
          transformOrigin={transformOrigin}
        >
          <View style={cx.transparentBackground}>
            <View
              style={{
                padding: overflowMargin,
                paddingTop: skipTopMargin ? OVERFLOW_MARGIN : overflowMargin,
              }}
            >
              <Wrapper style={contentContainerStyle}>{children}</Wrapper>
            </View>
          </View>
        </ZoomableButton>
      </View>
    </View>
  );
};

export default function ButtonPressAnimation({
  // eslint-disable-next-line no-unused-vars
  activeOpacity = 1, // TODO
  backgroundColor = 'transparent',
  borderRadius = 0,
  children,
  contentContainerStyle,
  disabled,
  duration = 160,
  hitSlop,
  minLongPressDuration = 500,
  onLayout,
  onLongPress,
  onLongPressEnded,
  shouldLongPressHoldPress,
  onPress,
  onPressStart,
  overflowMargin = OVERFLOW_MARGIN,
  reanimatedButton,
  scaleTo = 0.86,
  skipTopMargin,
  style,
  testID,
  transformOrigin,
  wrapperStyle,
  onPressCancel,
}) {
  const normalizedTransformOrigin = useMemo(
    () => normalizeTransformOrigin(transformOrigin),
    [transformOrigin]
  );

  const ButtonElement = reanimatedButton ? ScaleButton : SimpleScaleButton;
  return disabled ? (
    <View onLayout={onLayout} style={[cx.overflow, style]}>
      {children}
    </View>
  ) : (
    <ButtonElement
      backgroundColor={backgroundColor}
      borderRadius={borderRadius}
      contentContainerStyle={contentContainerStyle}
      duration={duration}
      hitSlop={hitSlop}
      isLongPress={!!onLongPress}
      minLongPressDuration={minLongPressDuration}
      onLayout={onLayout}
      onLongPress={onLongPress}
      onLongPressEnded={onLongPressEnded}
      onPress={onPress}
      onPressCancel={onPressCancel}
      onPressStart={onPressStart}
      overflowMargin={overflowMargin}
      scaleTo={scaleTo}
      shouldLongPressHoldPress={shouldLongPressHoldPress}
      skipTopMargin={skipTopMargin}
      testID={testID}
      transformOrigin={normalizedTransformOrigin}
      wrapperStyle={wrapperStyle}
    >
      <View pointerEvents="box-only" style={[cx.overflow, style]}>
        {children}
      </View>
    </ButtonElement>
  );
}

const cx = StyleSheet.create({
  overflow: {
    overflow: 'visible',
  },
  transparentBackground: {
    backgroundColor: 'transparent',
  },
});