Master Linear Gradient React Native: Beaux UIs en 2026

Vous avez probablement rencontré l’une ou l’autre situation.

Soit votre écran ressemble à un plateau et n’a pas l’air fini, et vous voulez un arrière-plan ou un bouton qui ressemble à un produit réel plutôt qu’à un squelette. Ou vous avez déjà essayé d’ajouter un gradient React Native et maintenant vous êtes coincé dans un limbo de configuration car la moitié des exemples utilisent Expo et l’autre moitié suppose un projet natif nu.

Cette scission est là où la plupart des tutoriels cessent d’être utiles. Le composant API est simple. Le choix de l’environnement n’en est pas. colors prop et bien plus sur la question de savoir si vous êtes dans le flux de workflow Expo géré ou si vous vous occupez de la liaison native, des pods et des mocks de test vous-même.

Table des matières

• Pourquoi votre application React Native a besoin de dégradés
  • Ce que les dégradés font bien
• Choisir votre chemin : Expo vs Réact Native non nu
  • Configuration d'Expo
  • Configuration de Réact Native non nu
  • Où les projets non nu se cassent généralement
• Techniques de base de dégradés pour les éléments d'interface utilisateur
  • Dégradés d'arrière-plan plein écran
  • Boutons de dégradés qui fonctionnent toujours comme des boutons
  • Texte de dégradé avec une masque
• Donner de la vie aux dégradés avec des animations
  • Un chargeur qui scintille et ressemble à un élément natif
  • Le composant animé
• Performances, accessibilité et particularités de plateforme
  • Liste de vérification des performances
  • Liste de vérification de l'accessibilité
  • Liste de vérification des particularités de plateforme
• Dépannage et meilleures pratiques finales
  • Le dégradé ne s'affiche pas
  • La construction iOS se brise après l'installation
  • Les tests échouent avec des erreurs de module natif

Pourquoi votre application React Native a besoin de dégradés

Beaucoup d'interfaces utilisateur mobiles échouent pour la même raison. La disposition est correcte, l'écartement est correct, la typographie est acceptable, mais l'écran ressent toujours comme mort. Les remplissages solides font que tout ressemble à des placeholders à moins que le reste du système visuel ne fasse beaucoup de travail.

A un gradient linéaire React Native un composant corrige cela avec très peu de code. Il ajoute de la profondeur, crée une séparation entre les sections et donne aux éléments de priorité élevée un poids visuel clair. Un bon fond de gradient peut rendre une page de connexion ressentie comme intentionnelle. Un bon bouton de gradient peut rendre l'action primaire évidente sans recourir à des ombres lourdes ou des bordures trop bruyantes.

Par 2019, expo-linear-gradient et react-native-linear-gradient sont apparus dans plus de 42% des projets React Native, ce qui est un signal fort que les gradients ne sont plus un effet niche. Ils sont des outils de conception UI standard dans les applications de production, pas des décorations ajoutées en fin de compte, comme noté dans ce document sur l'adoption des gradients React Native.

Ce que les gradients font bien

• Créer de la profondeur : Une écran avec un fond plat souvent ressemble à un projet inachevé. Un mélange subtil du haut au bas fait que la surface ressent comme étant couchée.
• Guider l'attention : Les boutons d'action primaires, les cartes de démarrage et les en-têtes d'hero se démarquent sans ajouter de bruit visuel.
• Remplacez les actifs d'image : Dans de nombreux cas, un gradient vous donne un aspect soigné sans envoyer d'images de fond supplémentaires.

Règle pratique : Utilisez les gradients là où la hiérarchie compte. Les arrières-plans, les cartes d'hero, les surfaces de boutons d'action et les surimpressions de médias bénéficient le plus. Les champs de formulaire, les listes denses et les conteneurs de texte de corps ne le font généralement pas.

Il existe également un angle de conception de produit ici. Les équipes travaillant sur plusieurs plateformes dépensent déjà du temps pour essayer de maintenir les interfaces cohérentes. Si cela fait partie de votre stack, ces pratiques de conception UI et UX pour les applications mobiles s'alignent bien sur le même raisonnement : moins d'actifs, plus de surfaces réutilisables et des systèmes visuels qui tiennent la route sur plusieurs écrans.

Choisir votre chemin Expo vs Bare React Native Setup

C'est la fourche qui cause le plus de douleur. Le rendu API ressemble presque à l'identique dans les deux bibliothèques, mais la configuration n'est pas.

Si vous êtes dans une application Expo gérée, utilisez expo-linear-gradient. Si vous êtes dans une application React Native nue, utilisez react-native-linear-gradient. N'essayez pas de brouiller ces lignes à moins de savoir exactement pourquoi vous le faites.

Configuration Expo

Expo est le chemin le plus lisse. L'installation est simple, la correspondance de version est gérée pour vous, et vous n'avez pas à vous soucier de la liaison native.

Installez-le comme ceci :

npx expo install expo-linear-gradient

Utilisez-le comme ceci :

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 est la bonne option lorsque vous voulez une installation rapide, des paramètres sensés et moins d'arêtes natives. C'est aussi pourquoi les équipes explorant des workflows Expo avancés finissent souvent par utiliser un client de développement Expo personnalisé pour des capacités natives personnalisées seulement lorsque le chemin géré ne couvre plus les besoins de l'application.

Configuration React Native bare

React Native bare vous donne un accès direct aux modules natifs, mais vous assumez les arêtes rugueuses.

Installez le package :

npm install react-native-linear-gradient

Pour iOS, installez les pods :

cd ios && pod install

Utilisation de base :

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

Là où les projets sans protection se cassent généralement

La pièce manquante dans la plupart des tutoriels est la mise en œuvre de tests et la configuration native. Selon ce résumé de discussion Stack Overflow, 68% des fils de discussion Stack Overflow sur ce sujet en 2024 à 2025 impliquent des erreurs de modules natifs dans les configurations React Native sans protection, et la même source note des problèmes récurrents avec la simulation de Jest et les conflits de CocoaPods sur iOS

Si vous utilisez Jest dans une application nue, ajoutez explicitement la simulation :

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

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

Et référez-vous à ce fichier de configuration dans votre fichier de configuration Jest :

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

React Native sans protection fonctionne bien pour les dégradés. Il ne pardonne toutefois pas les configurations incomplètes. La plupart des erreurs ne sont pas des bugs visuels. Il s'agit de problèmes de liaison, de pods ou d'environnement de test

Décision pratique :

Techniques de gradient de base pour les éléments d'interface

Une approche courante consiste à utiliser le même petit ensemble de modèles de gradient à répéter. Fond. Boutons. Titres. Si ces trois sont solides, vous pouvez les réutiliser sur beaucoup d'écrans.

A un bon modèle mental est ceci :

• colors contrôle la palette
• start et end contrôle la direction
• locations contrôle où se produisent les transitions

Si votre écran d'accueil ou d'entrée utilise une gradation, elle s'intègre naturellement aux modèles de séquence de démarrage plus larges décrits dans ce guide de l'écran d'accueil React Native.

Gradients d'arrière-plan plein écran

C'est le modèle le plus simple et le plus réutilisable.

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

Un mélange diagonal ressent généralement plus dynamique qu'un vertical par défaut. C'est pourquoi start={{ x: 0, y: 0 }} et end={{ x: 1, y: 1 }} sont un bon choix par défaut lorsque l'écran est principalement décoratif.

Ne choisissez pas les couleurs en isolation. Testez-les derrière du texte réel, des icônes et des styles de barre de statut. Une palette qui ressemble bien dans Figma peut échouer instantanément une fois que le contenu s'assied dessus.

Les boutons à gradient qui comportent toujours comme des boutons

La faute commune ici est de mettre le comportement tactile directement sur le gradient et d'oublier l'état désactivé, le feedback de pression ou la cohérence de la marge. Gardez le bouton semantique et laissez le gradient être la couche visuelle.

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

Pour les boutons, un gradient horizontal lit mieux qu'un gradient diagonal. Il maintient l'étiquette stable et évite de faire ressentir le contrôle comme penché.

Le texte à gradient avec une masque

C'est le modèle le plus flash dans l'ensemble, et il est utile quand vous le restrez. Les titres de héros, les bannières d'amélioration et les titres d'état vide sont de bons candidats. Le texte de paragraphe n'est pas.

Vous aurez besoin de @react-native-masked-view/masked-view.

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

Construisez ensuite le masque de texte :

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 ce qui compte le plus quand vous voulez que l'une des couleurs occupe plus d'espace visuel que l'autre. Si la combinaison ressemble à de la boue, réduisez d'abord le nombre de couleurs. Cela fixe généralement le design plus rapidement que de réglage chaque arrêt.

Apporter les gradients à la vie avec les animations

Les gradients statiques vous donnent de la rondeur. Les gradients animés vous donnent du feedback.

L'utilisation la plus pratique n'est pas un arrière-plan flash. C'est un chargeur qui scintille. Cet effet informe les utilisateurs que l'application est active, que les données arrivent et que le layout qu'ils voient est intentionnel plutôt que cassé.

Un composant de lueur complète également d'autres modèles de mouvement. Si votre application utilise déjà des icônes animées ou des chargeurs, cela Guide de Lottie dans React Native est utile pour décider quand une lueur de gradient est suffisante et quand un atelier d'animation plus riche fait plus de sens.

Un chargeur de lueur qui ressemble à un élément natif

La version la plus simple et fiable utilise react-native-reanimated pour déplacer une bande de gradient à travers un élément de remplissage coupé.

Installez Reanimated si ce n'est pas déjà fait dans votre application, puis créez un wrapper avec overflow: 'hidden'. À l'intérieur, animez une couche de gradient de gauche à droite.

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

Ce qui fait fonctionner c'est que vous n'essayez pas d'animer la définition de gradient elle-même. Vous animez une couche de gradient à travers un élément de remplissage statique. C'est plus simple, plus facile à raisonner et généralement plus stable sur les appareils.

Voici une présentation visuelle de l'effet en pratique :

Le composant animé

Certains notes d'implémentation sont importantes :

• Utilisez la découpe : Le parent a besoin overflow: 'hidden'ou la lueur va s'écouler à l'extérieur des coins arrondis.
• Gardez la bande étroite : Un layer animé plus petit est plus facile à ajuster que l'animation de la surface entière.
• Correspond au couleur de base à l'écran : Les chargeurs squelettes doivent s'adapter au layout environnant, et pas ressembler à un widget séparé.

Les gradients animés fonctionnent le mieux lorsque les utilisateurs les remarquent à peine. Si la lueur devient la chose la plus forte sur l'écran, elle fait trop.

Performance, Accessibilité et Quirks de Plateforme

Une fois les gradients passés des écrans de démonstration dans la production, les préoccupations changent. Le code ressemble toujours simple, mais le comportement de rendu, la lisibilité et la cohérence de la plateforme commencent à compter plus que l'effet initial.

Si vous resserriez la réactivité de l'application plus largement, cela guide d'optimisation de la performance des applications mobiles il partage le même état d'esprit : réduire les tâches inutiles, mesurer sur des appareils réels et optimiser les surfaces que les utilisateurs voient le plus.

liste de vérification de la performance

les gradients natifs sont généralement efficaces, mais vous pouvez toujours les abuser.

• Préférez les gradients aux grandes images décoratives : Ils sont souvent plus propres à envoyer et plus faciles à adapter à plusieurs tailles d'écran.
• Évitez de superposer de nombreux couches d'écran pleines : Un gradient de fond est acceptable. Plusieurs gradients de fond superposés translucides plus flou plus animation lourde peuvent être coûteux.
• Mémorisez les composants réutilisables : Si une carte de gradient est utilisée dans une liste, maintenez les props stables et évitez de la re-renderiser en raison d'un état parent non lié.

Une bonne règle est de garder les gradients structuraux, pas excessifs. Utilisez-les pour définir les surfaces, pas chaque ligne dans un flux dense.

liste de vérification d'accessibilité

Les dégradés peuvent nuire à la lisibilité rapidement car le contraste change sur la surface.

• Testez le texte contre la zone la plus claire : Si le texte blanc ne fonctionne que du côté sombre de la combinaison, cela ne fonctionne pas.
• Ajoutez un écran lorsque cela est nécessaire : Un léger masque sombre entre le fond et le texte est souvent mieux que de changer tout le palette.
• Réservez les textes de dégradé pour les copies d'affichage importantes : Cela ressemble bien aux titres. C'est une mauvaise choix pour les petits labels, les textes d'aide ou tout ce qui est critique pour terminer une tâche.

Vérifiez le point le plus mauvais de la courbe de dégradé, pas le plus joli.

Liste de vérification des particularités des plateformes

iOS et Android rendent généralement le même dégradé de manière très proche, mais pas toujours parfaitement.

Regardez également votre barre de statut et le traitement de la zone de sécurité. Un gradient qui semble équilibré dans le simulateur peut paraître trop lourd sur un appareil avec un trou si le contenu et le fond ne tiennent pas compte de cet espace supplémentaire.

Résolution des problèmes et meilleures pratiques finale

Voici la version courte que je garderais dans une note de projet.

• Correspondez la bibliothèque au flux de travail : expo-linear-gradient pour les applications Expo gérées, react-native-linear-gradient pour React Native sans enveloppe.
• Consacrez les dégradés à leur but : Les arrières-plans, les appels à l'action, les surimpressions et les textes d'héro sont des cas d'utilisation solides.
• Contrôlez la direction intentionnellement : Horizontal pour les boutons, diagonal pour les arrières-plans décoratifs, masqué uniquement pour les grands textes.
• Concevez pour le contenu, pas les états vides : Testez avec du texte réel, des icônes et un traitement de la barre d'état.
• Traitez les configurations nues comme des configurations natives : Les Pods, la liaison et les mocks Jest ne sont pas des détails optionnels.

Trois erreurs courantes se présentent à nouveau.

Le dégradé ne s'affiche pas

Cause: le composant n'a pas de taille visible.

Fix: donne-lui flex: 1, une hauteur explicite, ou un parent avec des dimensions. Un gradient sans boîte de mise en page ne s'affichera pas de manière significative.

La construction iOS se brise après l'installation

Cause: les pods n'ont pas été installés ou le graphique de dépendance native est hors synchronisation.

Fix: exécute pod install in ios, nettoie le dossier de construction si nécessaire, puis reconstruit l'application. Dans les projets bare, l'installation de package seule n'est généralement pas suffisante.

Les tests échouent avec des erreurs de module natif

Cause: Jest essaie de charger le module natif réel.

Fix: simulate react-native-linear-gradient with react-native-linear-gradient/jest/linear-gradient-mock dans votre fichier de configuration de Jest.

Si vous gardez une seule idée de ce guide, gardez celle-ci : la gradient lui-même est facile. La mise en place prête à la production est l'effort principal. Une fois que vous avez choisi la bonne bibliothèque pour l'architecture de votre application, tout ce qui suit devient beaucoup plus prévisible.

Si votre équipe développe des applications mobiles hybrides et souhaite envoyer des mises à jour de JavaScript, CSS, copie, configuration et actifs sans attendre la revue de l'App Store, Capgo vaut la peine d'y jeter un coup d'œil. Il offre aux équipes de CapacitorJS et Electron des mises à jour en direct contrôlées, des canaux de déploiement, une protection de rollback et une visibilité sur les versions sans transformer votre processus de déploiement en boîte noire.