---
title: Migrating to native stack navigation, with a surprise from iOS 26
teaser: We moved our React Native app from the JavaScript stack to the native stack
and suddenly inherited Liquid Glass, and a clipped logo.
tags: development,react native,ios
author: Jose Blanco
published_on: 2026-07-13
---
I have been working on an app that still sits on React Native 0.77 and the
old architecture. Slowly, as I was getting a grip on the new architecture,
one of the first big refactors was related to the navigation.
We were using JavaScript stack navigators, so the plan was to move everything
over to native stack navigators. We migrated all of our JavaScript stack
navigators across to the native stack. Then I opened the app on a device running
the new iOS version and got a little surprise.
## Liquid Glass
Because the native stack uses the real iOS navigation components under the hood,
the app suddenly picked up the new Liquid Glass styling from iOS 26. The app is
not ready for it. Nothing had been designed with that look in mind, and it
clashed with everything we had, especially the top left arrow back icon and the
logo in the middle.
The quick way to opt out is a single key in `Info.plist`:
```xml
UIDesignRequiresCompatibility
```
That tells iOS to keep rendering the app in the older compatibility style until
we are ready to embrace the new design properly.
## And another surprise
With Liquid Glass disabled, I thought I was done. Instead, our logo in the
navigation bar now looked clipped. The top and bottom were being cut off, and
it looked broken.
I spent a long time going in rounds on this one. I used Claude for ideas and,
being honest, the suggestions were not useful at all this time. Every answer
pushed me back towards a JavaScript based navigator, which was exactly the
thing I had just spent time moving away from. After a lot of back and forth I
was no closer.
## Sometimes a good old Google search is enough
In the end, I found the answer in someone else's blog post.
**The iOS navigation bar is exactly 44pt tall**. Our logo in the header was 55pt.
Even with Liquid Glass disabled, the underlying iOS component is fixed at 44pt
and there is nothing we can do to change that. Anything taller than the bar
simply gets clipped.
I was quite confused about why we never had this issue? Before the migration,
our header was a custom JavaScript header, and on older iOS versions a title view
that was bigger than the bar just spilled over the edges and looked fine.
The platform tolerated it.
**We were never really allowed to use a 55pt logo**. The old setup just happened
to put up with it. iOS 26, going through the real native bar, stopped being so
forgiving and clipped the logo the way it was probably always meant to.
## How to fix it
The fix in the end was straightforward. We render a smaller logo for devices on
iOS 26 or higher and keep the normal logo for everything else, including older
iOS versions and Android. It is not glamorous, but it respects what the platform
actually allows rather than fighting it.
If you move from React Navigation's JS stack navigator to native stack navigator
and your header looks off on newer iOS, check the height of whatever you are
putting in the bar. 44pt is the limit.