Expo UI Crash Course | Truly Native UI in React Native

Expo UI solves a common React Native challenge: the lack of truly native UI components like sliders, pickers, and date pickers. Instead of relying on community packages that may break or feel off, Expo UI lets you use native SwiftUI and Jetpack Compose components directly inside your React Native app. This means you get the native look and feel without the usual maintenance headaches.

In this video, I explain what Expo UI is, why it exists, and how it works under the hood by bridging modern native UI frameworks with React Native’s existing native view system. If you want to build better native-looking apps with less hassle, this crash course will give you a solid understanding and practical examples to get started.

What's inside

• Why React Native lacks some native UI components
• The problem with community packages and custom implementations
• What Expo UI is and how it leverages SwiftUI and Jetpack Compose
• The history of native UI frameworks and React Native’s declarative approach
• How Expo UI uses UIHostingController and ComposeView under the hood
• Expo UI is an API, not a framework
• Translating a SwiftUI screen to Expo UI components
• Using forms and navigation with Expo UI

Why React Native lacks some native UI components

React Native provides only a minimal set of UI primitives out of the box. Common components like sliders, date pickers, and segmented controls are missing. This forces developers to rely on third-party packages, which can be unreliable or break with React Native updates. Because these components are essential for many apps, this gap makes building polished native apps harder and more time-consuming.

The core React Native team focuses on the most essential building blocks, leaving many UI components to the community. Unfortunately, this means you often have to juggle multiple packages, each with its own maintenance status and compatibility issues. This situation creates friction when upgrading React Native or trying to keep your app stable.

The problem with community packages and custom implementations

Community packages often come with tradeoffs. Many are not fully native but use custom implementations with styles that don’t feel or look truly native. This can lead to UI inconsistencies and a less polished user experience. Additionally, these packages depend on maintainers to keep them updated and compatible with new React Native versions.

When React Native updates, these packages can break, forcing you to wait for fixes, patch them yourself, or even implement your own versions. This maintenance burden can slow development and cause frustration. Expo UI addresses this by providing components that are fully native, leveraging the modern native UI frameworks Apple and Google built, so you don’t have to worry about compatibility or native feel.

What Expo UI is and how it leverages SwiftUI and Jetpack Compose

Expo UI is a set of UI primitives that render SwiftUI views on iOS and Jetpack Compose views on Android using JSX syntax. It lets you write truly native UI components declaratively in React Native by hosting these modern native frameworks inside the existing native view systems.

This means you write React Native code that compiles down to native SwiftUI or Jetpack Compose views, giving you access to the latest native UI features and performance. Expo UI acts as a bridge, so you get the best of both worlds: React Native’s developer experience and the native UI frameworks’ power and polish.

The history of native UI frameworks and React Native’s declarative approach

Originally, iOS used UIKit and Android used Android Views—both imperative frameworks where you manually mutate views. React Native introduced a declarative API on top of these native views, improving developer experience by letting you describe what the UI should look like instead of how to update it.

Later, Apple introduced SwiftUI and Google introduced Jetpack Compose, both declarative frameworks designed to work alongside the older imperative frameworks. These new frameworks simplify UI development and offer better syntax and features. Expo UI leverages this evolution by embedding these modern declarative frameworks inside React Native’s existing native view hierarchy.

How Expo UI uses UIHostingController and ComposeView under the hood

Expo UI uses Apple’s UIHostingController API to embed SwiftUI views inside UIKit on iOS. On Android, it uses ComposeView to embed Jetpack Compose inside Android Views. This approach lets Expo UI combine old and new frameworks, rendering modern native UI components inside React Native’s native view system.

UIHostingController acts as a SwiftUI canvas hosted inside a UIKit view, allowing SwiftUI code to run within the traditional UIKit environment. Similarly, ComposeView lets you instantiate Jetpack Compose views inside Android’s view system. Expo UI uses these adapters to seamlessly integrate modern native UI frameworks into React Native apps.

Expo UI is an API, not a framework

Expo UI is not a full framework but a clever API that leverages the compatibility between UIKit and SwiftUI on iOS, and Android Views and Jetpack Compose on Android. It acts as an adapter to host these modern UI frameworks inside the older native view systems React Native uses.

This means you don’t have to rewrite your entire app or switch frameworks. Instead, you can incrementally adopt Expo UI components where you need truly native UI, while still using React Native’s existing components elsewhere. Expo UI is designed to be lightweight and composable, fitting naturally into your React Native projects.

Translating a SwiftUI screen to Expo UI components

The video demonstrates how to translate a SwiftUI form screen into Expo UI components. It shows how to use navigation, toolbars, and forms declaratively with Expo UI, matching the native SwiftUI structure but in React Native JSX syntax.

This practical example helps you understand how to build real native screens with Expo UI. You see how forms map to native grouped items, how navigation bars and toolbars are created, and how to structure your components to maintain the native look and feel. The example app and Xcode project are open source and linked in the description for reference.

Using forms and navigation with Expo UI

Forms in SwiftUI are like scroll views containing grouped items, and Expo UI replicates this with components that map to native form elements. Navigation and toolbars are also supported, letting you build fully native navigation experiences using Expo UI components.

This means you can create complex, native-feeling forms with sections, inputs, and buttons, all declaratively in React Native. Navigation bars and toolbars integrate seamlessly, preserving platform conventions and animations. Expo UI helps you maintain a consistent native experience across iOS and Android without extra native code.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

YouTubeExpo UI Playground

Explore an open-source Xcode project example for Expo UI usage.

Premium resourcePro Membership

Get access to all courses, lessons, and updates with lifetime access.