Why doesn't my svg in react-native show any shadow?

user_8502436 0
Viewed 4848

The Problem:

I have a react native project which uses react-native-svg for importing my logos. I created my custom Bottom Tab Bar with react-navigation and it looks like this:

My App

So the problem is just I exported my svg when it looks like this in my adobe xd file (just the purple button):

xd

So you can see, there is clearly a shadow but not in my project. What am I doing wrong?

I use the component like this:

import Logo from "../assets/icons/add_icon.svg"

And then render it with <Logo />

Here is the svg (btw when I open it with browser it shows the shadow): https://pastebin.com/w9YZysgS

Why is there no shadow in my app? (also shadow styles won't work when applied directly).

Specs:

  • Android
  • Windows
  • React-Native 0.62 (latest)

Thank you very much in advance

react-native reactjs svg
1 Answers

This is not really a coding fix, but before you could make the shadow a radial gradient object of the same shape as opposed to a shadow in the design.

user_147180000
Related