6 Expo UI Tricks That Save You Hours of Debugging | Code with Beto

I share six essential Expo UI tips that will save you hours of debugging and help your React Native app feel more native and polished. These tricks come from Beto’s experience using Expo UI since its alpha days and working with the latest Expo SDK 55 beta.

If you are building production apps with Expo UI, especially integrating SwiftUI or Jetpack Compose components, these tips cover safe area handling, host view sizing, platform extensions, and state management best practices.

What's inside

Handling safe area and keyboard with ignoreSafeArea property
Using matchContents to size SwiftUI host views correctly
Hosting React Native views inside Expo UI’s SwiftUI host view
Using platform extensions for components and routes
Centralizing API logic and state with React context
Managing native UI previews inside Expo UI
Avoiding UI breakage by respecting native view boundaries

Handling safe area and keyboard with ignoreSafeArea property

Expo UI components come with default safe area handling to avoid UI elements being covered by notches or the keyboard. However, this can sometimes cause unexpected large spaces between inputs and the keyboard.

The key is the property on the host view. You can tell the host view to ignore all safe areas or just the keyboard safe area. For example, if you want a sticky input to not move unnecessarily when the keyboard opens, set on the host view.

This disables the default keyboard avoidance behavior, fixing layout issues where the UI looks broken or spaced out. In some cases, like a button at the bottom, you might ignore all safe areas because the user can always dismiss the keyboard by swiping down.

Using matchContents to size SwiftUI host views correctly

When embedding SwiftUI views inside Expo UI, you use a host view to render the native SwiftUI component. This host view needs explicit width and height to properly register touches and render correctly.

If you remove the property from the host view, the view collapses to a minimal size, causing touch events outside that area to be ignored and breaking the UI.

The solution is to use the style property on the host view. This automatically sizes the host view to exactly match the width and height of the embedded SwiftUI content, ensuring proper rendering and touch handling without manually guessing dimensions.

Hosting React Native views inside Expo UI’s SwiftUI host view

Expo UI uses SwiftUI on iOS and Jetpack Compose on Android to render native components. However, SwiftUI host views only accept native components from their respective frameworks.

If you want to use React Native views inside a SwiftUI host view, you need to wrap them inside a special React Native host view component provided by Expo UI. This component acts as a bridge, allowing you to embed React Native primitives inside a SwiftUI or Jetpack Compose view hierarchy.

This is essential for cases like Platano’s native settings screen, where the main screen is fully native but you want to embed React Native views for previews or interactive parts. Without this host view, mixing React Native views directly inside SwiftUI would break the app.

Using platform extensions for components and routes

When building with Expo UI, you often write native components in SwiftUI or Jetpack Compose. To avoid breaking your app on other platforms, use platform-specific file extensions like , , or .

Create a default component without platform extension as a fallback, then add platform-specific implementations for iOS and Android. For example, input controls can have a file using Jetpack Compose and a file using SwiftUI.

This pattern ensures your app loads the correct native implementation per platform without conflicts, keeping your codebase clean and maintainable.

Centralizing API logic and state with React context

With Expo UI, you want to avoid duplicating API calls and state management logic across native implementations for iOS and Android.

The best practice is to lift state and logic into a shared React context or abstraction layer. For example, fetching data and managing state happens once in the context, which both native views consume.

This avoids repeating code in SwiftUI and Jetpack Compose components and keeps your business logic centralized and reusable across platforms.

Managing native UI previews inside Expo UI

In Platano, I show how to embed a React Native host view inside a fully native SwiftUI screen to preview UI changes based on user settings like roundness.

This approach lets you combine native settings screens with live React Native previews, improving developer experience and UI consistency.

The React Native host view bridges the native and React Native worlds, allowing seamless integration of native UI previews inside Expo UI apps.

Avoiding UI breakage by respecting native view boundaries

Without correct sizing and safe area handling, native views can break your UI by ignoring keyboard avoidance or touch boundaries.

Using the property and style fixes these common issues by controlling how the host view interacts with safe areas and how it sizes itself.

These small but critical details prevent frustrating bugs where inputs get covered by the keyboard or touches don’t register properly.

Resources

CourseReact Native course

Learn fundamentals and advanced concepts to build production React Native apps.

NewsletterReact Native newsletter

Stay updated with the latest tips, tutorials, and news from the React Native ecosystem.

Let's connect!