Skip to content

Conversation

m-bert
Copy link
Contributor

@m-bert m-bert commented Aug 5, 2025

Description

This PR introduces SharedValue bindings to config. This will allow users to specify values in config asSharedValues, e.g:

const taps = useSharedValue(2);

const gesture = useGesture('TapGestureHandler', {
  onEnd: () => {
    console.log('Tap detected. Required number of taps:', taps.value);
    taps.set(taps.value + 1);
  },
  numberOfTaps: taps,
});

Test plan

Tested on the following code:
import * as React from 'react';
import { Animated, Button } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);
  const taps = useSharedValue(2);

  const gesture = useGesture('TapGestureHandler', {
    onEnd: () => {
      console.log('Tap detected. Required number of taps:', taps.value);
      taps.set(taps.value + 1);
    },
    numberOfTaps: taps,
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

@m-bert m-bert marked this pull request as ready for review August 6, 2025 10:10
@m-bert m-bert requested review from tomekzaw and j-piasecki August 6, 2025 10:10
@m-bert

This comment was marked as outdated.

@m-bert m-bert requested a review from j-piasecki August 11, 2025 11:25
@m-bert m-bert requested a review from j-piasecki August 20, 2025 09:54
@m-bert m-bert merged commit 99a6530 into next Aug 22, 2025
7 checks passed
@m-bert m-bert deleted the @mbert/shared-values branch August 22, 2025 12:11
akwasniewski added a commit that referenced this pull request Aug 27, 2025
## Description

This PR changes how config is handled on web, following #3658 it
separates update and set functionality, which allows passing only
relevant, changed fields to update, as opposed to the entire config.
Moreover it removes the config field from `GestureHandler` - adds
necessary fields as class fields, this mimics how config is handled on
iOS / Android and simplifies the code (previously some fields were both
both config and class fields).

## Test plan

The update functionality was tested on the following code.
```ts
import * as React from 'react';
import { Animated, Button } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import {
  GestureHandlerRootView,
  NativeDetector,
  useGesture,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);
  const taps = useSharedValue(2);

  const gesture = useGesture('TapGestureHandler', {
    onEnd: () => {
      console.log('Tap detected. Required number of taps:', taps.value);
      taps.set(taps.value + 1);
    },
    numberOfTaps: taps,
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants