React Native Linear Gradient: Free Alternatives and How to Generate the Colors

React Native linear gradients require a native module — you cannot use CSS gradient syntax directly in React Native stylesheets. But you can use our CSS gradient generator to build and preview your colors in the browser before wiring them into your native code. This guide covers the three gradient options for React Native apps, how to preview colors before coding, and the specific syntax for each library.

Why CSS gradient Syntax Does Not Work in React Native

React Native uses a JavaScript object style system, not CSS. Properties like style={{ backgroundImage: 'linear-gradient(...)' }} do not work — React Native renders to native UI components, not HTML/CSS.

For gradient backgrounds in React Native, you need a library that wraps the native LinearGradient API on iOS (CAGradientLayer) and Android (GradientDrawable). The two most popular options are expo-linear-gradient (for Expo projects) and react-native-linear-gradient (for bare React Native).

Before writing any native code, use the gradient generator to find your color values. The generator's visual interface is far faster than guessing hex codes in your source file. Build the gradient, note the colors and angle, then convert those values to native format.

Option 1: expo-linear-gradient (Easiest for Expo Apps)

For Expo-managed workflow apps, expo-linear-gradient is the simplest option:

npx expo install expo-linear-gradient

import { LinearGradient } from 'expo-linear-gradient';

<LinearGradient
  colors={['#667eea', '#764ba2']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
  style={{ flex: 1 }}
>
  {/* your content */}
</LinearGradient>

The colors array maps to your color stops. The start and end props define the gradient direction: { x: 0, y: 0 } is top-left, { x: 1, y: 0 } is top-right (equivalent to 90deg in CSS). Use the CSS generator to preview colors, then copy the hex values to the colors array.

Sell Custom Apparel — We Handle Printing & Free Shipping

Option 2: react-native-linear-gradient (Bare React Native)

For bare React Native projects (not Expo managed workflow):

npm install react-native-linear-gradient
cd ios && pod install

import LinearGradient from 'react-native-linear-gradient';

<LinearGradient
  colors={['#667eea', '#764ba2', '#f093fb']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
  style={styles.container}
>
  {/* your content */}
</LinearGradient>

The API is nearly identical to expo-linear-gradient. The key difference is the native linking step — you need to run pod install on iOS and the Android Gradle build picks up the library automatically. Both libraries accept the same color array and start/end point format.

How to Convert CSS Gradient Values to React Native

Use this conversion guide when taking values from the CSS gradient generator to React Native:

• Colors: Copy hex codes directly. Both libraries accept hex strings, rgba strings, and named colors.
• Direction: CSS uses degrees (90deg = left to right). React Native uses start/end coordinates: 90deg = start={{x:0,y:0.5}} end={{x:1,y:0.5}}
• Color stops: CSS percentage positions (0%, 50%, 100%) become the locations prop: locations={[0, 0.5, 1]}
• Multiple stops: Add more hex values to the colors array and matching decimal values to locations

Example: CSS linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) becomes:

<LinearGradient
  colors={['#667eea', '#764ba2', '#f093fb']}
  locations={[0, 0.5, 1]}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
/>

If You're Building for Web Only (Not Native)

If your React project targets web only (not native iOS/Android), you do not need a gradient library at all. Standard CSS works in React just like in any web project. Apply gradient styles inline or via CSS classes:

// React web — inline style
<div style={{ background: 'linear-gradient(135deg, #667eea, #764ba2)' }}>
  ...
</div>

// Or via CSS module
// styles.module.css
.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

Use the gradient generator to generate the CSS value, copy it, and paste it into your React web stylesheet or inline style. No library needed.

Frequently Asked Questions

What is the best library for gradients in React Native?

For Expo projects, expo-linear-gradient is the easiest option with no additional native linking. For bare React Native projects, react-native-linear-gradient is the most widely used and maintained library. Both have nearly identical APIs.

Can I use CSS linear-gradient() in React Native?

No. React Native does not use CSS — it uses a JavaScript style object system that maps to native platform rendering. You need expo-linear-gradient or react-native-linear-gradient for native gradient backgrounds.

How do I convert a CSS gradient angle to React Native start/end coordinates?

90deg (left to right) = start={x:0,y:0.5} end={x:1,y:0.5}. 180deg (top to bottom) = start={x:0.5,y:0} end={x:0.5,y:1}. 135deg (diagonal) = start={x:0,y:0} end={x:1,y:1}.

Can I preview React Native gradient colors before writing code?

Yes. Use our CSS gradient generator to preview color combinations visually. The generator uses the same hex color values that React Native gradient libraries accept. Build and tweak your colors in the browser, then copy the hex values to your native code.