6 Expo UI Tips I Learned Building Production Apps

I've been using Expo UI since the alpha days, and now with the beta in Expo SDK 55 it's come a long way. But there are still a few things that aren't obvious, and if you don't know them your app just won't feel polished.

I've been building production apps with Expo UI, Inkigo (an AI tattoo preview app) and Platano (a new AI image app template shipping soon), and today I'm sharing six tips that will save you hours of debugging.

If you prefer video, I put together a YouTube tutorial that walks through everything covered here.

1. The ignoreSafeArea Prop on Host

By default, Expo UI's SwiftUI hosting view tries to avoid the keyboard safe area. This sounds helpful until it starts pushing your content around in ways you don't expect.

I ran into this building Inkigo. I had an input using KeyboardStickyView from react-native-keyboard-controller, position absolute, measurements were correct, but when the keyboard opened there was way too much space between the keyboard and the input. The SwiftUI host was trying to move things so they wouldn't be covered by the keyboard, on top of my own keyboard handling.

The fix is the ignoreSafeArea prop on the Host component:

<Host matchContents ignoreSafeArea="keyboard">
  {/* your SwiftUI content */}
</Host>

Setting ignoreSafeArea="keyboard" tells the host to stop performing keyboard avoidance. You handle it yourself.

You can also use ignoreSafeArea="all" for elements like floating buttons that shouldn't move at all when the keyboard appears. In Inkigo, I use this on a button at the bottom-right of an image. Without it, the button shifts slightly every time the keyboard opens and closes.

2. matchContents

Think of the Host component as a window for accessing your SwiftUI view. Without matchContents, you need to manually set width and height on that window. Guess wrong and bad things happen: