How to revert gesture direction translation

[badaz]

First thanks for the lib. It seems like it is very powerful and can cover a lot of use cases.

Here is my question : is there an easy way to revert gesture direction translation so that when I swipe from right to left, the scrollview scrolls from left to right? I can't seem to find it in the docs? or maybe I should do that manually in the onConfigurePanGesture callback ? If this is the answer then can you provide help on how to achieve this please?

[dosubot]

Hi @badaz! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

There isn't a built-in prop to directly invert the gesture direction, but you can achieve this manually. The gesture translation is handled in the carousel's gesture update logic, and you can use the onConfigurePanGesture callback to customize the gesture behavior. To reverse the direction, you would need to negate the translation value (translationX or translationY) before it's applied to the carousel's translation state.

For example, in your onConfigurePanGesture callback, you can override the gesture's onUpdate handler to multiply the translation by -1:

<Carousel
  // ...other props
  onConfigurePanGesture={gesture => {
    gesture.onUpdate(e => {
      'worklet';
      // Negate translationX for horizontal, or translationY for vertical
      const reversedTranslation = -1 * (e.translationX); // or e.translationY for vertical
      // Apply reversedTranslation to your shared value or logic
      // You may need to coordinate this with the carousel's internal state
    });
  }}
/>

This approach hooks into the gesture handling before the translation is applied, letting you invert the direction as needed. For more details, see how gesture translation is processed in the ScrollViewGesture component and how the onConfigurePanGesture callback is set up.

Let me know if you need a more detailed example or run into any issues!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[badaz]

Thanks bot @dosu but I have no idea how to achieve this missing piece of your comment: Apply reversedTranslation to your shared value or logic (You may need to coordinate this with the carousel's internal state)

[dosubot]

The carousel's gesture translation is handled internally in the ScrollViewGesture component, where the translation value is updated directly based on the gesture event. The onConfigurePanGesture callback lets you add custom gesture handlers, but these run after the internal translation update—so you can't intercept or invert the gesture direction from the outside using only public APIs or props.

To truly invert the gesture direction (so a right-to-left swipe scrolls left-to-right), you would need to modify the library code itself. Specifically, you would change the onGestureUpdate logic in ScrollViewGesture to negate the panTranslation value before it's applied to the translation shared value. You can see this logic here: ScrollViewGesture.tsx onGestureUpdate.

If you want to try this, look for the line where panTranslation is set (based on translationX or translationY), and multiply it by -1 before it's added to panOffset.value.

The fixedDirection prop only forces the sign of the translation, but doesn't invert the gesture direction itself. There isn't a built-in prop or callback to do this inversion at the moment.

If you need more guidance on editing the code or want to discuss possible workarounds, let me know!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[badaz]

Managed to do it modfying the lib, I will create a PR proposal to add a prop for this