text shadow in react native

user_218377 0
Viewed 63126

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 shadow
5 Answers

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
}
user_23152800

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

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>
user_19736950
  • Please Review Bellow url it is help full for you.
  • this site is shadow output with code.
  • when you update Shadow Depth to automatically manage styles and showing the android and ios output.
  • after you can copy the code and paste from your style like below example.

for EX:-

<Text 
    style={{
        shadowColor: "#000000",
        shadowOffset: {
          width: 0,
          height: 3,
        },
        shadowOpacity:  0.17,
        shadowRadius: 3.05,
        elevation: 4,
      }}
    >
    This Is Button With Box Shadow
</Text>

enter image description here

=> https://ethercreative.github.io/react-native-shadow-generator/

user_90717740

other methods didn't work well enough for me, this is more simple:-

    <h1  style={{color:'white', textShadow: "0px  0px  10px  black"}}>Your text here </h1>

I hope it helps someone out there!!

user_199536670
Related