text shadow in react native
React NativeShadowReact Native Problem Overview
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?
React Native Solutions
Solution 1 - React Native
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
}
Solution 2 - React Native
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
}
});
Solution 3 - React Native
I try like this in my react native app
<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>