Maîtrisez les dégradés linéaires React Native : des UI magnifiques en 2026

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

Ou bien votre écran ressemble à un plateau 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 dégradé React Native et maintenant vous êtes coincé dans le labyrinthe de la configuration car la moitié des exemples utilisent Expo et l’autre moitié suppose un projet natif pur.

Ce partage est là où la plupart des tutoriels s’arrêtent d’être utiles. Le composant API est simple. Le choix de l’environnement n’en est pas. colors prop et plus sur la question de savoir si vous êtes dans le flux de travail géré par Expo ou si vous vous occupez vous-même de la liaison native, des pods et des simulations de test.

Table des matières

• Pourquoi votre application React Native a besoin de gradients
  • Ce que les gradients font bien
• Choisir votre chemin : Expo vs Réact Native sans enveloppe
  • Configuration Expo
  • Configuration Réact Native sans enveloppe
  • Là où les projets sans enveloppe se cassent généralement
• Techniques de base pour les éléments d'interface utilisateur
  • Gradients d'écran plein écran
  • Boutons de gradient qui se comportent toujours comme des boutons
  • Texte de gradient avec une masque
• Donner de la vie aux dégradés avec des animations
  • Un chargeur qui scintille, qui ressemble à du 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
• Résolution des problèmes et meilleures pratiques finales
  • Le dégradé ne s'affiche pas
  • La compilation 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

A de nombreuses interfaces utilisateur mobiles échouent pour la même raison. La disposition est correcte, l'espace 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 composant React Native de gradient linéaire fixe 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 un écran de connexion ressentir comme intentionnel. 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 constitue 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, et non des décorations ajoutées à la fin, comme le note l' article sur l'adoption des gradients React Native.

Ce que les gradients font bien

• Créer de la profondeur : Un écran avec un fond plat souvent ressemble à un travail inachevé. Un mélange subtil du haut vers le bas fait que la surface ressent comme étant couchée.
• Guidé l'attention : Les boutons principaux, les cartes d'inscription et les en-têtes d'hero se démarquent sans ajouter de bruit visuel.
• Remplacez les actifs d'image : En beaucoup de 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ère-plans, les cartes d'hero, les surfaces de boutons 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 passent déjà du temps à essayer de maintenir les interfaces cohérentes. Si cela fait partie de votre pile, ces pratiques de conception UI et UX transversales pour les applications mobiles se alignent bien avec 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 Réact Native Bare 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-gradientSi vous êtes dans une application Réact Native nue, utilisez react-native-linear-gradient. Ne tentez pas de brouiller ces lignes à moins que vous ne sachiez exactement pourquoi vous le faites.

Configuration Expo

Expo est le chemin plus doux. 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 le choix approprié lorsque vous souhaitez une mise en place rapide, des paramètres raisonnables 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 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 natives, 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 bruts 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 brutes et la même source note des problèmes récurrents avec la simulation Jest et les conflits CocoaPods iOS.

Si vous utilisez Jest dans une application brute, 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 enveloppe fonctionne bien pour les gradients. 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 liens, de pods ou d'environnements de test.

Voici la table de 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 d'écran. Boutons. Titres. Si ces trois sont solidaires, vous pouvez les réutiliser sur un grand nombre d'écrans.

A un modèle mental utile est ceci :

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

Si votre écran d'accueil ou d'entrée utilise un gradient, il s'intègre naturellement avec les 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

Ceci 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 une bonne valeur 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. Un palette qui ressemble bien dans Figma peut échouer instantanément dès que du contenu s'y trouve au-dessus.

Les boutons de gradient qui comportent toujours comme des boutons

L'erreur 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 sémantique 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 de gradient avec une masque

C'est le modèle le plus flash dans le lot, et il est utile quand on le maintient en retenue. Les titres de héros, les bannières de mise à jour 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

Ensuite, construisez 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 la conception plus rapidement que de réglage chaque arrêt.

Apporter les gradients à la vie avec les animations

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

L'utilisation la plus pratique n'est pas un arrière-plan flashant. C'est un chargeur qui scintille. Cet effet indique aux 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, ce Lottie dans le guide React Native est utile pour décider quand une lueur de gradient est suffisante et quand un atout 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 faire bouger une bande de gradient sur 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,
  },
});

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

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

Le composant animé

A quelques notes d'implémentation importantes :

• Utilisez la découpe : Le parent doit overflow: 'hidden', ou le bruissement s'étendra au-delà des coins arrondis.
• Gardez la bande étroite : Un niveau d'animation plus petit est plus facile à ajuster que l'animation de la surface entière.
• Correspondez à la couleur de base à l'écran : Les chargeurs squelettiques doivent s'adapter au layout environnant, et non ressembler à un widget séparé.

Les gradients animés fonctionnent le mieux lorsque les utilisateurs les remarquent à peine. Si le bruissement devient le plus fort élément de l'écran, il fait trop.

Performances, Accessibilité et Quirks de Plateforme

Une fois que les gradients passent des écrans de démonstration à la production, les préoccupations changent. Le code semble simple, mais le comportement de rendu, la lisibilité et la cohérence de la plateforme deviennent plus importants que l'effet initial.

Si vous resserriez davantage la réactivité de l'application, cela guide d'optimisation de la performance des applications mobiles se conforme à la même mentalité : réduire le travail inutile, 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 mal utiliser.

• 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 de fond écran : Un gradient de fond unique est acceptable. Plusieurs gradients de fond superposés translucides, avec flou, plus d'animation lourde peuvent être coûteux.
• Mémorisez les composants réutilisables : S'il s'agit d'une carte de gradient utilisée dans une liste, maintenez les propriétés 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 de l'accèsibilité

Les dégradés peuvent nuire à la lisibilité rapidement car le contraste change en 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 surimpression sombre entre le fond et le texte est souvent préférable à la modification de l'ensemble du palette.
• Réservez le texte de dégradé pour les copies d'affichage importantes : Cela ressemble bien aux titres. C'est une mauvaise choix pour les petites étiquettes, les textes d'aide ou tout ce qui est critique pour terminer une tâche.

Vérifiez le point le plus critique de la courbe de dégradé, et non 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 parfait.

Regardez également votre barre de statut et votre traitement de zone de sécurité. Un gradient qui semble équilibré dans l'émulateur 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 finales

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 gérées par Expo, react-native-linear-gradient pour React Native sans enveloppe.
• Consacrez les gradients à 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 intentionnellement la direction : Horizontal pour les boutons, diagonale pour les arrières-plans décoratifs, masqué uniquement pour les grands textes.
• Concevez pour le contenu, pas pour les états vides : Testez avec du texte réel, des icônes et un traitement de la barre d'état.
• Traitez la mise en place nue comme une mise en place native : Les Pods, la liaison et les mocks Jest ne sont pas des détails optionnels.

Trois erreurs courantes se présentent à nouveau.

Le gradient 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 d'une manière significative.

iOS build breaks after install

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

Fix : exécutez pod install en ios, nettoyez le dossier de build si nécessaire, puis rebuild l'application. Dans les projets bare, l'installation de package seule n'est généralement pas suffisante.

Tests fail with native module errors

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

Fix : simulez react-native-linear-gradient avec react-native-linear-gradient/jest/linear-gradient-mock en votre fichier de configuration de Jest.

Si vous gardez une seule idée de cette guide, gardez celle-ci : le 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 votre architecture d'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 révision de la boutique, Capgo est une option à considérer. Elle offre aux équipes de CapacitorJS et Electron des mises à jour en direct contrôlées, des canaux de déploiement, une protection contre les retours en arrière et une visibilité sur les versions sans transformer votre processus de déploiement en boîte noire.