Linear Gradients in React Native meistern: Schöne UIs in 2026

Du steckst wahrscheinlich in einer von zwei Situationen fest.

Entweder wirkt dein Screen flach und unfertig, und du willst einen Hintergrund oder Button, der sich wie ein echtes Produkt anfühlt statt wie ein Gerüst. Oder du hast schon versucht, einen React-Native-Gradient hinzuzufügen, und hängst jetzt im Setup-Limbo, weil die Hälfte der Beispiele Expo nutzt und die andere Hälfte ein Bare-Native-Projekt voraussetzt.

Genau hier verlieren die meisten Tutorials an Nutzen. Die Komponente API ist simpel. Die Wahl der Umgebung ist es nicht. Ein sauberes Linear-Gradient-Setup in React Native hängt weniger von der colors Prop ab, sondern davon, ob du im Expo-managed Workflow arbeitest oder dich selbst um Native Linking, Pods und Test Mocks kümmern musst.

Inhaltsverzeichnis

• Warum deine React Native App Gradients braucht
  • Was Gradients gut können
• Deinen Weg wählen: Expo vs. Bare React Native Setup
  • Expo Setup
  • Bare React Native Setup
  • Wo Bare-Projekte meist scheitern
• Grundlegende Gradient-Techniken für UI-Elemente
  • Ganzflächige Hintergrund-Gradients
  • Gradient-Buttons mit gewohntem Verhalten
  • Gradient-Text mittels Maskierung
• Gradients durch Animationen zum Leben erwecken
  • Ein Shimmer-Loader, der sich nativ anfühlt
  • Die animierte Komponente
• Performance, Accessibility und Platform-Quirks
  • Performance-Checkliste
  • Accessibility-Checkliste
  • Plattform-Eigenheiten-Checkliste
• Fehlersuche und abschließende Best Practices
  • Gradient wird nicht angezeigt
  • iOS-Build bricht nach Installation ab
  • Tests schlagen wegen Native-Module-Fehlern fehl

Warum deine React Native App Gradients braucht

Viele mobile UIs scheitern aus demselben Grund. Das Layout stimmt, die Abstände passen, die Typografie ist okay, aber der Screen wirkt trotzdem leblos. Einfarbige Flächen lassen alles wie Platzhalter wirken, sofern das restliche visuelle System nicht sehr viel Arbeit leistet.

Ein Linear Gradient in React Native Die Komponente behebt das mit minimalem code. Sie verleiht Tiefe, schafft Trennung zwischen Abschnitten und gibt wichtigen Elementen ein klares visuelles Gewicht. Ein guter Gradient-Hintergrund lässt einen Login-Screen durchdacht wirken. Ein guter Gradient-Button macht die primäre Aktion offensichtlich, ohne auf schwere Schatten oder übertrieben laute Ränder zurückzugreifen.

Von 2019 wurden expo-linear-gradient und react-native-linear-gradient in über 42 % aller React Native Projekte genutzt, was ein deutliches Zeichen dafür ist, dass Gradients keine Nische mehr sind. Sie sind Standard-UI-Tooling in Produktions-Apps und keine nachträgliche Dekoration, wie in diesem React Native Gradient-Bericht.

Was Gradients gut können

• Tiefe erzeugen: Ein Screen mit flachem Hintergrund wirkt oft unfertig. Ein dezenter Verlauf von oben nach unten verleiht der Oberfläche mehr Layering.
• Aufmerksamkeit lenken: Primäre CTAs, Onboarding-Cards und Hero-Header stechen hervor, ohne visuelles Rauschen zu erzeugen.
• Bild-Assets ersetzen: In many cases, a gradient gives you polish without shipping extra background images.

Praktische Regel: Nutze Gradienten dort, wo Hierarchie wichtig ist. Hintergründe, Hero-Cards, CTA-Flächen und Media-Overlays profitieren am meisten. Formularfelder, dichte Listen und Textcontainer meistens nicht.

Auch aus Produktdesign-Sicht ist das relevant. Teams, die plattformübergreifend arbeiten, investieren ohnehin Zeit darin, Interfaces konsistent zu halten. Wenn das Teil deines Stacks ist, passen diese Cross-Platform UI- und UX-Praktiken für mobile Apps gut zu derselben Denkweise: weniger Assets, mehr wiederverwendbare Flächen und visuelle Systeme, die auf allen Screens funktionieren.

Deinen Weg wählen: Expo vs. Bare React Native Setup

Das ist der Punkt, der die meisten Probleme verursacht. Das Rendering von API fühlt sich in beiden Libraries fast identisch an, aber das Setup nicht.

Wenn du eine Expo-managed App nutzt, verwende expo-linear-gradient. Wenn du eine Bare React Native App nutzt, verwende react-native-linear-gradient. Versuche nicht, diese Grenzen zu verwischen, außer du weißt genau, warum du es tust.

Expo Setup

Expo ist der einfachere Weg. Die Installation ist unkompliziert, das Version-Matching wird für dich übernommen und du musst dir keine Gedanken über Native Linking machen.

So installierst du es:

npx expo install expo-linear-gradient

So verwendest du es:

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

export default function App() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1d4ed8']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

Expo ist die richtige Wahl für schnelles Setup, sinnvolle Defaults und weniger native Hürden. Deshalb vergleichen Teams, die fortgeschrittene Expo-Workflows nutzen, oft Capgo und Expo EAS für Live Updates wenn der Managed-Pfad nicht mehr ausreicht.

Bare React Native Setup

Bare React Native bietet direkten Zugriff auf native Module, aber du musst dich selbst um die Details kümmern.

Paket installieren:

npm install react-native-linear-gradient

Für iOS: Pods installieren:

cd ios && pod install

Grundlegende Nutzung:

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

export default function App() {
  return (
    <LinearGradient
      colors={['#111827', '#7c3aed']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

Wo Bare-Projekte meist scheitern

Was in den meisten Tutorials fehlt, ist das Testing und das native Setup. Laut diese Zusammenfassung der Stack Overflow Diskussion, 68 % der Stack Overflow Threads zu diesem Thema zwischen 2024 und 2025 betreffen Fehler bei Native Modules in Bare React Native Setups, und dieselbe Quelle weist auf wiederkehrende Probleme mit Jest Mocking und iOS CocoaPods-Konflikten hin.

Wenn du Jest in einer Bare App nutzt, füge den Mock explizit hinzu:

// jest.setup.js
import mockRNLinearGradient from 'react-native-linear-gradient/jest/linear-gradient-mock';

jest.mock('react-native-linear-gradient', () => mockRNLinearGradient);

Und referenziere diese Setup-Datei in deiner Jest-Config:

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/jest.setup.js'],
};

Bare React Native funktioniert gut mit Gradients. Es verzeiht nur keine unvollständige Konfiguration. Die meisten Fehler sind keine visuellen Bugs, sondern Probleme mit dem Linking, den Pods oder der Testumgebung.

Hier ist die praktische Entscheidungstabelle:

Grundlegende Gradient-Techniken für UI-Elemente

Ein gängiger Ansatz ist, immer wieder dieselbe kleine Auswahl an Gradient-Patterns zu verwenden: Backgrounds, Buttons, Headlines. Wenn diese drei sitzen, kannst du sie auf vielen Screens wiederverwenden.

Ein hilfreiches mentales Modell ist Folgendes:

• colors steuert die Palette
• start und end Richtung steuern
• locations steuert, wo Übergänge stattfinden

Wenn dein Splash- oder Onboarding-Screen einen Gradient verwendet, passt dieser ganz natürlich zu den allgemeinen Startup-Sequenz-Mustern, die in diesem React Native Splash Screen Guide.

Full-Screen-Hintergrund-Gradients

Dies ist das einfachste und am besten wiederverwendbare Pattern.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
// For bare RN, switch to:
// import LinearGradient from 'react-native-linear-gradient';

export default function WelcomeScreen() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1e293b', '#2563eb']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.container}
    >
      <View style={styles.content}>
        <Text style={styles.title}>Welcome back</Text>
        <Text style={styles.subtitle}>Your workspace is ready.</Text>
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 24,
  },
  title: {
    color: '#fff',
    fontSize: 32,
    fontWeight: '800',
    marginBottom: 8,
  },
  subtitle: {
    color: 'rgba(255,255,255,0.8)',
    fontSize: 16,
  },
});

Ein diagonaler Verlauf wirkt meist dynamischer als ein vertikaler Standard. Deshalb start={{ x: 0, y: 0 }} und end={{ x: 1, y: 1 }} sich gut eignen, wenn der Screen primär dekorativ ist.

Wähle Farben nicht isoliert. Teste sie mit echtem Text, Icons und Statusbar-Styles. Eine Palette, die in Figma gut aussieht, kann sofort scheitern, sobald Content darüber liegt.

Gradient-Buttons, die sich wie echte Buttons verhalten

Ein häufiger Fehler ist es, das Touch-Verhalten direkt auf den Gradient zu legen und dabei den Disabled-State, das Press-Feedback oder die Padding-Konsistenz zu vergessen. Halte den Button semantisch und nutze den Gradient nur als visuelle Ebene.

import React from 'react';
import {
  Pressable,
  StyleSheet,
  Text,
  ViewStyle,
  StyleProp,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

type Props = {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
};

export function GradientButton({
  title,
  onPress,
  disabled = false,
  style,
}: Props) {
  return (
    <Pressable onPress={onPress} disabled={disabled} style={style}>
      {({ pressed }) => (
        <LinearGradient
          colors={
            disabled
              ? ['#94a3b8', '#94a3b8']
              : pressed
              ? ['#7c3aed', '#2563eb']
              : ['#8b5cf6', '#3b82f6']
          }
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.button}
        >
          <Text style={styles.label}>{title}</Text>
        </LinearGradient>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: 52,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  label: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
  },
});

Bei Buttons wirkt ein horizontaler Gradient oft besser als ein diagonaler. Er hält das Label stabil und verhindert, dass sich das Control gekippt anfühlt.

Gradient-Text mit Maskierung

Das ist das auffälligste Muster in der Auswahl, und es ist besonders effektiv, wenn man es dezent einsetzt. Hero-Titel, Upgrade-Banner oder Headlines für Empty States sind gute Kandidaten. Fließtext hingegen eher nicht.

Du benötigst @react-native-masked-view/masked-view.

npm install @react-native-masked-view/masked-view

Erstelle dann die Textmaske:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';

export default function GradientHeadline() {
  return (
    <View style={styles.container}>
      <MaskedView
        maskElement={
          <View style={styles.maskWrapper}>
            <Text style={styles.title}>Premium analytics</Text>
          </View>
        }
      >
        <LinearGradient
          colors={['#22c55e', '#06b6d4', '#3b82f6']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          locations={[0, 0.5, 1]}
        >
          <Text style={[styles.title, styles.hiddenText]}>Premium analytics</Text>
        </LinearGradient>
      </MaskedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  maskWrapper: {
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 34,
    fontWeight: '800',
    letterSpacing: -1,
  },
  hiddenText: {
    opacity: 0,
  },
});

locations ist entscheidend, wenn eine Farbe mehr visuellen Raum einnehmen soll als eine andere. Wenn der Übergang matschig wirkt, reduziere zuerst die Anzahl der Farben. Das behebt Designfehler meist schneller, als jeden einzelnen Stop anzupassen.

Gradients mit Animationen zum Leben erwecken

Statische Gradients sorgen für den letzten Schliff. Animierte Gradients geben direktes Feedback.

Der praktischste Anwendungsfall ist kein auffälliger Hintergrund, sondern ein Shimmer-Loader. Dieser Effekt signalisiert den Nutzern, dass die App aktiv ist, Daten geladen werden und das Layout gewollt ist und nicht defekt.

Eine Shimmer-Komponente ergänzt zudem andere Motion-Patterns. Wenn deine App bereits animierte Icons oder Loader nutzt, hilft dieser Lottie in React Native Guide hilft dabei zu entscheiden, wann ein Gradient-Shimmer ausreicht und wann sich ein aufwendigeres Animations-Asset mehr lohnt.

Ein Shimmer-Loader, der sich nativ anfühlt

Die einfachste zuverlässige Variante nutzt react-native-reanimated um einen Gradient-Streifen über einen geclippten Placeholder zu bewegen.

Installiere Reanimated, falls es noch nicht in deiner App ist, und erstelle einen Wrapper mit overflow: 'hidden'. Animiere darin eine Gradient-Ebene von links nach rechts.

import React, { useEffect } from 'react';
import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
  Easing,
} from 'react-native-reanimated';

const AnimatedView = Animated.createAnimatedComponent(View);

type Props = {
  width?: number | string;
  height?: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
};

export function ShimmerPlaceholder({
  width = '100%',
  height = 16,
  borderRadius = 8,
  style,
}: Props) {
  const translateX = useSharedValue(-220);

  useEffect(() => {
    translateX.value = withRepeat(
      withTiming(220, {
        duration: 1200,
        easing: Easing.linear,
      }),
      -1,
      false
    );
  }, [translateX]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <View
      style={[
        styles.container,
        { width, height, borderRadius },
        style,
      ]}
    >
      <AnimatedView style={[styles.shimmer, animatedStyle]}>
        <LinearGradient
          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.35)', 'rgba(255,255,255,0)']}
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.gradient}
        />
      </AnimatedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: '#e5e7eb',
  },
  shimmer: {
    ...StyleSheet.absoluteFillObject,
    width: 220,
  },
  gradient: {
    flex: 1,
  },
});

Der Trick dabei ist, dass du nicht die Gradient-Definition selbst animierst. Du animierst eine Gradient-Ebene über einen statischen Placeholder. Das ist einfacher, leichter nachvollziehbar und meist stabiler auf verschiedenen Geräten.

Hier ist ein visueller Walkthrough des Effekts in der Praxis:

Die animierte Komponente

Ein paar wichtige Hinweise zur Implementierung:

• Nutze Clipping: Das Parent-Element benötigt overflow: 'hidden', sonst läuft der Shimmer über die abgerundeten Ecken hinaus.
• Halte den Bereich schmal: Eine kleinere animierte Ebene lässt sich leichter feinjustieren als die gesamte Fläche.
• Passe die Basisfarbe an den Screen an: Skeleton Loader sollten zum Layout passen und nicht wie ein separates Widget wirken.

Animierte Gradients funktionieren am besten, wenn Nutzer sie kaum bemerken. Wenn der Shimmer das auffälligste Element auf dem Screen wird, ist er zu dominant.

Performance, Accessibility und Plattform-Besonderheiten

Sobald Gradients von Demo-Screens in die Produktion gehen, ändern sich die Anforderungen. Der code wirkt zwar immer noch simpel, aber Rendering-Verhalten, Lesbarkeit und Plattform-Konsistenz werden wichtiger als der erste Effekt.

Wenn du die App-Responsiveness generell verbessern willst, passt dieser Leitfaden zur Performance-Optimierung von Mobile Apps genau zur selben Denkweise: Unnötigen Overhead reduzieren, auf echten Geräten messen und die Oberflächen optimieren, die Nutzer am häufigsten sehen.

Performance-Checkliste

Native Gradients sind meist effizient, aber man kann sie trotzdem falsch einsetzen.

• Nutze lieber Gradients statt großer Deko-Bilder: Sie lassen sich sauberer ausliefern und leichter an verschiedene Bildschirmgrößen anpassen.
• Vermeide zu viele Full-Screen-Layer: Ein Hintergrund-Gradient ist okay. Mehrere überlappende, transparente Gradients plus Blur und schwere Animationen können die Performance drücken.
• Memoize wiederverwendbare Komponenten: Wenn eine Gradient-Card in einer Liste genutzt wird, halte die Props stabil und vermeide unnötige Rerenders durch Parent-State.

Gute Regel: Gradients eher strukturell als exzessiv nutzen. Setze sie für Oberflächen ein, nicht für jede Zeile in einem dichten Feed.

Accessibility-Checkliste

Gradients können die Lesbarkeit schnell beeinträchtigen, da sich der Kontrast über die Fläche verändert.

• Teste den Text gegen den hellsten Bereich: Wenn weißer Text nur auf der dunklen Seite des Verlaufs funktioniert, ist das Design nicht gut.
• Füge bei Bedarf einen Scrim hinzu: Ein dezentes dunkles Overlay zwischen Hintergrund und Text ist oft besser als ein kompletter Farbwechsel.
• Nutze Gradient-Text nur für große Display-Copy: Für Überschriften sieht es gut aus. Für kleine Labels, Hilfetexte oder alles, was für den Abschluss einer Aufgabe entscheidend ist, ist es jedoch ungeeignet.

Prüfe den schlechtesten Punkt des Gradients, nicht den schönsten.

Plattform-Eigenheiten-Checkliste

iOS und Android rendern denselben Gradient meist sehr ähnlich, aber nicht immer perfekt.

Achte auch auf Statusleiste und Safe Area. Ein Gradient, der im Simulator ausgewogen wirkt, kann auf einem Gerät mit Notch kopflastig wirken, wenn Content und Hintergrund diesen zusätzlichen Platz nicht berücksichtigen.

Fehlersuche und abschließende Best Practices

Hier ist die Kurzfassung für deine Projektdokumentation.

• Wähle die passende Library für deinen Workflow: expo-linear-gradient für Expo-managed Apps, react-native-linear-gradient für Bare React Native.
• Gradients gezielt einsetzen: Hintergründe, CTAs, Overlays und Hero-Text sind ideale Anwendungsfälle.
• Richtung gezielt steuern: Horizontal für Buttons, diagonal für dekorative Hintergründe, Maskierung nur bei großem Text.
• Design für Content, nicht für leere States: Mit echtem Text, Icons und Statusbar-Styling testen.
• Setup wie ein Native Setup behandeln: Pods, Linking und Jest Mocks sind keine optionalen Details.

Drei häufige Fehler treten immer wieder auf.

Gradient wird nicht angezeigt

Ursache: Die Komponente hat keine sichtbare Größe.

Lösung: Gib ihr flex: 1eine explizite Höhe oder ein Parent-Element mit Dimensionen. Ein Gradient ohne Layout-Box wird nicht sinnvoll gerendert.

iOS-Build bricht nach Installation ab

Ursache: Die Pods wurden nicht installiert oder der native Dependency-Graph ist nicht synchron.

Lösung: Führe pod install in iosaus, bereinige bei Bedarf den Build-Ordner und baue die App neu. Bei Bare-Projekten reicht das Installieren des Pakets allein meist nicht aus.

Tests schlagen wegen Native-Module-Fehlern fehl

Ursache: Jest versucht, das echte native Modul zu laden.

Lösung: Mocke es react-native-linear-gradient mit react-native-linear-gradient/jest/linear-gradient-mock in deiner Jest-Setup-Datei.

Wenn du dir nur eine Sache aus diesem Guide merken willst, dann diese: Der Gradient selbst ist einfach. Das produktionsreife Setup ist der eigentliche Aufwand. Sobald du die richtige Library für deine App-Architektur gewählt hast, wird alles Weitere deutlich vorhersehbarer.

Wenn dein Team Hybrid-Mobile-Apps veröffentlicht und JavaScript-, CSS-, Copy-, Config- und Asset-Updates pushen möchte, ohne auf den Store-Review zu warten, Capgo ist einen Blick wert. Es bietet CapacitorJS- und Electron-Teams kontrollierte Live Updates, Rollout-Channels, Rollback-Schutz und Release-Transparenz, ohne den Deployment-Prozess in eine Black Box zu verwandeln.