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}

[zoom2009]

me too I just copy and parse all code from example and try to do what bot say still happended

[dohooo]

Hey, I've released the v4. Could you try with the latest version and let me know what happened?

[nakapon9517]

I am having the same problem.
Thank you for all your maintenance.
It would be helpful if you could provide us with a solution.

My code is as follows.

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Extrapolation, interpolate, SharedValue, useSharedValue } from 'react-native-reanimated';
import Carousel, { ICarouselInstance, TAnimationStyle } from 'react-native-reanimated-carousel';
import { Layout } from '@/constants/Layout';
import { Spot } from '@/types/Spot';
import { CarouselTinderItem } from './CarouselTinderItem';

type Props = {
  carouselRef: React.RefObject<ICarouselInstance>;
  progress: SharedValue<number>;
  data: Spot[];
  onSwipe: (index: number, isLike: boolean, item: Spot) => void;
};

export const CarouselTinder = (props: Props) => {
  const { carouselRef, progress, data, onSwipe } = props;
  const directionAnimVal = useSharedValue(0);

  const animationStyle: TAnimationStyle = React.useCallback(
    (value: number) => {
      'worklet';
      const translateY = interpolate(value, [0, 1], [0, -18]);
      const translateX = interpolate(value, [-1, 0], [PAGE_WIDTH, 0], Extrapolation.CLAMP) * directionAnimVal.value;
      const rotateZ = interpolate(value, [-1, 0], [15, 0], Extrapolation.CLAMP) * directionAnimVal.value;
      const zIndex = interpolate(
        value,
        [0, 1, 2, 3, 4],
        [0, 1, 2, 3, 4].map((v) => (data.length - v) * 10),
        Extrapolation.CLAMP,
      );
      const scale = interpolate(value, [0, 1], [1, 0.95]);
      const opacity = interpolate(value, [-1, -0.8, 0, 1], [0, 0.9, 1, 0.85], Extrapolation.EXTEND);

      return {
        transform: [{ translateY }, { translateX }, { rotateZ: `${rotateZ}deg` }, { scale }],
        zIndex,
        opacity,
      };
    },
    [data.length, directionAnimVal.value],
  );

  return (
    <View>
      <Carousel
        ref={carouselRef}
        loop={false}
        style={styles.container}
        defaultIndex={0}
        vertical={false}
        width={PAGE_WIDTH}
        height={PAGE_HEIGHT}
        data={[...data, undefined]}
        pagingEnabled={true}
        snapEnabled={true}
        onConfigurePanGesture={(g) => {
          g.onChange((e) => {
            'worklet';
            directionAnimVal.value = Math.sign(e.translationX);
          });
        }}
        // fixedDirection="negative"
        renderItem={({ index, item }) => (item ? <CarouselTinderItem key={index} img={item.image.uri} /> : <></>)}
        customAnimation={animationStyle}
        windowSize={5}
        onProgressChange={progress}
      />
    </View>
  );
};

const PAGE_WIDTH = Layout.window.width;
const PAGE_HEIGHT = Layout.window.height;

const styles = StyleSheet.create({
  container: {
    width: PAGE_WIDTH,
    height: PAGE_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

remove fixedDirection

Removing fixedDirection does not allow swiping to the right.

RPReplay_Final1740747690.MP4

fixedDirection="negative"

If fixedDirection=“negative”, you can swipe to the right, but it does not move to the next card.

RPReplay_Final1740747637.MP4

[jony89]

After giving this a lot of my time, my conclusion was that carousel-like component does not fit to the tinder like style for the main reason that tinder requires cards "stack" as opposed to carousel.

For example if you would move the card on the top very far outside the screen the second card will start moving as well under the same gesture.

My solution was eventually to implement my own cards stack with react animation style. actually it was not a lot of work.

I've used the mix of the following tutorials:

https://www.youtube.com/watch?v=m3KqkvqfI48&ab_channel=WilliamCandillon
https://github.com/Rakha112/react-native-animation/tree/main/season1/src/29-React-Native-Card-Swipe