Maestro de gradientes lineales de React Native: Interfaz de usuario hermosa en 2026

Probablemente hayas encontrado una de 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 de React Native y ahora estás atascado en la configuración porque la mitad de los ejemplos utilizan Expo y la otra mitad asume un proyecto nativo desnudo.

La mayoría de las tutoriales se detienen en ese punto. El componente API es simple. La elección del entorno no lo es. Una configuración de gradientes lineales de React Native limpia depende menos de la colors prop y más sobre si estás en el flujo de trabajo gestionado por Expo o estás manejando el enlace nativo, pods y mocks de pruebas tú mismo.

Contenido de la Tabla

• ¿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 básicas de gradientes para elementos de interfaz de usuario
  • Gradientes de fondo de pantalla completa
  • Botones con gradientes que siguen comportándose como botones
  • Texto con máscara de gradiente
• Dando vida a los gradientes con animaciones
  • Un cargador 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
• Solució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 gradientes?

A muchos UIs móviles les falta algo. El diseño de la interfaz es correcto, el espacio entre elementos está bien, 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 componente de gradiente 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.

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 más. Son herramientas de diseño de interfaz estándar en aplicaciones de producción, no decoración añadida al final, como se menciona en este artículo sobre la 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 sienta capa.
• Dirigir la atención: Las acciones principales, las tarjetas de inicio y los encabezados de héroe destacan sin agregar ruido visual.
• Reemplaza los activos de imagen: En muchos casos, un gradiente te da un toque de elegancia sin enviar imágenes de fondo adicionales.

Regla práctica: Usa 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.

Hay 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 forma parte de tu pila, estas 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 sostienen en varias pantallas.

Elige Tu Ruta Expo vs React Native Bare Setup

Esta es la rama que causa más dolor. 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-gradientSi estás en una aplicación de React Native desnuda, utiliza react-native-linear-gradient. No trates de difuminar esas líneas a menos que sepas exactamente por qué lo estás 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 preocuparte por 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 sin capa

React Native sin capa te da acceso directo a los módulos nativos, pero tú eres dueño de los bordes rugosos.

Instala el paquete:

Solo instala el paquete cuando ya hayas configurado tu proyecto.

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 y conflictos de CocoaPods en iOS

Si utiliza Jest en una aplicación desnuda, agregue la mockificació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 refiérese a ese archivo de configuración en su archivo de 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 de usuario

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 esto:

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

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

Evita elegir colores de manera aislada. Prueba los colores 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 coloca encima de ella.

Botones de gradiente que siguen comportándose como botones

El error común aquí es poner el comportamiento de toque directamente en el gradiente y olvidarse del estado deshabilitado, la retroalimentación de presión o la consistencia de relleno. Mantén el botón semántico y deja 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 una máscara

Este es el patrón más llamativo del conjunto, y es útil cuando lo mantienes restringido. Titulares de héroe, carteles de actualización y encabezados de estado vacío son buenos candidatos. El texto de párrafo no lo es.

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

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

Luego construye 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 quieres que un color ocupen más espacio visual que otro. Si el mezcla se siente lodoso, reduce el número de colores primero. Eso suele arreglar el diseño más rápido que ajustar cada parada.

Haciendo que los gradientes cobren vida con animaciones

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

El uso más práctico no es un fondo llamativo. Es un cargador de destello. Ese efecto les 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.

Un componente de destello también complementa otros patrones de movimiento. Si su aplicación ya utiliza iconos animados o cargadores, este Guía de Lottie en React Native es útil para decidir cuándo un gradiente de destello 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 sobre 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 desde la izquierda hacia 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á tratando de animar la definición del gradiente en sí. Está animando una capa de gradiente sobre 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

A algunos detalles de implementación importan:

• Usar clipping: El padre necesita overflow: 'hidden', o el destello 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 el color base con 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 convierte en la cosa más ruidosa 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 de manera más amplia, esto Guía de optimización de rendimiento de aplicaciones móviles se ajusta a la misma mentalidad: 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 suelen ser 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 fondo: Un gradiente de fondo es suficiente. Varias gradaciones superpuestas transparentes más desenfoque más animación pesada pueden ser costosas.
• Memoiza componentes reutilizables: Si se utiliza una tarjeta de gradiente en una lista, mantén los props estables y evita volver a renderizarla debido a un estado de padre no relacionado.

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

Lista de verificación de accesibilidad

Los gradientes pueden dañar 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.
• Agrega una pantalla de escrutinio cuando sea necesario: Un ligero sobreimpuesto oscuro entre el fondo y el texto es a menudo mejor que cambiar todo el paleta.
• Reserva el texto de gradiente para copias de gran tamaño de pantalla: 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 con precisión, pero no siempre perfectamente.

También revise cómo maneja su barra de estado y área segura. 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.

Solución de problemas y mejores prácticas finales

Esto es la versión corta que guardaría en una nota del proyecto.

• Coincida la biblioteca con el flujo de trabajo: expo-linear-gradient para aplicaciones gestionadas por Expo, react-native-linear-gradient para React Native sin bare.
• Considere el propósito de los gradientes: Los fondos, los botones, las capas de sobreposición y el texto de héroe son casos de uso sólidos.
• Controla la dirección de manera intencional: Horizontal para botones, diagonal para fondos decorativos, solo ocultado para texto grande.
• Diseña para contenido, no para estados vacíos: Prueba con copias reales, iconos y tratamiento de barra de estado.
• Trata el setup bare como setup nativo: Los pods, el enlace y los mocks de Jest no son detalles opcionales.

Tres errores comunes reaparecen repetidamente.

El gradiente no aparece

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

Solución: dale flex: 1una 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 paquetes 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 sola idea de 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 adecuada 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 a la revisión de la tienda Capgo es digno de una mirada. 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.