Modal Issue when we use reanimated Carousal in the same screen on Android.

[manoj31567]

I have a React Native screen where I use a Gorham Bottom sheet modal containing a scanner. On the same screen, I have implemented the react-native-reanimated-carousel component. While interacting with the modal the modal schema is opening but the styles applied for the modal is neither visible nor accessible for that screen on Android but it works for IOS. When I remove the carousel component, the modal functions correctly.

What could be causing this issue, and how can I resolve it while keeping both the modal and the carousel component in the same screen?

React Native - 0.76.2 "@gorhom/bottom-sheet": "^5.0.5", "react-native-reanimated-carousel": "^4.0.2",

[dosubot[bot]]

Hey @manoj31567! I'm here to help you with any bugs, questions, or contributions. Let's tackle this issue together!

A similar issue was reported where the carousel was not working in a modal on Android. The suggested solution was to wrap the Modal in a GestureHandlerRootView. This is necessary because a Modal on Android might be a new fragment or activity, which isn't included in the GestureHandlerRootView that the main application window is wrapped in. You might also want to refer to the documentation for usage with modals on Android from the react-native-gesture-handler library for additional guidance ^[1].

To continue talking to Dosu, mention @dosu.

---

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

[chrisribal]

Same Problem here. A Modal beside the carousel on the same page is not rendered properly.

[Minjares]

Same Problem here. A Modal beside the carousel on the same page is not rendered properly.

did you found any fix?

Just wrap the modal in a GestureHandlerRootView

[sword-fish333]

I had the same problem. A modal beside <Carousel/> in the same component. The problem was that <TouchableOpacity/> was not handling at all onPress. I tried everything from increasing zIndex and adding elevation to Modal body to even hiding the Carousel when the modal was open but nothing seemed to work. Than I tried dosubot solution and added <GestureHandlerRootView> around <Modal> component. This fixed the problem and now TouchableOpacity from the modal handles correctly onPress

[DenisKenzo]

<GestureHandlerRootView>
  <Dialog isVisible={isVisible} onBackdropPress={onBackdropPress}>
    {children}
  </Dialog>
</GestureHandlerRootView>

wrapping modal with GestureHandlerRootView fixed my problem, but use it only in carousel

[vivakimjisu]

in my case, it happens when page is Tab.Screen at Stack.Screen it works without problem Are there any other cases? (+ In this case too, it was solved with GestureHandlerRootView)

[shrutijasoliya]

@vivakimjisu I’m facing the same issue. When I wrap the modal with GestureHandlerRootView, it shows a white screen even when the modal is not supposed to be visible.

[shrutijasoliya]

I fixed this issue by wrapping the modal with the view. <View><Modal>{...}</Modal></View>

[dosubot[bot]]

Hi, @manoj31567. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog and am marking this issue as stale.

Issue Summary:

• You reported that Gorhom Bottom Sheet modal styles were not visible on Android when used with react-native-reanimated-carousel, though it worked on iOS.
• Multiple users confirmed that wrapping the Modal component in a GestureHandlerRootView fixes the style and touch issues on Android.
• Some edge cases with Tab.Screen and Stack.Screen were noted, with a workaround involving wrapping the modal in a simple View to fix white screen issues.
• The solution has been verified by several users and effectively resolves the problem.

Next Steps:

• Please confirm if this issue is still relevant with the latest version of react-native-reanimated-carousel.
• If it is, feel free to keep the discussion open by commenting; otherwise, I will automatically close this issue in 7 days.

Thanks for your understanding and contribution!