I am using lib react-native-svg to display SVG in my mobile app. In iOS, it is showing properly but on android, it shows cutoff. I will also attach a screenshot for reference, Can someone please help me how to solve this problem?
iOS Screenshot iOS Screenshot
Android Screenshot Andriod Screenshot
SVG snap https://jsfiddle.net/vhft358e/
Your SVG has a couple of problems. One is that the viewBox is the wrong size for your picture. It is a lot smaller than the SVG contents. But since the SVG mostly displays, I don't think that's your main problem.
Your SVG uses mask-type: alpha masks. It might be that that is the problem. Maybe they are not properly supported on Android. Or perhaps the parsing and rendering of masks is a bit broken in the Android version of react-native-svg.
Things to try:
Those two masks don't need to be type alpha masks. Remove the style="mask-type: alpha" from both masks, and the SVG will still look the same. Maybe they'll also render correctly then.
Try is modifying your SVG to not use masks. One mask just creates the rounded rectangle outline shape of the icon. That could be changed to a clip. The other mask just cuts out the bottom arch from the bus fender. You could remove the mask by modifying the fender shape, and colour.
