Maestro de gradientes lineales de React Native: hermosas interfaces en 2026

Probablemente hayas tocado dos situaciones.

O tu pantalla parece plana y sin acabado, y deseas un fondo o botón que se sienta como un producto real en lugar de una estructura de prueba. O ya intentaste agregar un gradiente React Native y ahora estás atascado en la configuración porque la mitad de los ejemplos usan Expo y la otra mitad asume un proyecto nativo desnudo.

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 y más, dependiendo de si estás en el flujo de trabajo gestionado por Expo o manejas enlaces nativos, pods y mocks de prueba tú mismo.

Contenido de la Tabla

• ¿Qué hacen bien los gradientes?
  • ¿Qué gradientes funcionan bien
• Elegir tu camino Expo vs Instalación React Native Bare
  • Expo setup
  • ¿Dónde los proyectos desnudos suelen fallar?
  • Donde los proyectos básicos suelen fallar
• Técnicas de Gradiente Fundamental para Elementos de Interfaz
  • Fondos de pantalla completos con gradientes
  • Botones con gradientes que siguen comportándose como botones
  • Texto con máscara de gradiente
• Introduciendo gradientes en la vida con animaciones
  • Cargador de destello que se siente nativo
  • El componente animado
• Rendimiento, Accesibilidad y Rarezas de Plataforma
  • Lista de verificación de rendimiento
  • Lista de verificación de accesibilidad
  • Lista de peculiaridades de la plataforma
• Resolución de problemas y mejores prácticas finales
  • Gradiente no aparece
  • iOS build breaks después de la instalación
  • Las pruebas fallan con errores de módulo nativo

¿Por qué su aplicación de React Native necesita gradientes?

Un montón de interfaces de usuario móviles fallan por la misma razón. El diseño es correcto, el espaciado es correcto, la tipografía es aceptable, pero la pantalla todavía se siente muerta. Los rellenos sólidos hacen que todo parezca placeholders a menos que el resto del sistema visual esté haciendo mucho trabajo.

A componente de gradiente React Native fija eso con muy poco code. Agrega profundidad, crea separación entre secciones y da a los elementos de alta prioridad un peso visual claro. Un buen fondo de gradiente puede hacer que una pantalla de inicio se sienta intencional. Un buen botón de gradiente puede hacer que la acción principal sea obvia sin recurrir a sombras pesadas o bordes demasiado ruidosos.

Por 2019, expo-linear-gradient y react-native-linear-gradient aparecieron en más del 42% de los proyectos de React Native, lo cual es un fuerte señal de que los gradientes no son un efecto de nicho más. Son herramientas de diseño de interfaz estándar en aplicaciones de producción, no decoración pegada al final, como se nota en Adopción de gradientes en React Native.

¿Qué hacen bien los gradientes

• Crear profundidad: Una pantalla con un fondo plano a menudo parece inacabada. Un suave gradiente de arriba a abajo hace que la superficie parezca estratificada.
• Dirigir la atención: Primarios CTAs, tarjetas de inicio y encabezados de héroe destacan sin agregar ruido visual.
• Sustituir activos de imagen: En muchos casos, un gradiente te da un toque sin enviar imágenes de fondo adicionales.

Regla práctica: Usa gradientes donde la jerarquía importa. Fondos, tarjetas de héroe, superficies de CTAs y capas de medios se benefician más. Los campos de formulario, las listas densas y los contenedores de texto corporativo suelen no.

Existen también un ángulo de diseño de producto aquí. Los equipos que trabajan en varias plataformas ya pasan tiempo tratando de mantener las interfaces consistentes. Si eso es parte de tu pila, estos prácticas de UI y UX cruzadas para aplicaciones móviles se alinean bien con el mismo pensamiento: menos activos, más superficies reutilizables y sistemas visuales que se sostengan en varias pantallas.

Elige tu camino Expo vs Instalación React Native Bare

Esta es la rama que causa la mayoría de los problemas. La renderización API se siente casi idéntica en ambas bibliotecas, pero la configuración no.

Si estás en una aplicación Expo-managed, utiliza expo-linear-gradientSi estás en una aplicación React Native bare, utiliza react-native-linear-gradientNo intentes bordear esas líneas a menos que sepas exactamente por qué lo estás haciendo.

Expo setup

Expo es el camino más suave. La instalación es sencilla, la sincronización de versiones se maneja por ti y no tienes que pensar en enlaces nativos.

Instálalo de esta manera:

npx expo install expo-linear-gradient

Utilízalo de esta manera:

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 es la elección correcta cuando quieres una configuración rápida, valores razonables y menos bordes nativos. Eso es también por qué los equipos que exploran flujos de trabajo avanzados de Expo a menudo terminan utilizando un cliente de desarrollo Expo para capacidades nativas personalizadas solo cuando el camino administrado ya no cubre las necesidades de la aplicación.

Configuración React Native básica

React Nativo Bare te da acceso directo a los módulos nativos, pero tú manejas los detalles bruscos.

Instale el paquete:

npm install react-native-linear-gradient

Para iOS, instale pods:

cd ios && pod install

Uso básico:

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

Dónde los proyectos básicos usualmente fallan

La pieza faltante en la mayoría de las tutoriales es la prueba y la configuración nativa. este resumen de la discusión en Stack Overflow, 68% de los hilos de Stack Overflow sobre este tema en 2024 a 2025 involucran fallas de módulos nativos en configuraciones React Native desnudas, y la misma fuente destaca problemas recurrentes con Jest y conflictos de CocoaPods en iOS.

Si utiliza Jest en una aplicación básica, agregue la simulación explícitamente:

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

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

Y refiera ese archivo de configuración en la configuración de Jest:

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

Funciona bien React Native sin adornos. Simplemente no perdona un setup incompleto. La mayoría de los errores no son problemas visuales. Son problemas de enlace, pods o entornos de prueba.

Aquí está la tabla de decisiones práctica:

Técnicas de Gradiente Fundamentales para Elementos de IU

Una aproximación común es utilizar el mismo pequeño conjunto de patrones de gradiente una y otra vez. Fondos. Botones. Títulos. Si esos tres son sólidos, puedes reutilizarlos en muchas pantallas.

Un modelo mental útil es este:

• colors controla el paleta
• start y end controla la dirección
• locations controla dónde ocurren las transiciones

Si su pantalla de inicio o de onboarding utiliza un gradiente, se combina naturalmente con los patrones de secuencia de inicio más amplios descritos en este Guía de pantalla de inicio de React Native.

Gradientes de fondo en pantalla completa

Este es el patrón más simple y reutilizable.

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

A una mezcla diagonal suele parecer más dinámica que una vertical por defecto. Eso es por qué start={{ x: 0, y: 0 }} y end={{ x: 1, y: 1 }} son una buena opción por defecto cuando la pantalla es principalmente decorativa.

No elija colores en aislamiento. Pruebe los colores detrás de texto real, iconos y estilos de barra de estado. Un conjunto de colores que se ve bien en Figma puede fallar instantáneamente una vez que el contenido se siente encima de él.

Botones de gradiente que aún se comportan como botones

El error común aquí es poner el comportamiento de toque directamente en el gradiente y olvidarse del estado deshabilitado, feedback de presión o consistencia de relleno. Mantenga el botón semántico y deje que el gradiente sea la capa visual.

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

Para los botones, un gradiente horizontal suele leer mejor que uno diagonal. Mantiene la etiqueta estable y evita hacer que el control se sienta inclinado.

Texto de gradiente con máscara

Esto es el patrón más llamativo del conjunto, y es útil cuando se mantiene restringido. Titulares de héroe, anuncios de actualización y títulos de estado vacío son buenos candidatos. El texto de párrafo no lo es.

Necesitará @react-native-masked-view/masked-view.

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

Luego construya la máscara de texto:

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 Lo que importa más cuando quiere que un color ocupie más espacio visual que otro. Si la mezcla se siente lodosa, reduzca el número de colores primero. Eso suele arreglar el diseño más rápido que ajustar cada parada.

Dar vida a los gradientes con animaciones

Los gradientes estáticos te dan brillo. Los gradientes animados te dan feedback.

El uso más práctico no es un fondo llamativo. Es un cargador que centellea. Ese efecto informa a los usuarios de que la aplicación está activa, los datos están llegando y el diseño que están viendo es intencional en lugar de roto.

Un componente centelleante también complementa otros patrones de movimiento. Si su aplicación ya utiliza iconos animados o cargadores, esto Guía de Lottie en React Native es útil para decidir cuándo un gradiente centelleante es suficiente y cuándo un activo de animación más rico hace más sentido.

Un cargador que centellea que se siente nativo

La versión más simple y confiable utiliza react-native-reanimated para mover una banda de gradiente sobre un placeholder recortado.

Instale Reanimated si no está ya en su aplicación, luego cree un contenedor con overflow: 'hidden'Dentro de él, anima un capa de gradiente desde la izquierda a la derecha.

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

Lo que hace que esto funcione es que no estás tratando de animar la definición del gradiente en sí. Estás animando una capa de gradiente sobre un lugar de reemplazo estático. Eso es más simple, más fácil de razonar y generalmente más estable en dispositivos.

Aquí tienes una guía visual del efecto en la práctica:

El componente animado

Un par de notas de implementación importan:

• Usa recorte: El padre necesita overflow: 'hidden', o el destello se derramará fuera de las esquinas redondeadas.
• Mantén el ancho del anillo estrecho: Una capa animada más pequeña es más fácil de ajustar que animar toda la superficie.
• Ajusta el color base a la pantalla: Los cargadores de esqueleto deben ajustarse al diseño circundante, no parecer un widget separado.

Los gradientes animados funcionan mejor cuando los usuarios apenas los notan. Si el destello se vuelve el elemento más ruidoso en la pantalla, está haciendo demasiado.

Rendimiento Accesibilidad y Quirks de la Plataforma

Una vez que los gradientes pasan de las pantallas de demostración a la producción, los preocupaciones cambian. El code sigue pareciendo simple, pero el comportamiento de renderizado, la legibilidad y la consistencia de la plataforma comienzan a importar más que el efecto inicial.

Si está mejorando la respuesta del aplicativo de manera más general, esto Guía de optimización del rendimiento de aplicaciones móviles reduce la cantidad innecesaria de trabajo, medir en dispositivos reales y optimizar las áreas que los usuarios ven con más frecuencia.

Lista de verificación de rendimiento

Los gradientes nativos suelen ser eficientes, pero aún puedes abusar de ellos.

• Prefer gradients sobre imágenes decorativas grandes: Suelen ser más limpios para enviar y más fáciles de adaptar a múltiples tamaños de pantalla.
• Evita apilar muchas capas de pantallas completa. Un gradiente de fondo es suficiente. Varias gradientes transparentes superpuestos más blur más animación pesada pueden resultar costosos.
• Memoizar componentes reutilizables: Si se utiliza una tarjeta de gradiente en una lista, mantenga estable las propiedades y evite volver a renderizarla por el estado del padre no relacionado.

Una buena regla es mantener los gradientes estructurales, no excesivos. Utilícelos para definir superficies, no cada fila en una alimentación densa.

Lista de verificación de accesibilidad

Los gradientes pueden afectar la legibilidad rápidamente porque el contraste cambia en toda la superficie.

• Prueba el texto contra el área más clara: Si el texto blanco solo funciona en el lado oscuro de la mezcla, no funciona.
• Añada un escorzo cuando sea necesario: Un ligero sobreimpuesto oscuro entre el fondo y el texto es a menudo mejor que cambiar todo el paleta.
• Reserve el texto de gradiente para copias de pantalla grandes: Se ve bien en títulos. Es una mala elección para etiquetas pequeñas, texto de ayuda o cualquier cosa crítica para completar una tarea.

Verifique el punto peor del gradiente, no el más bonito.

Lista de peculiaridades de la plataforma

iOS y Android suelen renderizar el mismo gradiente con precisión, pero no siempre perfectamente.

También observa cómo manejas tu barra de estado y el área de seguridad. Un gradiente que se ve equilibrado en el simulador puede parecer pesado en la parte superior en un dispositivo con una ranura si el contenido y el fondo no tienen en cuenta ese espacio adicional.

Resolución de problemas y mejores prácticas finales

La versión corta que guardaría en una nota de proyecto.

• Coincidir la biblioteca con el flujo de trabajo: expo-linear-gradient para aplicaciones gestionadas por Expo react-native-linear-gradient para React Native desnudo.
• Mantener los gradientes con un propósito: Backgrounds, CTAs, overlays, and hero text are strong use cases.
• Controlar la dirección de manera intencional: Horizontal para botones, diagonal para fondos decorativos, solo ocultar para texto grande.
• Diseñar para el contenido, no para estados vacíos: Pruebe con copias reales, iconos y tratamiento de barra de estado.
• Trate el setup desnudo como setup nativo: Pods, enlaces y mocks de Jest no son detalles opcionales.

Se repiten tres fracasos comunes.

No aparece el gradiente.

Causa: el componente no tiene tamaño visible.

Solución: dale flex: 1una altura explícita, o un padre con dimensiones. Un gradiente sin caja de diseño no se renderizará de manera significativa.

Compila iOS se rompe después de la instalación

Causa: no se instalaron los pods o la gráfica de dependencia nativa está desincronizada.

Fix: ejecutar pod install en ioslimpia el carpeta de compilación si es necesario, luego reconstruye la aplicación. En proyectos desnudos, instalar paquetes solos no suele ser suficiente.

Los tests fallan con errores de módulo nativo.

Por qué: Jest está tratando de cargar el módulo nativo real.

Solución: mock react-native-linear-gradient con react-native-linear-gradient/jest/linear-gradient-mock en su archivo de configuración de Jest.

Si retienes una sola idea de esta guía, retén esta: el gradiente en sí es fácil. La configuración lista para producción es el esfuerzo principal. Una vez que elijas la biblioteca adecuada para la arquitectura de tu aplicación, todo lo demás se vuelve mucho más predecible.

Si tu equipo envía aplicaciones móviles híbridas y quiere enviar actualizaciones de JavaScript, CSS, copia, configuración y activos sin esperar a la revisión de la tienda, Capgo Es una buena opción. Proporciona a los equipos de CapacitorJS y Electron actualizaciones en vivo controladas, canales de lanzamiento, protección de retroceso y visibilidad de lanzamiento sin convertir tu proceso de despliegue en una caja negra.