SvgXml inside react native storybook for web

Question

I'm implementing StoryBook in a react-native project and running it on the web and mobile with that design:

https://storybook.js.org/addons/@storybook/addon-react-native-web

https://github.com/dannyhw/addon_react_native_web_example.

https://github.com/dannyhw/react-native-template-storybook/tree/main/template

I tried to show on the web a component that uses 'SvgXml':

import { SvgXml } from 'react-native-svg';

export const SignatureSvgs3: ComponentStory<any> = args => <SvgXml xml={xmlData} />;

My main.js

module.exports = {
  stories: ['../src/stories/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-reanimated'],
        babelPlugins: ['react-native-reanimated/plugin'],
      },
    },
  ],
  framework: '@storybook/react',
};

But I got an error "Cannot read properties of undefined (reading 'displayName')"

I tried to follow this: https://github.com/storybookjs/storybook/issues/6188

solution without any luck.

I can see that on mobile but not on the web

If someone handle it before I will be more than happy for the help

Edit for Danny: I took your repo https://github.com/dannyhw/addon_react_native_web_example and changed FavoriteIcon.stories.tsx to:

import React, {ReactElement} from 'react';
import {View} from 'react-native';
import {SvgXml} from 'react-native-svg';


const wirelessNetworkXML = (
  height: number,
  width: number,
) => `<?xml version="1.0" encoding="UTF-8"?>
<svg width="${width}" height="${height}" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="24" height="24" transform="translate(0 0.318359)" fill="transparent" fill-opacity="0.01" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 18.3184H5.25V22.0684H3.75V18.3184ZM9 22.0684H10.5V13.0684H9V22.0684ZM14.25 22.0684H15.75V7.81836H14.25V22.0684ZM19.5 2.56836V22.0684H21V2.56836H19.5Z" />
</svg>`;

export const wirelessNetworkIcon = (
  fillColor = 'grey',
  height = 24,
  width = 24,
): ReactElement => (
  <SvgXml
    fill={fillColor}
    xml={wirelessNetworkXML(height, width)}
    style={{height, width}}
  />
);

export const wirelessNetwork = () => (
  <View>
    {wirelessNetworkIcon()}
  </View>
);

export default {
  title: 'components/svgs/general',
};