react native - touchablehighlight - sombra de texto en reaccionar nativo

react-native-shadow npm

Question

En mi sitio tengo un título con esta sombra de texto:

h1.title {
text-shadow: -1px 1px 10px rgba(0, 0, 0, 0.75)
}

<h1 class="title">title</h1>

Quiero hacer lo mismo en mi aplicación nativa reaccionar.

He visto las propiedades:

textShadowColor color
textShadowOffset {width: number, height: number}
textShadowRadius number

pero no sé cómo tener el mismo efecto de html.

¿Como lo puedo hacer?

Answer 1

Probé la respuesta del señor Bennygenel y funcionó. Lo usé algo como esto ...

<View>
<Text style={styles.textWithShadow}>Hello world</Text>
</View>

.....

const styles = StyleSheet.create({
textWithShadow:{
textShadowColor: ''rgba(0, 0, 0, 0.75)'',
textShadowOffset: {width: -1, height: 1},
textShadowRadius: 10
}
});

Answer 2

CSS text-shadow tiene la siguiente sintaxis,

text-shadow : h-shadow v-shadow blur-radius color | none | initial | inherit;

Para lograr un efecto similar con el css que proporcionaste, puedes usar algo como esto,

// text-shadow: -1px 1px 10px rgba(0, 0, 0, 0.75)
{
textShadowColor: ''rgba(0, 0, 0, 0.75)'',
textShadowOffset: {width: -1, height: 1},
textShadowRadius: 10
}

Answer 3

<Text style={{color: "white", textShadowColor: ''black'', textShadowOffset: { width: -1, height: 0 },textShadowRadius: 10, fontSize: hp(''2%''), fontWeight: ''800''}}>Online Sports Store to Buy Sports Goods,</Text> Intento así en mi aplicación nativa de reacción