How to Create Beautiful Linear Gradients in Your Expo App

Gradients are the cheapest way to make an app look designed instead of default. With expo-linear-gradient they work on iOS, Android, and web, straight from Expo Go. I build a scrollable gallery of gradient swatches in the video, from empty project to a grid you can reuse in your own UI.

Along the way you'll pick up small habits that matter, like handling dark mode and safe areas properly.

What's inside

• Installing expo-linear-gradient in a fresh Expo project
• Simplifying the default Expo Router template to a single screen
• Organizing gradient color arrays into rows of three in a gradients.ts file
• Rendering the grid with nested maps and proper keys
• Padding the ScrollView so content clears notches and status bars
• Dark mode quirks: why gradients render differently on web vs iOS

Resources

CourseReact Native course

The Style & Design section goes further: 80 minutes on Figma workflow, design systems, and dark mode.