Expo Mesh Gradient | New Mesh Gradient in React Native | Code with Beto

This guide introduces the new Expo Mesh Gradient, a cutting-edge gradient feature available for iOS 18 and above. It leverages SwiftUI, marking one of the first Expo SDK modules to use this framework instead of UIKit. The mesh gradient lets you create complex two-dimensional gradients defined by a grid of colors and positions, perfect for unique backgrounds and onboarding screens.

I walk through installing the Expo Mesh Gradient package, setting up a development build for iOS, and creating a demo screen that showcases how to customize the gradient grid and colors. This tutorial is for React Native developers using Expo who want to add advanced, visually rich gradients to their iOS apps.

What's inside

Introduction to Expo Mesh Gradient and SwiftUI support
Installing Expo Mesh Gradient and prebuilding for iOS
Creating a mesh gradient screen and integrating it with tabs
How the 2D gradient grid and color positioning works
Customizing grid size, colors, and positions for unique effects
Wrapping the gradient in a React Native View for layering content
Using color schemes to switch gradient colors dynamically
Ideas for interactive and animated mesh gradient apps

Introduction to Expo Mesh Gradient and SwiftUI support

Expo Mesh Gradient is a new addition to the Expo SDK that uses SwiftUI, Apple's modern UI framework introduced in iOS 13 and enhanced in iOS 18. Unlike previous Expo modules that rely on UIKit, this is the first Expo module built with SwiftUI, enabling more advanced native UI features on iOS.

This feature is only available on iOS 18 and above, including iPad and Mac. It allows you to create gradients defined by a two-dimensional grid of colors and positions, offering much more control and complexity than traditional linear or radial gradients. This opens up new design possibilities for React Native apps running on the latest Apple platforms.

Installing Expo Mesh Gradient and prebuilding for iOS

To use Expo Mesh Gradient, you install the package with:

Because it uses native SwiftUI code, you need to create a development build with:

This generates the native iOS folder locally, which you should add to your since it is autogenerated and managed by Expo Application Services when building in the cloud. For now, the feature only works on iOS, so you only prebuild the iOS project.

After prebuilding, you can run your app on an iOS simulator or device to test the mesh gradient.

Creating a mesh gradient screen and integrating it with tabs

I created a new screen file called and imported the component from the Expo package. This screen uses the mesh gradient as a full background, ideal for onboarding or splash screens.

Then I added this screen as a new tab in the app's tab navigator, hiding the tab title to let the gradient fill the entire view. This setup shows how to integrate the mesh gradient into a real app navigation flow.

How the 2D gradient grid and color positioning works

The mesh gradient is defined by a grid (for example, 3x3) where each point has a color and a position. Positions are given as coordinates between 0 and 1 on the X and Y axes, determining where each color starts in the gradient.

This grid-based approach lets you create complex, smooth blends across multiple colors in two dimensions, unlike simple linear gradients. You can tweak the grid size, colors, and positions to create unique patterns.

The Apple developer documentation explains this in detail, but the Expo docs are still high-level, so some prior knowledge helps.

Customizing grid size, colors, and positions for unique effects

I experimented with increasing the grid size to 6x6 and adjusting the positions of colors to create interesting crossover and spacing effects. By changing the coordinates, you can push colors to overlap or spread out, generating dynamic and visually striking gradients.

This flexibility means you can design truly custom backgrounds that fit your app's style. You can also animate these values for interactive effects, opening many creative possibilities.

Wrapping the gradient in a React Native View for layering content

To add content on top of the mesh gradient, I wrapped it in a React Native with absolute positioning. This lets you overlay text, buttons, or other UI elements while keeping the gradient as a full-screen background.

I showed how to center a title text on top of the gradient and adjust styles to ensure proper layering and visibility.

Using color schemes to switch gradient colors dynamically

I demonstrated detecting the device color scheme with React Native's hook and switching between light and dark color sets for the mesh gradient. This lets your app adapt the gradient colors automatically based on the user's system preferences.

This approach improves user experience by respecting dark mode and light mode themes seamlessly.

Ideas for interactive and animated mesh gradient apps

I closes with ideas for building apps that let users create, customize, and save mesh gradients. For example, an app could allow dragging gradient points, picking colors, and exporting images for backgrounds.

I also shared a cool example by Tomash Sapeta from the Expo team, who built a demo letting users drag gradient points and change colors interactively. This kind of app could even become a social platform for sharing unique mesh gradients.

The possibilities with Expo Mesh Gradient are exciting and just starting to be explored.

Resources

CourseReact Native course

Learn React Native fundamentals and advanced topics to build production apps with Expo.

Premium resourcePro membership

Get access to exclusive tutorials, templates, and live Q&A sessions with Beto.

Let's connect!