How to use the RotationGestureHandler with only 1 finger on the screen?

[pivey]

Hi,

I'm creating a colour wheel and the library has been very useful in order to achieve the effect that I am looking for, the only obstacle that i have encountered so far is that I can only seem to initiate a rotation event with 2 fingers on the screen.

I would like my component to be usable with one finger so that the user can hold the phone in one hand and use their thumb to rotate the wheel. When analysing the event.nativeEvent object it seems that 2 fingers on the component (one just touching the screen and the other rotating the component) is only registered as one pointer ie { numberOfPointers: 1 } and when i have 3 fingers on the screen that registers as 2.

Has anyone encountered this issue before and could provide some assistance as to how one goes about registers a rotation event using only one finger?

[AndriyParkho]

Hi, did you find a solution to your problem ? I am facing the same problem

[m-bert]

Hi @pivey! Rotation handler is meant to work with at least two fingers. What you can do is try to use PanGestureHandler instead. If I understood correctly, you have a circle that should respond to rotation gesture by using only thumb - you can try example below and implement it in your code to see whether it helps you.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  Gesture,
  GestureDetector,
  PanGestureHandler,
} from 'react-native-gesture-handler';

import Animated, {
  useSharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

export default function RotationBox() {
  const rotationValue = 0.1;

  const rotation = useSharedValue(0);

  const panGesture = Gesture.Pan().onChange((e) => {
    if (e.changeY > 0) {
      rotation.value += rotationValue;
    } else {
      rotation.value -= rotationValue;
    }
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ rotateZ: `${rotation.value}deg` }],
    };
  });

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </GestureDetector>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 1000,
    height: 1000,
    backgroundColor: 'blue',
  },
});