How to get rid of white row at bottom of 'bottom navigator'

I am wanting to use the bottom navigator. When i add it to my app, it leaves a white bar below the tabs. has anyone else experienced this? Is there something I am doing wrong? can i get rid of this?

Hi, @jared! :wave:

I can’t say I have experienced this, (possibly because I don’t use them much) …

But, this may solve it -

  • Try making a guess about the height of the white bar… Mine would be ~15px - 20px.

  • Next, in the Margin area of the screen’s simple properties, try setting the bottomMargin to -20 / -15 / -10 (whatever your guess would be) -


What are we doing?

Unlike a normal margin (in which the component moves away by certain pixels), any margin which has a negative value, moves/stretches the other way. Means, it will cover the other component by certain pixels.

We are just stretching the screen by ~20px, so the screen moves bottom (by -20 pixels), and it hides the white bar below the screen (out of the display area).

Hope I helped you! :slightly_smiling_face:

Good Luck! :+1:
Thanks! :blush:

1 Like

Hey! I tried it, but this did not solve my issue.

It is an issue with the navigator. I will submit an issue to the github tomorrow if I don’t figure it out.

Thank you for your input!

1 Like

This worked for me, thank you. I had to make my own custom bottom nav bar. But this worked.

1 Like