Generador de Sombras React Native - Estilos iOS y Android en Línea
Genera estilos de sombra multiplataforma para React Native con vista previa dual en tiempo real. Soporta iOS shadowProps, Android elevation y boxShadow (RN 0.76+) — 100% del lado del cliente.
Ajusta un solo control deslizante para calcular automáticamente todas las propiedades de sombra basadas en Material Design
Valores Calculados
Presets de Sombra
Configuración de Vista Previa
Vista Previa
iOS
Android
Código Generado
const styles = StyleSheet.create({
shadow: {
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.27,
shadowRadius: 3,
elevation: 4,
},
});Preguntas Frecuentes
¿Qué es el React Native Shadow Generator?
El React Native Shadow Generator es una herramienta en línea que crea estilos de sombra específicos para cada plataforma en aplicaciones React Native. Dado que React Native utiliza diferentes APIs de sombra para iOS (shadowColor, shadowOffset, shadowOpacity, shadowRadius) y Android (elevation), esta herramienta genera las propiedades correctas para ambas plataformas con una vista previa visual, para que puedas ver exactamente cómo se verán tus sombras en cada dispositivo.
¿Cómo uso esta herramienta?
Elige entre Quick Mode (control deslizante de profundidad única) o Advanced Mode (controles de propiedades individuales). Ajusta los parámetros de sombra usando controles deslizantes o entradas numéricas. Opcionalmente, elige un color de sombra diferente al negro predeterminado. Previsualiza la sombra en tiempo real en las maquetas de iOS y Android. Selecciona tu formato de código preferido (StyleSheet, Inline, Platform.select o boxShadow) y haz clic en Copy para pegar el código generado en tu proyecto React Native.
¿Mis datos están seguros? ¿Salen de mi navegador?
Sí. Esta herramienta se ejecuta completamente en tu navegador usando JavaScript del lado del cliente. Ninguna configuración de sombra, salida de código ni ningún dato se envía a ningún servidor. Tu trabajo permanece completamente en tu dispositivo.
¿Por qué las sombras se ven diferentes en iOS y Android en React Native?
React Native utiliza motores de renderizado de sombras fundamentalmente diferentes por plataforma. iOS usa propiedades de sombra de Core Animation (shadowColor, shadowOffset, shadowOpacity, shadowRadius) que se mapean directamente a CALayer. Android usa la propiedad elevation de Material Design, que crea una sombra predefinida basada en un único valor numérico de profundidad. Esto significa que la coincidencia perfecta de sombras entre plataformas es inherentemente limitada, pero esta herramienta te ayuda a acercarte lo más posible.
¿Qué es la propiedad boxShadow en React Native 0.76+?
A partir de React Native 0.76, la Nueva Arquitectura introdujo boxShadow como una propiedad de sombra compatible con la especificación web que funciona tanto en iOS como en Android. Utiliza la misma sintaxis que CSS box-shadow, lo que la hace familiar para los desarrolladores web. Esta herramienta puede generar salida boxShadow para proyectos que usan React Native 0.76 o posterior con la Nueva Arquitectura habilitada.
¿Cuál es la diferencia entre elevation y las propiedades de sombra de iOS?
elevation es exclusivo de Android y acepta un único número (0-24) que representa la elevación de Material Design. Determina automáticamente la apariencia de la sombra, incluyendo desplazamiento, desenfoque y opacidad. Las propiedades de sombra de iOS te dan control granular: shadowColor establece el color, shadowOffset controla la dirección, shadowOpacity controla la transparencia y shadowRadius controla el desenfoque. Normalmente necesitas configurar ambos para lograr sombras multiplataforma.
¿Cómo elijo la profundidad de sombra correcta?
Sigue las directrices de elevación de Material Design como referencia: 0-2 para tarjetas en reposo y elementos de lista, 3-6 para botones elevados, snackbars y FABs, 8-12 para modales, hojas inferiores y menús, y 16-24 para cajones de navegación y hojas laterales. Usa los presets en Quick Mode para profundidades de sombra comunes.
Ejemplos de Código
// React Native shadow style generator
function generateShadowStyle(depth, color = '#000000') {
const shadowOpacity = 0.2 + (depth / 24) * 0.4;
const shadowRadius = Math.max(1, Math.round(depth * 0.8));
const shadowOffsetHeight = Math.max(1, Math.round(depth * 0.5));
return {
shadowColor: color,
shadowOffset: {
width: 0,
height: shadowOffsetHeight,
},
shadowOpacity: Math.round(shadowOpacity * 100) / 100,
shadowRadius: shadowRadius,
elevation: depth,
};
}
// Platform-specific shadow
import { Platform } from 'react-native';
function createPlatformShadow(depth, color = '#000000') {
const shadow = generateShadowStyle(depth, color);
return Platform.select({
ios: {
shadowColor: shadow.shadowColor,
shadowOffset: shadow.shadowOffset,
shadowOpacity: shadow.shadowOpacity,
shadowRadius: shadow.shadowRadius,
},
android: {
elevation: shadow.elevation,
shadowColor: shadow.shadowColor,
},
});
}
// Usage
const cardShadow = generateShadowStyle(4);
console.log(cardShadow);
// { shadowColor: '#000000', shadowOffset: { width: 0, height: 2 },
// shadowOpacity: 0.27, shadowRadius: 3, elevation: 4 }