Search code examples
androidreact-nativemobilemodal-dialogdimension

How can I fix the missing bottom part in React Native Modal displaying on Android mobile devices?

In React Native, I have an Image in Modal.

However, when the Modal is first displayed, it encounters an error where the bottom part is missing.

This bug when Modal show in first time

When I try to do close Modal and turn it back on, it works fine again with full screen rendering.

When I close and reopen modal again

I tried using Dimensions (width, height)and flex but not working for my case.

What happened and how can i fix this. Please help me.

  • Node version: 18
  • React Native version: 0.71
  • Devices: Redmi note 8 pro, Samsung Galaxy note 10.
Solution

  • I found a way to fix it using react-native-portalize library. Here is the code that you can try:

    import { Host } from 'react-native-portalize';

<Host>
    <Modal>...</Modal>
</Host>