Bottomsheet is under other components

[donnelworks]

Hello, sir, I just used your react native bottomsheet and it's great. But I have one problem when I mount your bottomsheet in my own component (ModalBottom) and I call my component 2x in a screen/page.

The bottomsheet in the first component will be under the second component. Is there a way to make the bottomsheet always appear above all components?

Thank you very much sir.

Examples of problems can be seen in the following recording.

https://user-images.githubusercontent.com/25565340/132120423-732066dc-7e4f-4582-8c7a-70875b455d4b.mp4

[numandev1]

@donnelworks you can use react-native-portalize to render the bottom sheet at top of the tree-like this Appp.js

import React from 'react';
import { View, Text } from 'react-native';
import { Host, Portal } from 'react-native-portalize';

export const MyApp = () => (
  <Host>
    <OtherComponent />
  </Host>
);

then you can wrap <Bottomsheet with <Portal to make this render in top of tree like this

import {Portal} from 'react-native-portalize';
import BottomSheet, {
  BottomSheetProps,
} from 'react-native-bottomsheet-reanimated';

<Portal>
<BottomSheet
        ref={bottomSheetRef}
        initialPosition={initialPosition}
        snapPoints={snapPoints}
        body={body}
        header={header}
/>
</Portal>

[donnelworks]

@nomi9995 Thank you for your feedback sir. I've tried using react-native-portalize and it worked to get the bottomsheet on top of all the components. But the bottomsheet got stuck and couldn't be closed. Is there any other way to fix it sir?

Thank you very much.

https://user-images.githubusercontent.com/25565340/132126876-e12b8579-ea62-4884-b750-fea88700960a.mp4

Host

Portal

[numandev1]

@donnelworks i think you have to add this gesture handler configuration code into your MainActivity.java https://docs.swmansion.com/react-native-gesture-handler/docs/

[donnelworks]

Thank you very much sir, it works very well!