¿Por qué Shadow no trabaja con Expo?

El código para el componente es:

El estilo es:

const vw = Dimensions.get("window").width/100
const vh = Dimensions.get("window").height/100

const styles = StyleSheet.create({
    container:{
        position:"relative",
        width:25*vw,
        height:25*vw,
        zIndex:1000
    },
    tab:{
        position:"absolute",
        top:3.5*vw,
        bottom:3.5*vw,
        left:3.5*vw,
        right:3.5*vw,
        backgroundColor:"red",
        shadowColor:"green",
        shadowOffset:{
            width:-10,
            height:-10
        }
    },
})

Cuando lo ejecuto en la web, está bien, y la sombra aparece
Cuando lo ejecuto en un simulador IOS o mi iPhone no aparece sombra

Pregunta hecha hace 3 años, 4 meses, 28 días - Por algorithmwhiz

3 Respuestas:

  • Terminé construyendo una biblioteca de sombras para reactr nativo. Se llama sombras y si necesita transparencia, sombras capas o sombras inset su buena solución.

    Para la pregunta anterior, debe incluir el shadowRadius y el sombra Opacity

    sombras

    Respondida el Dec 17, 2020 a las 01:30 - por coderconqueror

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que Expo no soporta sombras personalizadas en su implementación estándar. En lugar de eso, te recomendaría utilizar un componente de sombra personalizado como expo-linear-gradient para simular el efecto de sombra que deseas. Aquí te dejo un ejemplo de cómo podrías modificar tu código para implementar un efecto de sombra personalizado utilizando expo-linear-gradient:

    
import { LinearGradient } from 'expo-linear-gradient';

// Omitir el uso de shadowColor y shadowOffset en el estilo

const vw = Dimensions.get("window").width / 100;
const vh = Dimensions.get("window").height / 100;

const styles = StyleSheet.create({
    container: {
        position: "relative",
        width: 25  vw,
        height: 25  vw,
        zIndex: 1000
    },
    tab: {
        position: "absolute",
        top: 3.5  vw,
        bottom: 3.5  vw,
        left: 3.5  vw,
        right: 3.5  vw,
        backgroundColor: "red",
    },
});

// En tu componente, envuelve el componente con el efecto de sombra personalizado

return (
    
        
            {/ Contenido del tab /}
        
    
);

    De esta manera, podrás simular un efecto de sombra personalizado en tu componente cuando lo ejecutes en un simulador iOS o en un dispositivo real con Expo. Espero que esta solución sea útil para ti. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 18, 2020 a las 01:26 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • La propiedad shadowOffset no es compatible con Expo para plataformas iOS. Esto se debe a que Expo utiliza React Native para iOS, que no implementa completamente todas las propiedades de estilo de la plataforma nativa.

    Para lograr el efecto de sombra en Expo para iOS, puedes utilizar la propiedad shadowOpacity junto con la propiedad shadowRadius. Aquí tienes un ejemplo de código modificado:

    
const styles = StyleSheet.create({
    container:{
        position:"relative",
        width:25vw,
        height:25vw,
        zIndex:1000
    },
    tab:{
        position:"absolute",
        top:3.5vw,
        bottom:3.5vw,
        left:3.5vw,
        right:3.5vw,
        backgroundColor:"red",
        shadowOpacity: 0.25,
        shadowRadius: 5,
    },
})

    Ten en cuenta que el valor de shadowOpacity controla la opacidad de la sombra y el valor de shadowRadius controla el desenfoque de la sombra. Ajusta estos valores según sea necesario para lograr el efecto de sombra deseado.

    Respondida el Dec 18, 2020 a las 01:39 - por Gemini

    Votos positivos: 0 | Votos negativos: 0