[Bug][Android]: Conflict with react-native-modal when Fabric/new architecture enabled

[Dat-Mobile]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

The modal shows up with blank background and its children are collapsed I already created the bug but it was marked as invalid https://github.com/gorhom/react-native-bottom-sheet/issues/2166

Reproduction steps

Place both components in the same screen then the issue happen:

import Modal from "react-native-modal"; import BottomSheet, {...} from "@gorhom/bottom-sheet";

This issue only happen if:

• New architecture enabled
• On Android, both debug and release
• (react-native-modal) and in the same screen

Here's the button I press to open the react-native-modal:

Then the modal shows up with blank background and its children are collapsed

When I remove from the screen, the works fine again

Reproduction sample

https://snack.expo.dev/@liudmyla.chubar/drag-down-issue

Relevant log output

Reproduction sample above is not of the issue!!
I only use it so that the issue won't marked as invalid

[nemoneph]

Same issue but with Modal directly from react-native.

[rklomp]

I am also seeing this issue when trying to use Modal from 'react-native' in combination with BottomSheet from '@gorhom/bottom-sheet' (v5.1.1).

My app has a FlashList with items. A BottomSheet containing a BottomSheetScrollView is used to show filtering options for the list. With new arch disabled, clicking an item in the list opens the modal as expected. When creating a new build with new arch enabled, clicking an item will not show the modal content, but makes the the screen unresponsive to any input. So some kind of overlay is rendered, but the modal itself is not visible.

Whenever I remove the BottomSheet from the view everything is working as expected.

This issue is blocking me from moving to new arch.

[danish5454]

any solution ?

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[rklomp]

Still an issue

[thanhcuong1990]

This issue still happens with React Native 0.78.2

[danish5454]

@thanhcuong1990 RN 0.76.3 is also experiencing the same issue.

[msphn]

clean your keyboard bro

[danish5454]

clean your keyboard bro

I'm not using any input fields. Simply opening the modal after the bottom sheet closes.

[tmak1990]

the issue still remains. any fixes? I need to use Modal from react-native, and react-native-modal library as well...

[rklomp]

Unfortunately I have not found a solution yet.

@gorhom Do you have any idea what could cause this?

[poupsipoups]

Hey I have the exact same issue. The modal is stuck at the top left corner and freeze all the screen

[HuseinHQ]

I'm having exactly the same issue, any fix?

[arancauchi]

Depending on your setup, you may need to add a <BottomSheetModalProvider> to the root of your modal screen, if using react-navigation.

This solved it for me.

[tmak1990]

arancauchi

thank you for your advice, I am not using react-navigation but tried it and didn't fix the issue unfortunately.

[IbraheemShawhnee]

Making coverScreen={false} prop on Modal component of 'react-native-modal' and add to styles a zIndex 999 solve the problem for me

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[plaknight]

same issues, can anyone solve this problem?

[brycnguyen]

Having the same issue. I was using react-native Modal and now I switched to react-native-modal, however, I need the modal to take up the full page, so coverScreen={false} will not work for my case

[DvzZDev]

I found a solution that works for me: I moved all my modals into a provider and placed them in the App/Layout. I manage their state using a global state manager like Zustand. This is the only solution that worked for me after two days of trying.

[Muhammadmahadsaeed]

@gorhom any update on this?

[juliussneezer04]

In case this helps anyone, I was facing this issue. My bottom sheet modal was just invisible. The main issue being sheet not closing properly

To fix this, I did a couple of hacky things:

1. Set index prop to 1 only for Android (forces it to open by default for Android - state is going to be controlled by a local state in parent)

...
index={Platform.select({
          ios: -1,
          android: 1,
          default: -1,
        })} // hidden initially except on android where visibility is controlled by local state
...

2. I used a separate local state to track modal open/closes only for android. For iOS, the Ref-based control worked well. In Sheet:

    if (!open) {
      return null;
    }
    return (
      <BottomSheet
       ...

When using component:

    <MyCustomBottomSheetComponent
        ref={replyBottomSheetRef}
        open={Platform.select({
          android: isReplyBottomSheetOpen,
          ios: true,
          default: true,
        })}
    ...

3. Create an effect to close modal when hardware back button is pressed using BackHandler. You'll need to pass in an onClose handler to your component

    // Effect to handle back button press on android
    useEffect(() => {
      if (Platform.OS === "android" && open && !backHandlerRef.current) {
        const backHandler = BackHandler.addEventListener(
          "hardwareBackPress",
          () => {
            onClose();
            return true;
          }
        );
        // Use a ref to avoid multiple listeners being added
        backHandlerRef.current = backHandler;
        return () => {
          backHandler.remove();
          backHandlerRef.current = null;
        };
      }
    }, [open, onClose, backHandlerRef]);

It's hacky but it works + preserves the pan handle drag animations across both devices.

[butadpj]

Wrapping the <Modal> inside of a <View> with 'absolute' position and 'flex-1' works for me.

Not sure what exactly the issue is, but it seems like the Modal component couldn't get the computed width and height of the screen where it's being rendered. This "wrapper hack" works because it contains the Modal within a container that has full width and height. The position absolute is to make sure it doesn't affect your layout

// Nativewind
<View className="absolute inset-0 flex-1">
  <Modal>
    ...
  </Modal>
</View>

// ===========

// style prop
<View 
  style={{
      position: 'absolute',
      inset: 0,
      flex: 1,
  }}
  <Modal>
    ...
  </Modal>
</View>

@Dat-Mobile Can you let me know if this works for you too? Thanks!

[chuthuong2004]

Making coverScreen={false} prop on Modal component of 'react-native-modal' and add to styles a zIndex 999 solve the problem for me

It worked for me. Thanks a lot

[akku27-cse]

I am using RN-version:0.77 and when click to open any modal in the release APK, the whole app is killed and Android drops back to the phone’s home screen (like a full crash/force close).How to fix it?

[ShkoMaghdidEbrahim]

@butadpj shitty workaround but works, thanks, i can still see it empty for a second then the content loads