How to Create Beautiful Linear Gradients in Your Expo App

Learn how to use the Expo Linear Gradient library to create beautiful gradients in your Expo React Native app. You'll learn how to set up a new Expo project, installing the linear gradient dependency, and building a UI to display and interact with multiple gradient options.

You’ll see how to handle dark and light modes, customize gradient directions, and ensure your gradients work across iOS, Android, and web. I is practical for developers wanting to add polished gradient backgrounds or UI elements with minimal setup.

What's inside

Creating a new Expo app and installing Expo Linear Gradient
Using Expo Router for navigation and simplifying app layout
Defining gradient colors as arrays and organizing them in rows
Rendering gradients in a scrollable list with React Native components
Handling keys in map functions to avoid warnings
Styling scroll views and adding padding for safe area compatibility
Managing dark mode and platform-specific gradient styling
Tips on accessing source code and related projects on codewithbeto.dev

Creating a new Expo app and installing Expo Linear Gradient

I start by creating a fresh Expo app using the command . After opening the project in VS Code, it installs the Expo Linear Gradient library with . This library is favored because it works seamlessly on iOS, Android, and web, including Expo Go.

Starting with a clean template, I demonstrate launching the app on a device and confirms the setup is ready for gradient implementation.

Expo Router is included by default in the new Expo app template. I show how to remove the default tab navigation to simplify the app to a single screen. This involves deleting the tabs folder and moving the index screen to the app root.

This approach keeps the UI focused on displaying gradients without extra navigation complexity, making it easier to build and test the gradient list.

Defining gradient colors as arrays and organizing them in rows

Gradient colors are defined as objects with a name and an array of colors. I use ChatGPT to generate a set of gradient color arrays, which are stored in a file.

Each gradient is an array of colors, and these gradients are grouped into rows of three for display purposes. This structure allows rendering a grid-like layout where each row contains three gradient items.

Rendering gradients in a scrollable list with React Native components

The main screen uses a to display all gradients. I demonstrate mapping over the rows of gradients, then mapping over each gradient in the row to render them individually.

Initially, the gradient names are displayed as text placeholders. This confirms the data structure and rendering logic before adding the actual gradient views.

Handling keys in map functions to avoid warnings

To prevent React warnings about missing keys in lists, I show how to use the index parameter from the map callback as a key for each row and each gradient item.

This is a simple but important step to ensure smooth rendering and avoid console warnings during development.

Styling scroll views and adding padding for safe area compatibility

I addresses an issue where content goes under the safe area by adding padding to the ’s content container style. A padding top of 130 is used to make space for a large header planned later.

This padding ensures the gradients are fully visible and not obscured by device notches or status bars.

Managing dark mode and platform-specific gradient styling

The app supports both light and dark modes, with theme-aware text and views. I points out that gradients can look different on web versus iOS or Android, such as background colors appearing white on web but black on iOS in dark mode.

Handling these platform-specific differences is important for a consistent user experience, and I note at customizing headers and styles accordingly.

All source code for this project and others from the channel are available for free at codewithbeto.dev under the projects section. This includes dependencies and GitHub repo links.

I also mention related courses on React Native and GitHub for developers wanting to deepen their skills beyond this tutorial.

Resources

CourseReact Native course

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

Let's connect!