Swipe gesture doesn't respond after navigating away and back

[sadikyalcin]

Describe the bug
After navigating to another screen and coming back to the screen with the carousel, the swipe gesture no longer works. The carousel stops responding. I can however, still use the pagination to navigate.

To Reproduce
Steps to reproduce the behavior:

1. Create a screen with the carousel
2. Navigate to another screen
3. Come back to the screen with the carousel
4. No longer can use swipe gesture

Current code:

<View style={carouselStyle.container}>
  <View style={carouselStyle.wrapper}>
    <Carousel
      ref={carouselRef}
      data={data.slider.items}
      onProgressChange={carouselProgress}
      height={(screenWidth * 9) / 16}
      loop={true}
      pagingEnabled={true}
      snapEnabled={true}
      width={screenWidth}
      mode="parallax"
      modeConfig={{
        parallaxScrollingScale: 0.8,
        parallaxScrollingOffset: 80,
        parallaxAdjacentItemScale: 0.8,
      }}
      renderItem={({item}) => {
        let image = hasImage(
          serverUrl,
          item.field_featured_image,
          network,
        );

        if (item.thumbnail) {
          image = hasImage(
            filesystem_root,
            item.thumbnail,
            network,
          );
        }
        return (
          <View style={carouselStyle.item}>
            <TouchableOpacity
              activeOpacity={1}
              style={carouselStyle.itemWrapper}>
              <Image
                source={{uri: image}}
                style={carouselStyle.image}
                resizeMode="cover"
              />
              <View style={carouselStyle.overlay} />
              <View style={carouselStyle.textContainer}>
                <Text style={carouselStyle.title}>
                  {item.title}
                </Text>
                <Text style={carouselStyle.type}>{item.type}</Text>
              </View>
            </TouchableOpacity>
          </View>
        );
      }}
    />
  </View>

  <Pagination.Basic
    progress={carouselProgress}
    data={data.slider.items}
    containerStyle={carouselStyle.paginationContainerStyle}
    dotStyle={carouselStyle.paginationDotStyle}
    onPress={number => {
      carouselRef.current?.scrollTo({
        count: number - carouselProgress.value,
        animated: true,
      });
    }}
  />
</View>

Expected behavior
You should still be able to use swipe gesture

Screenshots
NA

Versions (please complete the following information):

• react: 18.3.1
• react-native: 0.76.3
• react-native-reanimated: 3.16.3
• react-native-reanimated-carousel: 4.0.0-canary.22 (also on 4.0.0-alpha.12, haven't tried other versions)
• react-native-gesture-handler: 2.21.2

Smartphone (please complete the following information):

• Device: iPhone 16 Pro Max, Vivo x200 pro, Google Pixel 8, iOS simulators, Android emulators
• OS: iOS & Android
• Browser: na
• Version: iOS, 18, Android (14, 15)

Additional context
I thought I had seen a similar issue created here, came back to see the state of it but couldn't find it anymore so apologies for duplicate.

[dosubot]

Hey there, @sadikyalcin! I'm here to assist you with any bugs, questions, or contributions you have. Let's get this issue sorted out together!

I found a similar unsolved discussion titled Enabling horizontal scroll, which was last updated on June 11, 2023. However, it does not provide a solution to the issue you're experiencing ^[1].

Regarding your issue, it seems like the swipe gesture stops responding after navigating away and back to the screen with the carousel. This could be related to how the gesture handlers are managed when the component is unmounted and remounted. Unfortunately, I couldn't find specific information on how the carousel component manages gesture handlers in such scenarios within the repository.

You might want to ensure that the gesture handlers are properly reset or re-initialized when the component is remounted. Additionally, checking if the react-native-gesture-handler is correctly set up and integrated with your navigation library might help, as it plays a crucial role in managing gesture-based interactions ^[2].

To continue talking to Dosu, mention @dosu.

---

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

[vishal30982]

same bug in expo go also