Migrating to native stack navigation, with a surprise from iOS 26

2026-07-13T00:00:00+00:00

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:

<key>UIDesignRequiresCompatibility</key>
<true/>

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.