Maestro de Gradiente Lineal React Native: Interfaz de Usuario Hermosa en 2026

Probablemente hayas topado con una de dos situaciones.

O tu pantalla se ve plana y sin acabado, y quieres un fondo o botón que se sienta como un producto real en lugar de una estructura de ensamblaje. O ya intentaste agregar un gradiente de React Native, y ahora estás atascado en el limbo de 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. El entorno de elección 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 de 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?
• Elegir tu camino: Expo vs Instalación 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
  • Gradientes de fondo pantalla completa
  • Botones con gradientes que siguen comportándose como botones
  • Texto con máscara de gradientes
• Traer Grados de Vida con Animaciones
  • Un cargador de destello que 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
  • El compilado 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 ruidosos.

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 UI estándar en aplicaciones de producción, no decoración añadida al final, como se nota en este artículo sobre el uso 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 se sienta estratificada.
• Guía la atención: Los botones principales, las tarjetas de incorporación y los encabezados heroicos destacan sin agregar ruido visual.
• Sustituye 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: Utiliza gradientes donde importa la jerarquía. Los fondos, las tarjetas heroicas, las superficies de CTAs y los rellenos de medios se benefician más. Los campos de formulario, las listas densas y los contenedores de texto corporativo suelen no.

También hay 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 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.

Elige Tu Ruta Expo vs Bare React Native Setup

Esto es el forkeo que causa más dolor. El rendering API se siente casi idéntico en ambas bibliotecas, pero la configuración no.

Si estás en una aplicación Expo gestionada, utiliza expo-linear-gradient. Si estás en una aplicación React Native desnuda, utiliza react-native-linear-gradient. No intentes 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 pensar en el enlace nativo.

Instálalo de la siguiente manera:

npx expo install expo-linear-gradient

Utilízalo de la siguiente 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 por defecto razonables y menos bordes nativos. Eso también es por qué los equipos que exploran flujos de Expo avanzados 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 los bordes rugosos.

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 fallar

La pieza faltante en la mayoría de las tutoriales es la prueba y la configuración nativa. Según esta 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 de 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 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 de usuario

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

Gradientes de fondo de pantalla 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 elijas colores aislados. Prueba 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. 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 máscara

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

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.

Traer Gradients a la 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 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.

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

Un cargador de brillo 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 placeholder cortado.

Instale Reanimated si no está ya en su aplicación, luego cree un wrapper con overflow: 'hidden'. Dentro de él, anime una 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 a través de un placeholder 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 práctica:

El componente animado

Algunas notas sobre la implementación son importantes:

• Utilice 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 con 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 se mueven 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 los props estables y evita volver a renderizarla 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 un flujo denso.

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.
• Agregar un escorzo 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 cercana, pero no siempre perfectamente.

También revise su barra de estado y tratamiento de á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

Aquí está la versión corta que guardaría en una nota del 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.
• 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

La causa: el componente no tiene un tamaño visible.

Solución: dale una altura explícita, o un padre con dimensiones. flex: 1Un 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

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

Solución: ejecuta pod install en ioslimpia el carpeta de compilación si es necesario, y luego reconstruye la aplicación. En proyectos desnudos, instalar paquetes solo suele ser insuficiente.

Los tests fallan con errores de módulo nativo

La 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 In su archivo de configuración de Jest.

Si conserva una idea de esta guía completa, conserve 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 tener que 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 su proceso de despliegue en una caja negra.