text shadow in react native

React NativeShadow

React 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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLuca RomagnoliView Question on Stackoverflow
Solution 1 - React NativebennygenelView Answer on Stackoverflow
Solution 2 - React NativeRufo Gabrillo JrView Answer on Stackoverflow
Solution 3 - React NativeRavindraView Answer on Stackoverflow