CodeKitHub¿Qué es esta herramienta?
En React Native, las sombras no son multiplataforma por defecto. iOS usa cuatro propiedades de estilo separadas (shadowColor, shadowOffset con width/height, shadowOpacity de 0 a 1, y shadowRadius para el desenfoque), que se mapean a la misma sombra de CoreAnimation que usa box-shadow en la web. El sistema View nativo de Android directamente no admite formas de sombra arbitrarias: solo admite elevation, un único número que produce una sombra fija de Material Design según la altura a la que "flota" la vista.
Esto significa que una sombra que se ve bien en iOS usando shadowRadius/shadowOpacity no mostrará nada en Android a menos que también configures elevation, y ambas nunca se verán idénticas píxel a píxel porque la forma de la sombra de elevation no es personalizable como la de iOS. Desde React Native 0.74 con la New Architecture activada, también existe una propiedad boxShadow multiplataforma, con la misma sintaxis que CSS.
¿Por qué utilizarlo?
- Ve una vista previa visual en vivo mientras ajustas el desplazamiento, el desenfoque, la opacidad y el color, en lugar de adivinar valores y reconstruir la app para comprobarlos.
- Obtén las propiedades de sombra de iOS, la elevation de Android y la nueva cadena boxShadow multiplataforma a la vez, sin tener que consultar tres APIs distintas.
- La elevation es un control independiente (no se calcula automáticamente a partir del desenfoque/opacidad) porque el mapeo de elevation al aspecto de la sombra en Android no es una traducción directa de las propiedades de sombra de iOS; se ajusta para que coincida visualmente, y esta herramienta te permite hacerlo comparando ambas en paralelo.
- Gratis, instantáneo y listo para copiar como un único objeto de estilo.
Cómo utilizarlo
- Ajusta el desplazamiento X/Y, el radio de desenfoque, la opacidad y el color de la sombra: la caja de vista previa se actualiza en vivo.
- Ajusta por separado el número de elevation de Android hasta que coincida visualmente con la intensidad de sombra que buscas.
- Haz clic en "Copy" para copiar el objeto de estilo completo, incluyendo las propiedades de iOS, la elevation de Android y la cadena boxShadow.
- Pega el objeto en el StyleSheet de tu componente: combínalo o fusiónalo con los estilos de vista existentes.
Ejemplo
Entrada
Desplazamiento (0, 4), desenfoque 8, opacidad 0.25, negro, elevation 5Resultado
shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'shadowRadius se establece en la mitad del valor de desenfoque mostrado en la vista previa, en línea con la relación práctica entre el radio de desenfoque de CSS y el shadowRadius de iOS.
Preguntas frecuentes
¿Por qué no aparece mi sombra en Android?
Las propiedades shadowColor/shadowOffset/shadowOpacity/shadowRadius son exclusivas de iOS: el renderizado nativo de Android simplemente las ignora. Necesitas también establecer la propiedad elevation (un número positivo) para que aparezca alguna sombra en Android.
¿Puedo hacer que la sombra de Android se vea idéntica a la de iOS?
No exactamente: elevation produce la forma de sombra integrada de Material Design en Android, que no se puede configurar de forma independiente en color, dirección del desplazamiento o desenfoque como sí ocurre en iOS. Puedes ajustar el número de elevation para lograr una intensidad visualmente similar, pero una coincidencia píxel a píxel entre plataformas no es posible con las APIs clásicas de shadow/elevation.
¿Qué es la propiedad boxShadow y puedo usarla en su lugar?
boxShadow es una propiedad de estilo más nueva y verdaderamente multiplataforma (añadida en React Native 0.74, disponible con la New Architecture) que usa la misma sintaxis de cadena que box-shadow de CSS y funciona igual en iOS y Android. Si la versión de React Native y la arquitectura de tu app lo soportan, puedes usar solo esta propiedad en lugar de las cuatro propiedades de iOS más elevation; comprueba tu versión de RN y el estado de la New Architecture antes de depender de ella en producción.
¿Por qué shadowRadius es la mitad del valor de desenfoque que configuré?
La vista previa en vivo usa box-shadow de CSS, donde el valor de desenfoque se extiende aproximadamente el doble que el shadowRadius de iOS para el mismo número. El código generado establece shadowRadius en la mitad de tu valor de desenfoque para que la sombra que ves en la vista previa coincida con lo que iOS renderiza realmente; si copiaras el valor de desenfoque tal cual, la sombra en iOS se vería notablemente más suave y más grande que la vista previa.
¿Necesito Platform.select para aplicar estos estilos?
No: es seguro poner juntas las propiedades shadow* de iOS y la elevation de Android en un solo objeto de estilo, exactamente como hace el código generado: cada plataforma simplemente ignora las propiedades de la otra. Platform.select solo merece la pena si quieres diseños de sombra realmente distintos por plataforma, no solo para evitar advertencias (no las hay).
Configuré elevation pero la sombra en Android sigue sin aparecer, ¿por qué?
Las dos causas más comunes: la vista no tiene backgroundColor (la sombra de elevation en Android se proyecta desde el fondo opaco de la vista, así que una vista transparente no proyecta nada), o un elemento padre tiene overflow: 'hidden' y está recortando la sombra. Añade un color de fondo sólido a la vista y revisa la configuración de overflow de los ancestros antes de asumir que el valor de elevation está mal.