Whatsapp like sound recording button

[Bayramito]

How can I make Whatsapp like. voice recording button gesture?

In whatsapp, if the input is empty, by default there is a voice button.

This button has 3 gestures combines.

1. Tap gesture, you can tap to this button and it shows a hint above it.
2. Press and hold gesture, you can press to start recording and release to send the voice record.
3. pan gesture, simply you can swipe to the left while recording, to cancel the record and all the gestures.

Does anyone knows how to achieve such behavior ?

[Bayramito]

Closest i could get is this.

Here i use 2 gestures.
1.Tap
2.Pan

With tap gesture i handle the regular onPress events. And with pan i am trying to handle the hold and release stuff.

Problems are,

1.If i trigger onStartHold event in onStart callback of Pan Gesture, does not work because onStart waiting movement. So you need to move at least 1px to trigger it. Instead if i trigger onStartHold in onBegin, composition does not work properly this time. It always fires the onBegin even if i try to use tap gesture. (Gesture.Race does not work correctly).

2. For the same reason above, i cannot fire onHoldEnd event in onEnd, because event cannot be started if i don't move my element. That's why i trigger it via activateAfterLongPress, so the gesture can start and i can fire the onEnd event.

3. I also. use onTouchesCancelled and shouldCancelWhenOutside to be able to catch cancellation point..

With this below, i reached somewhere but not exactly how i want. Sometimes i start holding but tap gesture fires instead. Sometimes even if i hold my finger on the screen and try to swipe gesture cancels itself.

const ScaleablePress = ({
  children,
  onPress,
  style,
  disabled,
  onStartHold,
  onEndHold,
  onSwipeLeft,
  onSwipeThreshold,
  onProgress,
  feedback,
  feedbackColor,
}) => {
  const active = useSharedValue(false);
  const isCancelled = useSharedValue(false);
  const progress = useSharedValue(0);
  const isHolding = useSharedValue(false);
  const translateX = useSharedValue(0);
  const threshold = onSwipeThreshold || 50;

  const pan = Gesture.Pan()
    .enabled(!isCancelled.value && onSwipeLeft != null && !disabled)
    .hitSlop(20)
    .failOffsetX([-100, 100])
    .activateAfterLongPress(100)
    .onBegin(() => {
      active.value = true;
    })
    .onStart(() => {
      if (onStartHold && !isCancelled.value && !isHolding.value) {
        runOnJS(onStartHold)();
        isHolding.value = true;
      }
    })
    .onTouchesCancelled(() => {
      if (onSwipeLeft) runOnJS(onSwipeLeft)();
    })
    .shouldCancelWhenOutside(true)
    // .simultaneousWithExternalGesture(hold)
    .onChange(({translationX}) => {
      if (!isCancelled.value) {
        if (translateX.value < -threshold) {
          isCancelled.value = true;
          translateX.value = withTiming(0);
          runOnJS(triggerHaptic)();
          return;
        }
        translateX.value = translationX;
        if (onProgress) runOnJS(onProgress)(-translationX);
      }
    })
    .onEnd(() => {
      if (onEndHold && !isCancelled.value) runOnJS(onEndHold)();
      translateX.value = withTiming(0);
    })
    .onFinalize(() => {
      active.value = false;
      isCancelled.value = false;
      isHolding.value = false;
    });

  const rAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: translateX.value,
        },
        {
          scale: withTiming(active.value ? 0.9 : 1),
        },
      ],
    };
  }, []);

  const tap = Gesture.Tap()
    .enabled(onPress != null)
    .maxDuration(4000)
    .hitSlop(10)
    .blocksExternalGesture(pan)

    .onTouchesDown(e => {
      progress.value = withTiming(1, {duration: 500}, () => {
        progress.value = 0;
      });
    })
    .onEnd(() => {
      if (!disabled && onPress != null) {
        runOnJS(onPress)();
        runOnJS(triggerHaptic)();
      }
    })
    .onFinalize(() => {});
  const feedbackStyles = useAnimatedStyle(() => {
    return {
      position: "absolute",
      borderRadius: 100,
      width: "100%",
      height: "100%",
      backgroundColor: interpolateColor(
        progress.value,
        [0, 0.5, 1],
        ["transparent", feedbackColor || "#00000020", "transparent"],
      ),
      transform: [
        {
          scale: interpolate(progress.value, [0, 1], [0, 2]),
        },
      ],
    };
  }, []);

  return (
    <GestureDetector gesture={Gesture.Race(pan, tap)}>
      <Animated.View style={[style, rAnimatedStyle]} pointerEvents={"box-only"}>
        {feedback && <Animated.View style={feedbackStyles} />}
        {children}
      </Animated.View>
    </GestureDetector>
  );
};

export {ScaleablePress};

[Akshay340-mob]

Hey @Bayramito Did you able to achieve this As I am stuck too In building this voice note feature for my project.
Thanks in advance buddy👍

[m-bert]

Hi @Bayramito! Wouldn't something like this work?

import { View } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

export default function App() {
  const tap = Gesture.Tap().onEnd(() => console.log('Show hint'));
  const longPress = Gesture.LongPress()
    .onStart(() => console.log('Start recording'))
    .onEnd(() => console.log('End recording'));
  const pan = Gesture.Pan()
    .onEnd(() => console.log('Cancel recording'))
    .minDistance(30);

  const g = Gesture.Race(tap, longPress, pan);
  return (
    <GestureHandlerRootView>
      <GestureDetector gesture={g}>
        <View
          style={{
            width: 200,
            height: 200,
            backgroundColor: 'crimson',
            borderRadius: 100,
          }}
        />
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

Of course you'd have to adjust Pan config to start only to the left, but it should work as you expect