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?

Check out the [documentation](https://facebook.github.io/react-native/docs/text-style-props#textshadowoffset) — jchook, Jan 24 '19 at 03:52
You can add a shadow to a `` by the following format `textShadowColor: '#000', textShadowOffset: { width: 0.5, height: 0.5 }, textShadowRadius: 1,` — Vishnu T B, May 06 '19 at 06:31

score 121 · Answer 1 · answered Oct 01 '17 at 10:34

121

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
}

answered Oct 01 '17 at 10:34

bennygenel

23,896
6
65
78

4

A note to anybody still having trouble getting the text shadow to show - It seems that unlike in CSS you can't have a radius value of 0, try `textShadowRadius: 1` At least in Android this seems true, I haven't tried ios. – Hastig Zusammenstellen Jun 13 '18 at 14:45
2

Has anyone figured out how to stop the edge of the shadow being cut off by the edges of the text box? I have tries overflow:visible on it and all its parents but no luck. – James Trickey Nov 12 '18 at 00:43
2

@JamesTrickey, try adding some padding – yernarun Feb 15 '19 at 14:34

score 24 · Answer 2 · answered May 24 '18 at 07:59

24

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

answered May 24 '18 at 07:59

Rufo Gabrillo Jr

273
2
2

4

Is this really useful? You've basically copied and pasted the previous answer. Maybe you should post your revisions as a comment on the above answer. – Claire May 24 '18 at 08:27
6

Thanks. I tried that also but i cant write a comment. It says i must have at least 50 reputations. This won't happen again, sorry. – Rufo Gabrillo Jr May 24 '18 at 09:10

score 7 · Answer 3 · edited Feb 08 '20 at 17:12

7

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>

edited Feb 08 '20 at 17:12

sajad abbasi

1,988
2
22
43

answered Nov 01 '18 at 11:38

Ravindra

113
1
6

Sagar Kachhadiya · Answer 4 · 2022-06-15T12:59:19.730

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>

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

score -1 · Answer 5 · answered Sep 08 '22 at 23:12

-1

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

answered Sep 08 '22 at 23:12

Zeyad Elgendi

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 16 '22 at 00:50
This is html where the user is looking for react-native – Jonathan Coletti Mar 10 '23 at 01:36

text shadow in react native

5 Answers5