Svg is not transparent

[Ghamza-Jd]

Expected Result

I'm trying to make a bottom navigation tab with a notch expected result

Problem

I have a svg which have a transparent background link to the original image
I tested it on the web and here's what it look like link to web image
but when I use it in react native, the transparent part becomes white link to react native image
then I've set the fill to red for a clear view of what's happening fill="red"
The area that should be transparent is colored in white.

[vitto-moz]

The same behaviour :( @Ghamza-Jd have you resolved? Could you share if so, please?

[vitto-moz]

I've the issue resolved with following styling:

  <View style={styles.footerWrap}>
        <Footer preserveAspectRatio="none" width={'100%'} />
      </View>

 footerWrap: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: '100%',
    height: 100,
  },

<svg width="459" height="134" viewBox="0 0 459 134" fill="none" xmlns="http://www.w3.org/2000/svg" > 
<path d="M0 42C176.576 -14.0595 277.09 -13.9398 459 42V134H0V42Z" fill="black"/>
</svg>

[Ghamza-Jd]

@vitto-moz thank you for sharing, I forgot how I solved it at that time, but I remember doing something similar to your solution (tweaking the position and dimension of the component). Also I was using react-native-svg-transformer, to import and use svg files as components.

[WoLewicki]

Could you provide a simple code with reproduction of the issue? It will help us investigate the problem. Or is it already solved?

[bohdanprog]

Hello @Ghamza-Jd @vitto-moz,
If you still have that issue, feel free to open a new issue.
Thank you.