Open dropdown triggers navigation bar showing and overlay doesn't cover whole view

[harryfos]

Android specific:

On the app I'm working on the view covers the entire screen, with the navigation bar being transparent.

Originally when opening the dropdown the navigation bar would turn black however I realised that because of the use of the RN modal I had to set the navgiationBarColor to match transparent in the styles.xml and then the modal would inherit it. (This is the line I added inside AppTheme): <item name="android:navigationBarColor">@android:color/transparent</item>

However the overlay doesn't cover the navigation bar area so it results in the view looking like this:

Is it possible to extend the overlay? I presume it's because the modal is not covering this area.

Thanks in advance for your advice!

[harryfos]

I've not been able to resolve this as it seems to be a general issue with React Native Modal, instead I used dropdownOverlayColor="transparent" and implemented my own overlay at a higher level so that it is not inside the modal and then toggle visibility of it using onFocus and onBlur.

This doesn't fix the issue that sometimes that dropdown itself will new hidden behind the navigation bar resulting in this:

However I will attempt to add tweaks to prevent that happening. I'm not sure that this could be integrated as the use of Modal is I presume to give the ability to use the fullscreen and the dropdown may not always be placed in an area where using the full screen would be possible.