App-bar spacing is one of the fastest ways for a native app to feel unfinished. It is also easy to “fix” in a way that creates a new problem on another device.
Why the same bar can look different
Modern phones reserve space for cameras, system indicators, and gesture areas. iOS and Android do not reserve those areas in exactly the same way. A preview can be useful, but it does not replace a real-device check.
The visible result also depends on context: whether the bar is part of the screen or a reusable navigation component, whether the page scrolls beneath it, and whether other containers add their own top spacing.
A safer way to find the cause
1. Find where the extra space comes from
Start with the outermost screen and work inward. Check whether the screen, navigation layer, app bar, or a parent group is adding the vertical space. Changing the child before finding the owner usually produces doubled padding.
2. Compare the same screen in real builds
Test on at least one iPhone and one Android device where possible. Record the device model, operating-system version, and whether the content scrolls. A screenshot from the web preview alone is not enough to make a native spacing decision.
3. Use one clear spacing rule
Keep the title, controls, and top content on a consistent scale. Let the operating system reserve its own protected area, then apply a normal content inset below it. Avoid adding a special offset for every device; those values become fragile the next time the shell changes.
4. Test short and long content
Try a one-word title, a long title, a screen with a back action, and a scrollable screen. A fix that only works for one mockup is not a fix.
Common mistakes
- Adding a large top margin to the page and another to the app bar.
- Matching the web preview pixel-for-pixel instead of checking the native build.
- Using a single absolute position that cannot respond to a notch or status area.
- Fixing one screen locally when the navigation pattern needs a shared component.
Make it a release check
Before each release, test the first screen, a screen with a back action, a form with the keyboard open, and a long scrolling list on both platforms. This takes minutes and catches the kind of detail users notice immediately.
FAQ
Why is there extra space above my Adalo app bar on one phone?
The device may reserve a different safe area, or an outer screen container may be adding spacing on top of the bar. Compare the hierarchy and the native build before changing margins.
Should I remove safe-area spacing?
Usually no. The goal is to make the app's content begin in the right place below the protected system area, not to force controls into it.
Rehost designs, tests, and maintains native app UI across the devices your customers actually use. Talk with us about an app that needs a cleaner release process.