Master Linear Gradient React Native: Schöne UIs 2026

Sie haben wahrscheinlich eine von zwei Situationen erreicht.

Entweder Ihre Anzeige sieht flach und unvollendet aus, und Sie möchten einen Hintergrund oder eine Schaltfläche, die sich wie ein echtes Produkt anfühlt, anstatt wie ein Rahmen.

That split is where most tutorials stop being useful. The component API is simple. The environment choice isn’t. A clean linear gradient React Native setup depends less on the colors Prop und mehr hängt davon ab, ob Sie sich im Expo-gesteuerten Workflow befinden oder mit der Verlinkung von Pods und Test-Mocks selbst umgehen.

Inhaltsverzeichnis

• Werden Gradients in Ihrer React Native App benötigt?
  • Wozu Gradients gut sind
• Wählen Sie Ihren Weg: Expo vs Bare React Native Setup
  • Expo-Einrichtung
  • Bare React Native-Einrichtung
  • Wo sich Bare-Projekte normalerweise scheitern
• Grundlegende Gradient-Techniken für UI-Elemente
  • Hintergrundgradients für den gesamten Bildschirm
  • Gradient-Buttons, die wie normale Buttons funktionieren
  • Gradient-Text mit einem Masking-Effekt
• Gradients zum Leben bringen mit Animationen
  • Eine nativ anfühlsende Loader-Animation
  • Die animierte Komponente
• Leistung, Barrierefreiheit und Plattform-Spezifika
  • Leistungscheckliste
  • Barrierefreiheitscheckliste
  • Plattform-Spezifika-Checkliste
• Troubleshooting und letzte Best Practices
  • Gradient erscheint nicht
  • iOS-Build bricht nach der Installation zusammen
  • Tests fehlschlagen mit Fehlermeldungen für native Module

Warum deine React Native App Gradients benötigt

Aufgrund desselben Grundes scheitern viele mobile Benutzeroberflächen. Die Layout ist in Ordnung, der Abstand ist in Ordnung, die Schriftart ist akzeptabel, aber das Bildschirmgefühl ist immer noch tot. Feste Füllungen machen alles aussehen wie Platzhalter, es sei denn, das restliche visuelle System tut viel Arbeit.

A linear gradient React Native component fixes that with very little code. It adds depth, creates separation between sections, and gives high-priority elements a clear visual weight. A good gradient background can make a login screen feel intentional. A good gradient button can make the primary action obvious without resorting to heavy shadows or overly loud borders.

Es fügt mit sehr wenig __CAPGO_KEEP_0__ Tiefe hinzu, schafft eine Trennung zwischen Abschnitten und gibt hohen Prioritäts-ELEMENTEN eine klare visuelle Gewichtung. Ein guter Gradient-Hintergrund kann einen Anmeldebildschirm absichtsvoll machen. Ein guter Gradient-Button kann die primäre Aktion ohne Rückgriff auf schwere Schatten oder übermäßig laute Bordern offensichtlich machen. Von2019 erschienen expo-linear-gradient und react-native-linear-gradient in über 42% der React Native-Projekte , was ein starkes Signal ist, dass Gradienten nicht mehr ein Nischeneffekt sind. Sie sind Standard-UI-Tooling in Produktionsanwendungen, nicht eine Dekoration, die am Ende angebaut wird, wie in .

this React Native gradient adoption write-up

• Was Gradienten gut machen Erstellt Tiefe:
• Ein Bildschirm mit einem flachen Hintergrund sieht oft unvollendet aus. Ein subtiler top-to-bottom-Blend macht die Oberfläche fühlen, als ob sie geschichtet ist. Primäre CTAs, Onboarding-Karten und Hero-Überschriften fügen sich ohne visuelles Rauschen ab.
• Ersetzen Sie Bild-Assets: Viele Fälle bieten Ihnen mit einem Gradienten eine polierte Oberfläche, ohne zusätzliche Hintergrundbilder zu liefern.

Praktische Regel: Werden Gradients dort eingesetzt, wo die Hierarchie zählt. Hintergründe, Hero-Karten, CTA-Oberflächen und Medien-Überlagerungen profitieren am meisten. Formfelder, dichte Listen und Körperkopie-Container tun das normalerweise nicht.

Es gibt auch einen Produktionsdesign-Aspekt hier. Teams, die über Plattformen arbeiten, verbringen bereits Zeit damit, die Benutzeroberfläche konsistent zu halten. Wenn das Teil Ihres Stacks ist, passen sich diese Überschriften für mobile Apps Anwendungskonzepte für mobile Apps

Zeilen sich gut mit dem gleichen Denken ab: Weniger Assets, mehr wiederverwendbare Oberflächen und visuelle Systeme, die sich über Bildschirme halten.

This is the fork that causes most of the pain. The rendering API feels almost identical in both libraries, but setup isn’t.

Dies ist der Fork, der am meisten Schmerzen verursacht. Die Darstellung __CAPGO_KEEP_0__ fühlt sich fast identisch in beiden Bibliotheken an, aber die Einrichtung ist es nicht. expo-linear-gradientWenn Sie in einer Expo-gesteuerten App sind, verwenden Sie . Wenn Sie in einer Bare React Native-App sind, verwenden Sie react-native-linear-gradient. Versuchen Sie nicht, diese Linien zu verwischen, es sei denn, Sie wissen genau, warum Sie es tun.

Expo-Einrichtung

Expo ist der glattere Weg. Die Installation ist unkompliziert, die Versionsabstimmung wird für Sie gehandhabt und Sie müssen sich nicht um native Verknüpfungen kümmern.

Installieren Sie es wie folgt:

npx expo install expo-linear-gradient

Verwenden Sie es wie folgt:

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, wenn Sie eine schnelle Einrichtung, vernünftige Standards und weniger native Kanten wollen. Das ist auch der Grund, warum Teams, die sich mit fortgeschrittenen Expo-Workflows beschäftigen, oft dazu übergehen, einen Expo-Entwicklungsclient für benutzerdefinierte native Fähigkeiten nur dann, wenn der verwaltete Weg die Bedürfnisse der App nicht mehr abdeckt.

Bare React Native-Einrichtung

Bare React Native bietet Ihnen direkten Zugriff auf native Module, aber Sie müssen sich mit den rauhen Kanten auseinandersetzen.

Installieren Sie das Paket:

npm install react-native-linear-gradient

Für iOS installieren Sie Pods:

cd ios && pod install

Grundlegende Verwendung:

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 Projekte ohne Bare normalerweise scheitern

Das fehlende Stück in den meisten Tutorials ist die Testung und die native Einrichtung. Nach dieser Zusammenfassung einer Diskussion auf Stack Overflow 68% der Stack Overflow-Threads zu diesem Thema im Jahr 2024 bis 2025 beziehen sich auf Fehler bei native Modulen in barem React Native-Setup, , und die gleiche Quelle weist auf wiederkehrende Probleme bei Jest-Mockern und iOS-CocoaPods-Konflikten hin.Wenn Sie Jest in einem barem App verwenden, fügen Sie den Mock explizit hinzu:

Und verweisen Sie auf die Einrichtungsdatei in Ihrer Jest-Konfiguration:

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

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

Bare React Native funktioniert gut für Gradienten. Es verzieht sich einfach nicht bei unvollständiger Einrichtung. Die meisten Fehler sind keine visuellen Bugs. Sie sind Verknüpfungs-, Pods- oder Umgebungsprobleme.

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

Hier ist die praktische Entscheidungstabelle:

Projekttyp

Grundlegende Gradiententechniken für UI-Elemente

Ein häufiger Ansatz besteht darin, denselben kleinen Satz von Gradientmustern wieder und wieder zu verwenden. Hintergründe. Schaltflächen. Überschriften. Wenn diese drei fest sind, können Sie sie über viele Bildschirme hinweg wiederholen.

Außerdem ist diese mentale Vorstellung hilfreich:

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

Wenn Ihre Splash- oder Einblendungsseite ein Farbverlauf verwendet, passt sie natürlich mit den breiteren Startsequenzenmuster, die in diesem Leitfaden für die React Native-Splash-Seite beschrieben werden.

Hintergrundfarbverläufe auf Vollbildgröße

Dies ist der einfachste und am meisten wiederverwendbare Muster.

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 Blend fühlt sich dynamischer an als ein Standardvertikal. Das ist der Grund, warum start={{ x: 0, y: 0 }} und end={{ x: 1, y: 1 }} sind ein gutes Standard, wenn das Bildschirm ist hauptsächlich dekorativ.

Farbe wählen Sie nicht isoliert. Testen Sie sie hinter echten Texten, Icons und Statusleisten. Ein Farbpalette, die in Figma gut aussieht, kann sofort scheitern, wenn Inhalte darauf sitzen.

Gradienten-Buttons, die sich wie Buttons verhalten

Der häufige Fehler hier ist, die Berührungseigenschaft direkt auf die Gradienten und das Vergessen der deaktivierten Zustände, des Druckfeedbacks oder der Konsistenz der Abstände. Halten Sie die Schaltfläche semantisch und lassen Sie die Gradienten als visuelle Ebene sein.

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',
  },
});

Für Schaltflächen liest ein horizontaler Gradient besser als ein diagonaler. Er hält die Beschriftung stabil und vermeidet es, dass die Steuerung sich schief anfühlt.

Gradient-Text mit Maskierung

Dies ist das auffälligste Muster in der Reihe, und es ist nützlich, wenn Sie es zurückhalten. Heldenüberschriften, Upgradebanner und leere Zustandsüberschriften sind gute Kandidaten. Absatztext ist nicht.

Sie benötigen @react-native-masked-view/masked-view.

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

Dann bauen Sie den Textmasken:

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 Die Farbgebung ist am wichtigsten, wenn Sie eine Farbe mehr visuellen Raum als eine andere einnehmen lassen möchten. Wenn das Mischen sich schmutzig anfühlt, reduzieren Sie zunächst die Anzahl der Farben. Das behebt den Entwurf oft schneller als das Anpassen jedes Stopp.

Gradienten zum Leben bringen mit Animationen

Statische Gradienten geben Ihnen Glanz. Animierte Gradienten geben Ihnen Feedback.

Der praktischste Einsatz ist kein auffälliger Hintergrund. Es ist ein Schimmerlader. Dieser Effekt sagt den Benutzern, dass die App aktiv ist, Daten kommen und die Layout, die sie sehen, ist absichtlich und nicht gebrochen.

Ebenso ergänzt ein Shimmer-Komponente andere Bewegungsmuster. Wenn Ihre App bereits animierte Icons oder Loader verwendet, ist dies Ein Lottie in React Native-Leitfaden nützlich, um zu entscheiden, wann ein Gradienten-Shimmer ausreicht und wann ein reichhaltigerer Animationselement mehr Sinn macht.

Ein Shimmer-Loader, der sich anfühlt wie ein Native-Element

Die einfachste zuverlässige Version verwendet react-native-reanimated um eine Gradienten-Bande über einen geklittenen Platzhalter zu bewegen.

Installieren Sie Reanimated, wenn es nicht bereits in Ihrer App ist, und erstellen Sie dann einen Wrapper mit overflow: 'hidden'. Innerhalb davon animieren Sie eine Gradienten-Schicht 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,
  },
});

Was funktioniert, ist, dass Sie nicht versuchen, die Gradienten-Definition selbst zu animieren. Sie animieren eine Gradienten-Schicht über einen statischen Platzhalter. Das ist einfacher, leichter zu verstehen und meist stabiler auf verschiedenen Geräten.

Hier ist ein visueller Durchgang durch die Wirkung in der Praxis:

Der animierte Komponente

Aus wenigen Implementierungsnotizen resultiert:

• Verwenden Sie das Ausschneiden: Der Elternteil benötigt overflow: 'hidden', oder das Schimmern wird außerhalb gerundeter Ecken auslaufen.
• Halten Sie die Bande eng: Ein kleiner animierter Layer ist einfacher zu justieren als die gesamte Oberfläche zu animieren.
• Passen Sie die Grundfarbe an die Bildschirmfarbe an: Skelettloader sollten sich an das umgebende Layout anpassen und nicht wie ein separates Widget aussehen.

Animierte Gradienten funktionieren am besten, wenn die Benutzer sie kaum wahrnehmen. Wenn das Schimmern das Lauteste auf dem Bildschirm wird, tut es zu viel.

Leistung, Barrierefreiheit und Plattform-Spezifika

Einmal sind Gradienten von Demo-Screens in die Produktion übergegangen, ändern sich die Bedenken. Das code sieht immer noch einfach aus, aber das Rendern, die Lesbarkeit und die Plattform-Konsistenz werden wichtiger als der erste Effekt.

Wenn Sie die App-Responsivität allgemein weiter verbessern, gilt dies auch Leitfaden für die Optimierung der Leistung von mobilen Apps passt sich dem gleichen Denkansatz an: Verringern Sie unnötige Arbeit, messen Sie auf echten Geräten und optimieren Sie die Oberflächen, die die Benutzer am meisten sehen.

Leistungskontrolle

Native-Gradienten sind allgemein effizient, aber Sie können sie immer noch missbrauchen.

• Präferieren Sie Gradienten gegenüber großen dekorativen Bildern: Sie sind oft sauberer zu versenden und einfacher an verschiedene Bildschirmgrößen anzupassen.
• Vermeiden Sie das Stapeln mehrerer vollbildschirmiger Layer: Eine Hintergrund-Gradient ist in Ordnung. Mehrere überlappende durchsichtige Gradienten plus Blur plus schwere Animation können teuer werden.
• Memoisieren Sie wiederholbarer Komponenten: Wenn ein Gradienten-Card in einer Liste verwendet wird, halten Sie die Eigenschaften stabil und vermeiden Sie eine erneute Darstellung, wenn der Elternzustand unabhängig ist.

Eine gute Regel ist, Gradienten struktural zu halten, nicht übermäßig. Verwenden Sie sie, um Oberflächen zu definieren, nicht jede Zeile in einer dichten Liste.

Barrierefreiheitskontrolle

Farben können die Lesbarkeit schnell beeinträchtigen, da der Contrast über der Oberfläche variiert.

• Testen Sie Text gegenüber der hellsten Fläche: Wenn weißer Text nur auf der dunklen Seite der Mischung funktioniert, funktioniert er nicht.
• Fügen Sie einen Schleier hinzu, wenn nötig: Ein subtiler dunkler Überzug zwischen Hintergrund und Text ist oft besser als das Ändern des gesamten Farbschemas.
• Buchen Sie Gradienten-Text für große Anzeigekopien: Es sieht gut auf Überschriften aus. Es ist eine schlechte Wahl für kleine Bezeichnungen, Hilfetext oder alles Kritische, um eine Aufgabe abzuschließen.

Überprüfen Sie den schlimmsten Fall auf der Gradientenfläche, nicht den schönsten.

Plattform-Sonderheiten-Checkliste

iOS und Android renderen die gleiche Gradientenfläche normalerweise sehr ähnlich, aber nicht immer perfekt.

Beachten Sie auch Ihre Statusleiste und Behandlung des sicheren Bereichs. Ein in einem Simulator ausgewogener Gradient kann auf einem Gerät mit einem Loch wie ein Top-Modell wirken, wenn sich der Inhalt und Hintergrund nicht auf diesen zusätzlichen Platz einlassen.

Troubleshooting und Endgültige Best Practices

Hier ist die kurze Version, die ich in einem Projekt-Notiz behalten würde.

• Passen Sie die Bibliothek an den Workflow an: expo-linear-gradient für Expo-gesteuerte Apps react-native-linear-gradient für bare React Native.
• Halten Sie Gradienten zweckmäßig: Hintergründe, CTAs, Überlagerungen und Hero-Text sind starke Einsatzfälle.
• Steuern Sie die Richtung absichtlich: Horizontal für Schaltflächen, diagonal für dekorative Hintergründe, nur maskiert für große Texte.
• Entwerfen Sie für Inhalte, nicht für leere Zustände: Testen Sie mit echter Kopie, Icons und Statusleistenbehandlung.
• Behandeln Sie die bare Einrichtung als native Einrichtung: Pods, Linking und Jest-Mocks sind keine optionalen Details.

Drei häufige Fehler kommen wiederholt vor.

Gradient erscheint nicht

Ursache: Das Komponenten hat keine sichtbare Größe.

Lösung: Geben Sie ihm flex: 1, eine explizite Höhe oder einen Elternelement mit Dimensionen. Ein Gradient mit keinem Layout-Box wird auf keinen bedeutenden Weg rendern.

iOS-Build fehlt nach der Installation

Ursache: Pods wurden nicht installiert oder die native Abhängigkeitsgraph ist aus der Synchronisation.

Lösung: Führen Sie pod install in ios, reinigen Sie den Build-Ordner wenn nötig, dann bauen Sie die App neu. In Projekten ohne native Abhängigkeiten genügt die Paketinstallation alleine normalerweise nicht.

Tests fehlen mit Fehlermeldungen von native Modulen

Ursache: Jest versucht, den tatsächlichen native Modul zu laden.

Lösung: Mocken Sie react-native-linear-gradient mit react-native-linear-gradient/jest/linear-gradient-mock in Ihrem Jest-Einrichtungsdatei.

Wenn Sie nur eine Idee aus dieser Anleitung behalten, behalten Sie diese: Der Gradient selbst ist einfach. Die Produktionsreife-Einrichtung ist der Hauptaufwand. Sobald Sie das richtige Bibliothek für Ihre App-Architektur ausgewählt haben, wird alles danach viel vorhersehbarer.

Wenn Ihr Team Hybrid-Apps für Mobilgeräte schickt und JavaScript, CSS, Kopien, Konfigurationen und Asset-Updates ohne Wartezeit auf die Store-Überprüfung pushen möchte Capgo ist es wert, einen Blick zu werfen. Es bietet den CapacitorJS- und Electron-Team kontrollierte Live-Updates, Rollout-Kanäle, Rollover-Schutz und Release-Transparenz ohne Ihre Bereitstellungsprozess in einen schwarzen Kasten zu verwandeln.