Drawer height is not fully covered the screen on Android

[kyawzinwaidss]

Does anybody know how can I fix this problem? As you can see in the attached image, when I open the drawer, it's not showing up on the full screen. The top side is showing the background screen. I have been looking up to fix this problem for a long time and still couldn't find the solution. Can anyone help me to fix this problem, please? It happens only on Android. Working fine on iOS.

[lukebrandonfarrell]

@kyawzinwaidss Where is your drawer in your code? Potentially you need to move it up the hierarchy

[kyawzinwaidss]

Sure. Instead of calling the openSideMenu() function inside the <CommonHeader />, you could try to call it in the parent component. Or the parent of the parent. The way to do that is simply declaring it in the parent component and then pass the function to the <CommonHeader /> component as a prop.

You would declare the openSideMenu() function on the parent component, and on the <CommonHeader /> you would do something like this: <CommonHeader currentScreen={"Settings"} parentComponentId={this.props.componentId} openSideMenu={this.openSideMenu} />

Noticed how I added the openSideMenu={this.openSideMenu}.

Let me know if that works and the drawer shows correctly. If not, I'd recommend to try calling on a component higher in the hierarchy.

Sadly, it's not working. I did exactly what you said to put the openSideMenu function to the parent and it still not working. How can I call it on a component higher in the hierarchy?

[rodriigovieira]

I would recommend to declare it even further up the hierarchy. For ex, check where your root component is declared, and after you configure the navigator, call the function.

Unfortunately, it's hard to assist like this. I would need an example project where I could reproduce the issue.

[markjongkind]

+1 I have this exact issue as well right now. Using RN 0.64.2 with react-native-navigation-drawer-extension 4.3.0. Even when I trigger RNNDrawer.showDrawer() right after declaring the Navigation.setRoot(), on Android there is still some space above the drawer visible, exactly like the screenshot above.

@rodriigovieira do you have any other input or ideas how this can be fixed?

[rodriigovieira]

Do you have a sample of code that reproduces the issue? That way would be easier for me to check.

[markjongkind]

Just to give an update: when I create a brand new RN project from scratch and install this extension, everything works perfectly fine. But somehow, in my main project, the menu has unwanted whitespace at the top. Even when I use the same clean index.js app.js and navigation screens in my main project, as in the (working) project from scratch, the whitespace still is there...
So my conclusion is that the issue is not related to my JS project files (index.js, app.js, and screens), but somehow there are Android-specific files that mess up the rendering.