Expo Mesh Gradient | New Mesh Gradient in React Native

Linear gradients are everywhere. Mesh gradients are not, and that's your chance to make an onboarding screen people remember. Expo Mesh Gradient is one of the first Expo modules built on SwiftUI instead of UIKit, and it lets you blend colors across a 2D grid on iOS 18 and up. I build a full demo screen in the video, from install and prebuild to a 6x6 grid with overlapping colors.

What's inside

• Install expo-mesh-gradient and set up a development build with prebuild
• How the color grid works: positions from 0 to 1 on both axes
• Push grid points around to create crossover and spacing effects
• Layer text and buttons on top with an absolutely positioned View
• Swap gradient palettes automatically with useColorScheme for dark mode
• App ideas: draggable gradient points, color pickers, exportable backgrounds

Resources

CourseReact Native course

Go deeper in the Native Modules section: 60 minutes on the Expo Modules API and custom native views.