Master Linear Gradient React Native: Interfaces hermosas en 2026

Probablemente hayas topado con una de dos situaciones.

O bien, 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 ensamblaje. O ya has intentado agregar un gradiente React Native y ahora te encuentras atascado en la configuración porque la mitad de los ejemplos utilizan Expo y la otra mitad asume un proyecto nativo desnudo.

Ese split es donde la mayoría de las tutoriales dejan de ser útiles. El componente API es simple. La elección del entorno no lo es. Una configuración de gradiente lineal React Native limpia depende menos del colors prop y más sobre si estás en el flujo de trabajo gestionado por Expo o te estás ocupando de la enlazado nativo, pods y mocks de prueba tú mismo.

Índice

• ¿Por qué tu aplicación de React Native necesita gradientes?
  • ¿Qué hacen bien los gradientes?
• ¿Cómo elegir tu camino Expo vs configuración de React Native Bare?
  • Configuración de Expo
  • Configuración de React Native Bare
  • Dónde se rompen los proyectos bare
• Técnicas de gradientes básicas para elementos de interfaz de usuario
  • Fondos de pantalla de gradientes completos
  • Botones de gradientes que siguen comportándose como botones
  • Texto de gradientes con una máscara
• Traer Grados de Vida con Animaciones
  • Un cargador de destello que se siente nativo
  • El componente animado
• Rendimiento Accesibilidad y Peculiaridades de la Plataforma
  • Lista de verificación de rendimiento
  • Lista de verificación de accesibilidad
  • Lista de verificación de peculiaridades de la plataforma
• Resolución de problemas y mejores prácticas finales
  • El gradiente no aparece
  • La compilación de iOS se rompe después de la instalación
  • Los tests fallan con errores de módulo nativo

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

A muchos UIs móviles les falta algo por igual. La disposición es correcta, el espacio entre elementos es correcto, la tipografía es aceptable, pero la pantalla sigue sintiendo muerta. Los rellenos sólidos hacen que todo parezca un lugar de espera a menos que el resto del sistema visual esté haciendo mucho trabajo.

A un gradiente lineal de React Native componente que arregla 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 de sesión 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 llamativos.

Por 2019, expo-linear-gradient y react-native-linear-gradient aparecieron en más del 42% de los proyectos de React Native, lo que es un fuerte señal de que los gradientes no son un efecto de nicho en absoluto. Son herramientas de diseño UI estándar en aplicaciones de producción, no decoración añadida al final, como se nota en este artículo sobre la adopción de gradientes de 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 se sienta estratificada.
• Dirigir la atención: Las acciones principales, las tarjetas de incorporación y los encabezados de héroe destacan sin agregar ruido visual.
• Sustituye los activos de imagen: En muchos casos, un gradiente te da un toque de refinamiento sin enviar imágenes de fondo adicionales.

Regla práctica: Utiliza gradientes donde importa la jerarquía. Los fondos, las tarjetas de héroe, las superficies de las acciones principales y los rellenos de medios se benefician más. Los campos de formulario, las listas densas y los contenedores de texto de cuerpo suelen no.

También hay un ángulo de diseño de productos aquí. Los equipos que trabajan en varias plataformas ya pasan tiempo tratando de mantener las interfaces consistentes. Si eso forma parte de tu pila, estos prácticas de interfaz de usuario y experiencia de usuario 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.

Elegir tu camino Expo vs Bare React Native Setup

Esta es la rama que causa la mayoría de los dolores de cabeza. El renderizado API se siente casi idéntico en ambas bibliotecas, pero la configuración no.

Si estás en una aplicación de Expo administrada, utiliza expo-linear-gradient. Si estás en una aplicación de React Native desnuda, utiliza react-native-linear-gradient. No traten de bordear esas líneas a menos que sepan exactamente por qué lo están haciendo.

Configuración de Expo

Expo es el camino más suave. La instalación es sencilla, la versión se ajusta automáticamente y no tienes que pensar en el enlace nativo.

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

Configuración de React Native bare

React Native bare te da acceso directo a los módulos nativos, pero tú eres dueño de las aristas rugosas.

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

Donde los proyectos desnudos suelen romperse

La pieza faltante en la mayoría de las tutoriales es la prueba y la configuración nativa. Según esta resumen de discusión de 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 desnudasy la misma fuente destaca problemas recurrentes con Jest mocking y conflictos de CocoaPods de iOS.

Si utiliza Jest en una aplicación desnuda, 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 su configuración de Jest:

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

React Native desnudo funciona bien para gradientes. Simplemente no perdona la configuración incompleta. La mayoría de las fallas no son errores visuales. Son problemas de enlace, pods o entornos de prueba.

Aquí está la tabla de decisión práctica:

Técnicas de gradiente básicas para elementos de interfaz

Un enfoque 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.

A un modelo mental útil es este:

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

Si su pantalla de bienvenida o de inicio 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.

Fondos de pantalla de fondo completo

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

Un mezcla diagonal suele sentirse más dinámica que una vertical predeterminada. 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 de manera aislada. Pruebe cómo se ven detrás de texto real, iconos y estilos de barra de estado. Un paleta que se ve bien en Figma puede fallar instantáneamente una vez que el contenido se siente encima de ella.

Botones de gradiente que siguen comportándose como botones.

El error común aquí es poner el comportamiento de tacto directamente en el gradiente y olvidarse del estado deshabilitado, la retroalimentación de presión o la 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 leerse mejor que uno diagonal. Mantiene la etiqueta estable y evita hacer que el control se sienta inclinado.

Texto de gradiente con máscara.

Este es el patrón más llamativo del conjunto, y es útil cuando se mantiene restringido. Titulares de heroínas, 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 ocupen más espacio visual que otro. Si el mezcla se siente lodoso, reduzca el número de colores primero. Eso suele arreglar el diseño más rápido que ajustar cada parada.

Traer Gradients a la vida con Animaciones

Los gradientes estáticos le dan brillo. Los gradientes animados le dan retroalimentación.

El uso más práctico no es un fondo llamativo. Es un cargador de brillo. Ese efecto le dice a los usuarios 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.

El componente de destello 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 destello de gradiente es suficiente y cuándo un activo de animación más rico hace más sentido.

Un cargador de destello que se siente nativo

La versión más simple y confiable utiliza react-native-reanimated para mover una banda de gradiente a través de un lugar de relleno cortado.

Instale Reanimated si no está ya en su aplicación, luego cree un contenedor con overflow: 'hidden'Dentro de él, anime una capa de gradiente de izquierda a 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 de gradiente en sí. Estás animando una capa de gradiente a través de un lugar de relleno estático. Eso es más simple, más fácil de razonar y generalmente más estable en dispositivos.

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

El componente animado

Algunas notas sobre la implementación son importantes:

• Utilice clipping: El padre necesita overflow: 'hidden'o la sombra se derramará fuera de las esquinas redondeadas.
• Mantenga la banda estrecha: Un capa animada más pequeña es más fácil de ajustar que animar toda la superficie.
• Coincidir con el color base con la pantalla: Los cargadores de esqueleto deben ajustarse al diseño circundante, no parecerse a un widget separado.

Los gradientes animados funcionan mejor cuando los usuarios apenas los notan. Si el brillo se vuelve el elemento más destacado 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 todavía parece 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á ajustando la respuesta del aplicativo más ampliamente, esto Guía de optimización de rendimiento de aplicaciones móviles Encaja con el mismo mindset: reduce el trabajo innecesario, mide en dispositivos reales y optimiza las superficies que los usuarios ven más.

Lista de verificación de rendimiento

Las gradaciones nativas son generalmente eficientes, pero aún puedes abusar de ellas.

• Preferir gradaciones a imágenes decorativas grandes: Son a menudo más limpias para enviar y más fáciles de adaptar a múltiples tamaños de pantalla.
• Evita superponer muchos capas de pantalla completa: Un gradiente de fondo es suficiente. Varias gradaciones superpuestas translúcidas más blur más animación pesada pueden ser costosas.
• Memoiza componentes reutilizables: Si se utiliza una tarjeta de gradiente en una lista, mantén las propiedades estables y evita que se vuelva a renderizar por el estado del padre no relacionado.

Una buena regla es mantener las gradaciones estructurales, no excesivas. Utilízalas para definir superficies, no cada fila en una alimentación densa.

Lista de verificación de accesibilidad

Los gradientes pueden dañar la legibilidad rápidamente porque el contraste cambia a lo largo de 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ñade una pantalla cuando sea necesario: Un oscuro de fondo suave entre el fondo y el texto es a menudo mejor que cambiar todo el paleta.
• Reserva 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.

Verifica el punto peor de la gradiente, no el más bonito.

Lista de verificación de particularidades de la plataforma

iOS y Android suelen renderizar la misma gradiente de manera similar, pero no siempre perfectamente.

También revise su barra de estado y tratamiento de área segura. Una gradación que se ve equilibrada en el simulador puede parecer pesada en la parte superior en un dispositivo con una ranura si el contenido y el fondo no tienen en cuenta ese espacio adicional.

Solución de problemas y mejores prácticas finales

Aquí está la versión corta que guardaría en una nota de proyecto.

• Ajuste la biblioteca al flujo de trabajo: expo-linear-gradient para aplicaciones Expo administradas, react-native-linear-gradient para React Native desnudo.
• Mantén los gradientes con propósito: Los fondos, los botones, las capas de sobreposición y el texto de héroe son casos de uso fuertes.
• Controla la dirección con intención: Horizontal para botones, diagonal para fondos decorativos, solo ocultado para texto grande.
• Diseña para contenido, no para estados vacíos: Prueba con copia real, iconos y tratamiento de barra de estado.
• Trata el setup desnudo como setup nativo: Los Pods, el enlace y los mocks de Jest no son detalles opcionales.

Tres fracasos comunes surgen repetidamente.

El gradiente no aparece

Causa: el componente no tiene un tamaño visible.

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

La compilación de iOS falla después de la instalación

Causa: los pods no se instalaron o la gráfica de dependencias nativas está desactualizada.

Solución: ejecuta pod install en ios, limpia el carpeta de compilación si es necesario, luego reconstruye la aplicación. En proyectos sin capa, instalar el paquete solo suele ser insuficiente.

Los tests fallan con errores de módulo nativo

Causa: Jest está tratando de cargar el módulo nativo real.

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

Si conserva una idea de toda esta guía, conserva esta: el gradiente en sí es fácil. La configuración lista para producción es el esfuerzo principal. Una vez que elija la biblioteca correcta para la arquitectura de su aplicación, todo lo demás se vuelve mucho más predecible.

Si su equipo envía aplicaciones móviles híbridas y quiere enviar actualizaciones de JavaScript, CSS, copia, configuración y activos sin esperar la revisión de la tienda, Capgo es una opción digna de consideració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 su proceso de despliegue en una caja negra.