You’ve probably hit one of two situations.
O tu pantalla se ve plana y poco profesional, y quieres un fondo o botón que parezca un producto real en lugar de un prototipo. O ya intentaste añadir un gradiente en React Native y ahora estás atrapado en un limbo de configuración porque la mitad de los ejemplos usan Expo y la otra mitad asumen un proyecto bare native.
Ahí es donde la mayoría de los tutoriales dejan de ser útiles. El componente API es sencillo. La elección del entorno no lo es. Un setup limpio de linear gradient en React Native depende menos de la colors prop y más de si usas el workflow gestionado de Expo o si te encargas tú mismo del native linking, los pods y los test mocks.
Table of Contents
- Por qué tu app de React Native necesita gradientes
- Elige tu camino: Expo vs Bare React Native Setup
- Técnicas de Gradient para elementos de UI
- Dando vida a los degradados con animaciones
- Rendimiento, accesibilidad y detalles de la plataforma
- Solución de problemas y mejores prácticas finales
Por qué tu app de React Native necesita gradientes
Muchas interfaces móviles fallan por la misma razón. El layout está bien, el espaciado está bien y la tipografía es aceptable, pero la pantalla sigue sintiéndose sin vida. Los rellenos sólidos hacen que todo parezca un placeholder a menos que el resto del sistema visual esté haciendo un gran trabajo.
Una gradiente lineal en React Native El componente lo soluciona con muy poco code. Añade profundidad, crea separación entre secciones y da un peso visual claro a los elementos prioritarios. Un buen fondo con gradiente puede hacer que una pantalla de login se vea intencional. Un botón con gradiente puede dejar clara la acción principal sin recurrir a sombras pesadas ni bordes demasiado llamativos.
Para En 2019, expo-linear-gradient y react-native-linear-gradient aparecieron en más del 42% de los proyectos de React Native, lo que indica que los degradados ya no son un efecto de nicho. Son herramientas de UI estándar en apps de producción, no un adorno añadido al final, como se menciona en este análisis sobre la adopción de degradados en React Native.
Lo que los degradados hacen bien
- Crear profundidad: Una pantalla con un fondo plano suele verse incompleta. Un degradado sutil de arriba hacia abajo aporta capas a la superficie.
- Guiar la atención: Los CTAs principales, las tarjetas de onboarding y los headers destacan sin añadir ruido visual.
- Reemplazar assets de imagen: En muchos casos, un degradado aporta pulido sin necesidad de incluir imágenes de fondo extra.
Regla práctica: Usa gradientes donde la jerarquía sea clave. Fondos, hero cards, botones CTA y overlays de medios se benefician más. En campos de formulario, listas densas o contenedores de texto no suelen ser necesarios.
También hay un ángulo de diseño de producto. Los equipos que trabajan en varias plataformas ya invierten tiempo en mantener la consistencia de las interfaces. Si eso es parte de tu stack, estas prácticas de UI y UX multiplataforma para apps móviles encajan con la misma lógica: menos assets, superficies más reutilizables y sistemas visuales que funcionen en cualquier pantalla.
Elige tu camino: Expo vs Bare React Native
Este es el punto donde surge la mayor fricción. El renderizado de API se siente casi idéntico en ambas librerías, pero la configuración no.
Si estás en una app gestionada con Expo, usa expo-linear-gradient. Si usas una app de React Native bare, utiliza react-native-linear-gradient. No intentes complicar las cosas a menos que sepas exactamente por qué lo haces.
Expo setup
Expo es el camino más sencillo. La instalación es directa, se gestiona la compatibilidad de versiones por ti y no tienes que preocuparte por el native linking.
Install it like this:
npx expo install expo-linear-gradientUse it like this:
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 opción correcta cuando quieres una configuración rápida, valores predeterminados sensatos y menos fricción con lo nativo. Por eso los equipos que exploran flujos de trabajo avanzados de Expo suelen comparar Capgo y Expo EAS para actualizaciones en vivo cuando el enfoque gestionado ya no cubre las necesidades de la app.
Configuración de React Native bare
Bare React Native te da acceso directo a los módulos nativos, pero tú te encargas de lo complicado.
Instala el paquete:
npm install react-native-linear-gradientPara iOS, instala los pods:
cd ios && pod installUso 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 suelen fallar los proyectos bare
La pieza que falta en la mayoría de los tutoriales es el testing y la configuración nativa. Según este resumen de la discusión en Stack Overflow, el 68% de los hilos de Stack Overflow sobre este tema entre 2024 y 2025 presentan fallos de módulos nativos en entornos bare de React Native, y la misma fuente señala problemas recurrentes con el mocking de Jest y conflictos de CocoaPods en iOS.
Si usas Jest en una app bare, añade el mock explícitamente:
// jest.setup.js
import mockRNLinearGradient from 'react-native-linear-gradient/jest/linear-gradient-mock';
jest.mock('react-native-linear-gradient', () => mockRNLinearGradient);Y referencia ese archivo de configuración en tu config de Jest:
module.exports = {
preset: 'react-native',
setupFiles: ['<rootDir>/jest.setup.js'],
};React Native bare funciona bien con gradientes. El problema es que no perdona una configuración incompleta. La mayoría de los fallos no son bugs visuales, sino problemas de linking, pods o del entorno de tests.
Aquí tienes la tabla de decisión práctica:
| Tipo de proyecto | Librería | Mejor opción |
|---|---|---|
| App gestionada con Expo | expo-linear-gradient |
Ruta más rápida, mínima configuración |
| App Bare React Native | react-native-linear-gradient |
Control nativo total |
| Bare app con Jest | react-native-linear-gradient + mock |
Necesario para tests estables |
Técnicas de Gradient para elementos de UI
Un enfoque común es usar el mismo set de patrones de gradient. Fondos. Botones. Titulares. Si esos tres funcionan, puedes reutilizarlos en muchas pantallas.
Un modelo mental útil es este:
colorscontrola la paletastartyendcontrola la direcciónlocationscontrola dónde ocurren las transiciones
Si tu splash o pantalla de onboarding usa un degradado, encaja perfectamente con los patrones de la secuencia de inicio descritos en esta guía de splash screen para React Native.
Degradados de fondo a 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,
},
});Un blend diagonal suele sentirse más dinámico que uno vertical por defecto. Por eso start={{ x: 0, y: 0 }} y end={{ x: 1, y: 1 }} son una buena opción por defecto cuando la pantalla es mayormente decorativa.
No elijas colores de forma aislada. Pruébalos con texto real, iconos y estilos de la status bar. Una paleta que luce bien en Figma puede fallar al instante cuando el contenido se superpone.
Botones con gradiente que se comportan como botones
El error común es aplicar el comportamiento táctil directamente al gradiente y olvidar el estado disabled, el feedback al presionar o la consistencia del padding. 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 botones, un gradiente horizontal suele leerse mejor que uno diagonal. Mantiene la etiqueta estable y evita que el control parezca inclinado.
Texto con gradiente mediante una máscara
Este es el patrón más llamativo y es útil si se usa con moderación. Títulos hero, banners de upgrade y headlines de empty-states son buenos candidatos. El texto de párrafos no lo es.
Necesitarás @react-native-masked-view/masked-view.
npm install @react-native-masked-view/masked-viewLuego 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 importa más cuando quieres que un color ocupe más espacio visual que otro. Si la mezcla se ve turbia, reduce primero el número de colores. Eso suele arreglar el diseño más rápido que ajustar cada stop.
Dando vida a los gradientes con animaciones
Los gradientes estáticos aportan pulido. Los gradientes animados aportan feedback.
El uso más práctico no es un fondo llamativo, sino un shimmer loader. Ese efecto le indica al usuario que la app está activa, que los datos están cargando y que el diseño es intencional y no un error.
Un componente shimmer también complementa otros patrones de movimiento. Si tu app ya usa iconos animados o loaders, esto Guía de Lottie en React Native es útil para decidir cuándo un shimmer de gradiente es suficiente y cuándo conviene usar un asset de animación más complejo.
Un shimmer loader con sensación nativa
La versión más simple y fiable utiliza react-native-reanimated para mover una banda de gradiente sobre un placeholder recortado.
Instala Reanimated si no lo tienes en tu app, luego crea un wrapper con overflow: 'hidden'. Dentro, anima 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,
},
});El truco es que no intentas animar la definición del gradiente en sí, sino una capa de gradiente sobre un placeholder estático. Es más simple, fácil de entender y suele ser más estable en distintos dispositivos.
Aquí tienes un recorrido visual del efecto en acción:
El componente animado
Algunas notas de implementación:
- Usa clipping: El padre necesita
overflow: 'hidden', o el shimmer se saldrá de las esquinas redondeadas. - Mantén la banda estrecha: Es más fácil ajustar una capa animada pequeña que animar toda la superficie.
- Iguala el color base a la pantalla: Los skeleton loaders deben encajar con el layout, no parecer un widget aparte.
Los gradientes animados funcionan mejor cuando apenas se notan. Si el shimmer destaca demasiado, es que es excesivo.
Rendimiento, accesibilidad y particularidades de la plataforma
Cuando los gradientes pasan de demos a producción, las prioridades cambian. El code sigue pareciendo simple, pero el renderizado, la legibilidad y la consistencia entre plataformas importan más que el efecto inicial.
Si buscas mejorar la capacidad de respuesta de tu app en general, esto guía de optimización de rendimiento en apps móviles sigue la misma lógica: reduce procesos innecesarios, mide en dispositivos reales y optimiza las superficies que más ven los usuarios.
Checklist de rendimiento
Los gradientes nativos suelen ser eficientes, pero aún se pueden usar mal.
- Prefiere gradientes en lugar de imágenes decorativas pesadas: Suelen ser más ligeros de subir y fáciles de adaptar a distintos tamaños de pantalla.
- Evita apilar muchas capas a pantalla completa: Un gradiente de fondo está bien. Varios gradientes traslúcidos superpuestos con blur y animaciones pesadas pueden ser costosos.
- Memoiza componentes reutilizables: Si usas una card con gradiente en una lista, mantén los props estables y evita re-renderizarla por cambios de estado ajenos en el padre.
Una buena regla es que los gradientes sean estructurales, no excesivos. Úsalos para definir superficies, no para cada fila de un feed denso.
Checklist de accesibilidad
Los degradados pueden afectar la legibilidad rápidamente debido al cambio de contraste.
- Prueba el texto contra la zona más clara: Si el texto blanco solo se lee en la parte oscura, no funciona.
- Añade un scrim cuando sea necesario: A veces, un sutil overlay oscuro entre el fondo y el texto funciona mejor que cambiar toda la paleta.
- Usa texto con degradado solo para títulos grandes: Queda bien en los encabezados. Es una mala opción para etiquetas pequeñas, texto de ayuda o cualquier elemento crítico para completar una tarea.
Revisa el punto más crítico del degradado, no el más bonito.
Checklist de particularidades de plataforma
iOS y Android suelen renderizar el mismo degradado de forma similar, pero no siempre idéntica.
| Problema | Qué suele ayudar |
|---|---|
| El degradado se ve distinto según la plataforma | Usa menos colores y mayor contraste entre stops |
| Los bordes redondeados no recortan el degradado | Ponlo overflow: 'hidden' en el contenedor |
| El degradado no se muestra | Revisa el ancho, alto o flex: 1 primero |
Cuida también la status bar y el safe area. Un degradado equilibrado en el simulador puede verse cargado arriba en un dispositivo con notch si el contenido y el fondo no consideran ese espacio extra.
Solución de problemas y mejores prácticas finales
Aquí tienes la versión resumida para tus notas de proyecto.
- Elige la librería según tu workflow:
expo-linear-gradientpara apps gestionadas con Expo,react-native-linear-gradientpara React Native bare. - Usa los degradados con intención: Fondos, CTAs, overlays y hero text son casos de uso ideales.
- Controla la dirección con criterio: Horizontal para botones, diagonal para fondos decorativos y con máscara solo para textos grandes.
- Diseña para contenido, no para estados vacíos: Haz pruebas con copy real, iconos y el estilo de la status bar.
- Trata el setup bare como un setup nativo: Los Pods, el linking y los mocks de Jest no son detalles opcionales.
Tres errores comunes se repiten constantemente.
El gradiente no aparece
Causa: el componente no tiene un tamaño visible.
Solución: asígnale flex: 1 una altura explícita o un padre con dimensiones. Un gradiente sin un layout box no se renderizará correctamente.
El build de iOS falla tras la instalación
Causa: no se instalaron los pods o el grafo de dependencias nativas está desincronizado.
Fix: run pod install en ios, limpia la carpeta de build si es necesario y vuelve a compilar la app. En proyectos bare, instalar el paquete no suele ser suficiente.
Los tests fallan con errores de módulos nativos
Causa: Jest está intentando cargar el módulo nativo real.
Solución: mock react-native-linear-gradient con react-native-linear-gradient/jest/linear-gradient-mock en tu archivo de configuración de Jest.
Si te quedas con una sola idea de esta guía, que sea esta: el gradiente en sí es sencillo. El esfuerzo real está en una configuración lista para producción. Una vez que elijas la librería adecuada para la arquitectura de tu app, todo lo demás será mucho más predecible.
Si tu equipo lanza apps móviles híbridas y quiere enviar actualizaciones de JavaScript, CSS, copys, configs y assets sin esperar la revisión de las tiendas, Capgo vale la pena echarle un vistazo. Ofrece a los equipos de CapacitorJS y Electron live updates controlados, canales de rollout, protección contra rollback y visibilidad de los lanzamientos sin que tu proceso de deployment se convierta en una caja negra.
