Как использовать SVG-Uri в React-native или Expo?

Я скачал expo-svg-uri модуль, чтобы использовать изображение Svg.

Но изображение не получается.

Код, который я не смог:

  <View style = {styles.container}>
    <SvgUri
      width = "200"
      height = "200"
      source = {require("../../image/minigroup.svg")}
    />
  </View>

Failed Image

Original Image

this is my svgfile

<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width = "80" height = "183" viewBox = "0 0 80 183">
    <defs>
        <circle id = "b" cx = "35" cy = "35" r = "35"/>
        <filter id = "a" width = "142.9%" height = "142.9%" x = "-21.4%" y = "-21.4%" filterUnits = "objectBoundingBox">
            <feOffset in = "SourceAlpha" result = "shadowOffsetOuter1"/>
            <feGaussianBlur in = "shadowOffsetOuter1" result = "shadowBlurOuter1" stdDeviation = "5"/>
            <feColorMatrix in = "shadowBlurOuter1" values = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
        </filter>
        <circle id = "d" cx = "35" cy = "34" r = "24"/>
        <filter id = "c" width = "168.8%" height = "168.8%" x = "-28.1%" y = "-28.1%" filterUnits = "objectBoundingBox">
            <feOffset dx = "3" dy = "3" in = "SourceAlpha" result = "shadowOffsetOuter1"/>
            <feGaussianBlur in = "shadowOffsetOuter1" result = "shadowBlurOuter1" stdDeviation = "5"/>
            <feColorMatrix in = "shadowBlurOuter1" values = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
        </filter>
        <circle id = "f" cx = "35" cy = "34" r = "12"/>
        <filter id = "e" width = "208.3%" height = "208.3%" x = "-45.8%" y = "-45.8%" filterUnits = "objectBoundingBox">
            <feOffset dx = "2" dy = "2" in = "SourceAlpha" result = "shadowOffsetOuter1"/>
            <feGaussianBlur in = "shadowOffsetOuter1" result = "shadowBlurOuter1" stdDeviation = "4"/>
            <feColorMatrix in = "shadowBlurOuter1" values = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
        </filter>
    </defs>
    <g fill = "none" fill-rule = "evenodd">
        <text fill = "#646464" font-family = "Bungee-Regular, Bungee" font-size = "20" letter-spacing = "-.375">
            <tspan x = "6.107" y = "163">Point</tspan>
        </text>
        <text fill = "#3D3D3D" font-family = "Bungee-Regular, Bungee" font-size = "20" letter-spacing = "-.375">
            <tspan x = "20.282" y = "140">Tap</tspan>
        </text>
        <g transform = "translate(5 5)">
            <rect width = "70" height = "81" y = "28" fill = "#FFD90D" rx = "12"/>
            <use fill = "#000" filter = "url(#a)" xlink:href = "#b"/>
            <use fill = "#FFD90D" xlink:href = "#b"/>
            <use fill = "#000" filter = "url(#c)" xlink:href = "#d"/>
            <use fill = "#FFD90D" xlink:href = "#d"/>
            <g>
                <use fill = "#000" filter = "url(#e)" xlink:href = "#f"/>
                <use fill = "#FFD90D" xlink:href = "#f"/>
            </g>
        </g>
    </g>
</svg>

У меня нет значения пути, я только рисую все это. Вы говорите, что это возможно?

Пожалуйста, помогите нам много. Заранее спасибо.