How to cast a shadow of a path element?

[ptrtdrv]

I have the following working svg image:

I want to translate that code to react-native-svg. The image consists of two elements - an ellipse and a path. Both have shadows implemented with filters. The ellipse's shadow is rendering well, but the path's shadow is missing. Their filters are identical. This is the translated source code:

    <Svg width="375" height="116" viewBox="0 0 375 116" fill="none">
      <G filter="url(#filter0_d_150_10240)">
        <Path fillRule="evenodd" clipRule="evenodd" d="M0.0339355 55.7207C0.0339355 44.675 8.98824 35.7207 20.0339 35.7207H130.291C139.937 35.7207 148.161 42.6439 151.263 51.7777C154.798 62.1913 160.639 74.7249 169.28 79.7655C175.182 83.2087 194.039 89.8791 210.311 77.1555C216.402 72.3924 221.885 60.1612 225.56 50.2143C228.683 41.7632 236.54 35.7207 245.55 35.7207H355.034C366.08 35.7207 375.034 44.675 375.034 55.7207V116.505H0.0339355V55.7207Z" fill="white"/>
      </G>
      <G filter="url(#filter1_d_150_10240)">
        <Ellipse cx="188" cy="47.3332" rx="30" ry="30.2941" fill="#7265E3"/>
      </G>
      <Defs>
        <Filter id="filter0_d_150_10240" x="-29.9661" y="0.720703" width="435" height="140.784" filterUnits="userSpaceOnUse" >

          <FeFlood floodOpacity="0" result="BackgroundImageFix"/>
          <FeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
          <FeOffset dy="-5"/>
          <FeGaussianBlur stdDeviation="15"/>
          <FeColorMatrix type="matrix" values="0 0 0 0 0.176471 0 0 0 0 0.192157 0 0 0 0 0.258824 0 0 0 0.101961 0"/>
          <FeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_150_10240"/>
          <FeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_150_10240" result="shape"/>
        </Filter>
        <Filter id="filter1_d_150_10240" x="143" y="7.03906" width="90" height="90.5884" filterUnits="userSpaceOnUse">
          <FeFlood floodOpacity="0" result="BackgroundImageFix"/>
          <FeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
          <FeOffset dy="5"/>
          <FeGaussianBlur stdDeviation="7.5"/>
          <FeColorMatrix type="matrix" values="0 0 0 0 0.447059 0 0 0 0 0.396078 0 0 0 0 0.890196 0 0 0 0.501961 0"/>
          <FeBlend mode="normal" in2="BackgroundImageFix" result="effect2_dropShadow_150_10240"/>
          <FeBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_150_10240" result="shape"/>
        </Filter>
      </Defs>
    </Svg>

The reason for not rendering the shadow is probably because "FeBlend" and/or "FeFlood" are not entirely implemented as the terminal log warns:

 (NOBRIDGE) WARN  Some of the used filters are not yet supported on native platforms. Please check the USAGE.md for more info. Not implemented filters:
 [
  "FeBlend",
  "FeComponentTransfer",
  "FeComposite",
  "FeConvolveMatrix",
  "FeDiffuseLighting",
  "FeDisplacementMap",
  "FeDropShadow",
  "FeFlood",
  "FeFuncA",
  "FeFuncB",
  "FeFuncG",
  "FeFuncR",
  "FeImage",
  "FeMorphology",
  "FePointLight",
  "FeSpecularLighting",
  "FeSpotLight",
  "FeTile",
  "FeTurbulence"
] [Component Stack]

"react-native-svg": "15.8.0"
"expo": "~52.0.9"

Can you suggest any alternative solution to the problem, please?

P.S. I just saw that from "15.9.0" FeDropShadow filter is supported but haven't tried it yet. Unfortunately the current expo version (52.0.23) is shipped with react-nateive-svg: 15.8.0 and I don't know how to upgrade the library only.

[ptrtdrv]

Actually, the shadow is rendered. I don't know what's the initial reason why it wasn't there, but now it's working. Excuse me for bothering you!

[jakex7]

No problem! I'm glad that it's working for you 🚀

[jakex7]

To use the latest version of the library with Expo, you'll need to install the latest version and run an Expo prebuild to generate the new native bundle. You can find more information here: https://docs.expo.dev/workflow/continuous-native-generation/