Can't swipe right in tinder example in docs

[jony89]

See the following tinder example of the latest docs:

https://rn-carousel.dev/Examples/custom-animations/tinder

Can't really swipe right. only left.

[dosubot]

Hey @jony89! I'm here to help you with any bugs, questions, or contributions you have in mind. Let's tackle this together!

To enable swiping right in the Tinder example from the react-native-reanimated-carousel documentation, you need to modify the fixedDirection property in the Carousel component. The current setup uses fixedDirection="negative", which restricts swiping to the left. To allow swiping right, you should remove the fixedDirection property or set it to null. Here's the relevant part of the code you need to adjust:

<Carousel
    loop={false}
    style={{
        width: PAGE_WIDTH,
        height: PAGE_HEIGHT,
        justifyContent: "center",
        alignItems: "center",
    }}
    defaultIndex={0}
    vertical={false}
    width={PAGE_WIDTH}
    height={PAGE_HEIGHT}
    data={data}
    onConfigurePanGesture={(g) => {
        g.onChange((e) => {
            "worklet";
            directionAnimVal.value = Math.sign(e.translationX);
        });
    }}
    // Remove or set fixedDirection to null to enable swiping right
    fixedDirection={null}
    renderItem={({ index, item }) => <Item key={index} img={item} />}
    customAnimation={animationStyle}
    windowSize={5}
/>

This change will allow the carousel to support swiping in both directions ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[jony89]

Nope changing the fixedDirection to undefined / null does not help

@dosu

[jony89]

@dosu the snap does not work when swiping right

[dosubot]

To address the issue with swiping right and the snapping not working, you might want to check the onConfigurePanGesture function. Ensure that it is not disabling the gesture or affecting the swipe direction. For example, make sure that the gesture is enabled:

onConfigurePanGesture={(g) => {
    "worklet";
    g.enabled(true); // Ensure the gesture is enabled
    g.onChange((e) => {
        directionAnimVal.value = Math.sign(e.translationX);
    });
}}

Additionally, verify that the snapEnabled property is set to true, as it controls the snapping behavior:

<Carousel
    ...
    snapEnabled={true} // Ensure snapping is enabled
    ...
/>

These adjustments should help in enabling the swipe right functionality and ensure that snapping works as expected ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[jony89]

@dosu this does not change a thing

[dosubot]

Ensure that the fixedDirection property is not set, as it can restrict swipe directions. Additionally, check the pagingEnabled and snapEnabled properties. Both should be set to true to ensure proper snapping behavior:

<Carousel
    ...
    pagingEnabled={true} // Ensure paging is enabled
    snapEnabled={true}   // Ensure snapping is enabled
    ...
/>

If the issue persists, verify that there are no other configurations or custom animations affecting the swipe direction or snapping behavior. Also, ensure that the onConfigurePanGesture function is correctly enabling gestures and not interfering with the swipe logic.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}