Skip to main content

Gradients in React Native

· 5 min read
Beniamin Marcu
Full Stack Developer
Last updated on May 17, 2026

gradients react native

Gradients can make a React Native screen feel more polished, but they are easy to overuse. The best gradients have a job: improving contrast on images, creating a clear call-to-action, separating a hero area, or adding depth to a small UI element without hurting readability.

For Expo and Expo-modules apps, expo-linear-gradient is the most direct solution. It renders a native gradient view on iOS and Android and also works on web.

Quick Answer​

Install expo-linear-gradient, import LinearGradient, and pass at least two color stops:

corepack yarn expo install expo-linear-gradient
import { LinearGradient } from 'expo-linear-gradient';
import { Text } from 'react-native';

export function PrimaryGradientButton() {
  return (
    <LinearGradient
      colors={['#0EA5E9', '#2563EB']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={{ borderRadius: 8, padding: 14 }}
    >
      <Text style={{ color: '#fff', fontWeight: '700', textAlign: 'center' }}>
        Continue
      </Text>
    </LinearGradient>
  );
}

If your app already includes Expo modules, follow the current React Native stack and the app lockfile before changing package versions.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Use Typed Color Stops​

LinearGradient needs two or more colors. In TypeScript, keep color arrays inline or type them as a tuple:

const brandGradient = ['#0F766E', '#14B8A6'] as const;
<LinearGradient colors={brandGradient} style={styles.card} />

Use a single backgroundColor on View when you only need one color. A one-color gradient is unnecessary.

Control Direction With start and end​

Gradient points are fractions of the view size. { x: 0, y: 0 } is top-left; { x: 1, y: 1 } is bottom-right.

<LinearGradient
  colors={['#111827', '#4B5563']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
  style={styles.header}
/>

Use horizontal gradients for subtle surfaces and diagonal gradients for stronger brand moments. Keep repeated UI elements calmer than landing or onboarding screens.

Add an Image Overlay​

Gradients are useful for making text readable on photos:

import { ImageBackground, StyleSheet, Text } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export function VenueHero() {
  return (
    <ImageBackground source={require('./assets/venue.jpg')} style={styles.hero}>
      <LinearGradient
        colors={['rgba(0,0,0,0.72)', 'rgba(0,0,0,0.12)']}
        style={styles.overlay}
      >
        <Text style={styles.title}>Book your appointment</Text>
      </LinearGradient>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  hero: {
    minHeight: 280,
  },
  overlay: {
    flex: 1,
    justifyContent: 'flex-end',
    padding: 24,
  },
  title: {
    color: '#fff',
    fontSize: 28,
    fontWeight: '700',
  },
});

This pattern is useful for marketplace cards, booking apps, real estate listings, food delivery hero images, and onboarding slides.

Use locations for Harder Stops​

When you need more control over where each color appears, use locations. Values must match the number of colors and stay between 0 and 1:

<LinearGradient
  colors={['rgba(0,0,0,0.8)', 'rgba(0,0,0,0.35)', 'transparent']}
  locations={[0, 0.55, 1]}
  style={styles.overlay}
/>

This helps when an image needs a strong readable area but should stay visible in the rest of the view.

Common Gradient Patterns​

Use gradients intentionally:

PatternGood use
Button gradientPrimary CTA on onboarding, checkout, or auth screens.
Image overlayMakes text readable on photos without darkening the whole image.
Header washSeparates a branded screen header from content below it.
Card accentAdds hierarchy to a featured product, plan, or booking option.
Skeleton shimmerLoading polish, usually with a dedicated shimmer component.

Avoid putting gradients behind dense text, long forms, or admin-style tools. Operational screens need clarity more than decoration.

Keep Gradients in Theme Tokens​

Hardcoding gradients in every component makes a product difficult to rebrand. Put reusable gradients near the app theme:

export const gradients = {
  primary: ['#0EA5E9', '#2563EB'] as const,
  success: ['#059669', '#10B981'] as const,
  imageOverlay: ['rgba(0,0,0,0.72)', 'rgba(0,0,0,0.12)'] as const,
};

Then components can reuse a named gradient:

<LinearGradient colors={gradients.primary} style={styles.cta}>
  <Text style={styles.ctaLabel}>Continue</Text>
</LinearGradient>

This keeps app branding consistent and makes white-label customization much safer.

Design Checks Before Shipping​

Before adding gradients across the app, check:

  • text contrast on every gradient state;
  • disabled and loading states for gradient buttons;
  • dark mode behavior;
  • screenshots on low-end Android screens where banding is more visible;
  • touch feedback if the gradient wraps a pressable;
  • consistency with the app's color tokens;
  • performance when gradients are used in long lists.

For repeated cards, prefer a small number of reusable gradient tokens instead of inventing new colors per screen.

Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

FAQ​

Does React Native include a gradient component?​

Use expo-linear-gradient for a stable cross-platform gradient view in Expo-modules apps. React Native also has experimental background image support for CSS gradient syntax, but a dedicated gradient component is still the safer choice for production UI.

Can I use gradients inside buttons?​

Yes. Wrap the gradient around the button content or place it inside a pressable. Make sure loading, disabled, and pressed states are visually clear.

Are gradients bad for performance?​

A few gradients are fine. Be careful with animated gradients, large image overlays, and gradients inside very long lists.