Skip to content

Commit

Permalink
Fix manualActivation on web (#2869)
Browse files Browse the repository at this point in the history
## Description

This PR adds support for `manualActivation` on web. Right now logic responsible for manual activation with state manager is not implemented on web - state manager is able to interact with handlers, but `activate` method doesn't check for `manualActivation` property.

Fixes #2868.

## Test plan

Tested on example from #2868 

<details>
<summary> Test code </summary>

```jsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

export default function App() {
  const left = useSharedValue(0);

  const savedLeft = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .manualActivation(true)
    .onTouchesDown((e, stateManager) => {
      if (savedLeft.value >= 100) {
        stateManager.fail();
      } else {
        stateManager.activate();
      }
    })
    .onUpdate(({ translationX }) => {
      left.value = savedLeft.value + translationX;
    })
    .onEnd(() => {
      savedLeft.value = left.value;
    });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: left.value }],
    };
  });

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  square: {
    height: 100,
    width: 100,
    backgroundColor: 'red',
  },
});

```

</details>
  • Loading branch information
m-bert authored Apr 19, 2024
1 parent 2770cc9 commit 91b4cc9
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 6 deletions.
2 changes: 1 addition & 1 deletion src/handlers/gestures/gestureStateManager.web.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const GestureStateManager = {
},

activate: () => {
NodeManager.getHandler(handlerTag).activate();
NodeManager.getHandler(handlerTag).activate(true);
},

fail: () => {
Expand Down
8 changes: 4 additions & 4 deletions src/web/handlers/GestureHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -176,13 +176,13 @@ export default abstract class GestureHandler implements IGestureHandler {
}
}

public activate(_force = false) {
public activate(force = false) {
if (
this.currentState === State.UNDETERMINED ||
this.currentState === State.BEGAN
(this.config.manualActivation !== true || force) &&
(this.currentState === State.UNDETERMINED ||
this.currentState === State.BEGAN)
) {
this.delegate.onActivate();

this.moveToState(State.ACTIVE);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/web/handlers/IGestureHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default interface IGestureHandler {
getTrackedPointersID: () => number[];

begin: () => void;
activate: () => void;
activate: (force: boolean) => void;
end: () => void;
fail: () => void;
cancel: () => void;
Expand Down
1 change: 1 addition & 0 deletions src/web/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export interface Config extends Record<string, ConfigArgs> {
mouseButton?: MouseButton;
enableContextMenu?: boolean;
touchAction?: TouchAction;
manualActivation?: boolean;

activateAfterLongPress?: number;
failOffsetXStart?: number;
Expand Down

0 comments on commit 91b4cc9

Please sign in to comment.