text shadow in react native

Question

in my site i have a title with this text shadow:

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

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

I want do the same in my react native app.

I've seen the properties:

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

but I don't knows how to have the same effect of html.

How can I do?

Answer 1

CSS text-shadow has the below syntax,

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

To achieve similar effect with the css you provided you can use something like this,

// 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 2

I tried sir bennygenel's answer and it worked. I used it something like this...

<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      } });