requireNativeComponent: "XXX" was not found in the UIManager

[dutzi]

Trying to create my own native module for SVG rendering I'm getting the following error when copying and pasting the FontLoader example:

Uncaught TypeError: Super expression must either be null or a function, not undefined

Update

I've successfully upgraded to RN 0.57.0 and RND 0.5.0 :) Now I'm getting the following error when trying to create and component to replace SVG:

requireNativeComponent: "RNSVGSvgView" was not found in the UIManager.

The code for the native module is:

import { RCTModule } from 'react-native-dom';

export default class RNSVGSvgView extends RCTModule {
  static moduleName = 'RNSVGSvgView';
}

The SVG library I'm using is react-native-svg.

[vincentriemer]

Views are set up a bit differently from modules. The views themselves aren't modules, but their managers are (e.g. there should be a RNSVGSvgView AND a RNSVGSvgViewManager). This parallels the architecture for both iOS and Android native views (with a slightly different API).

If you need an example for that you can look at react-native-video's dom implementation.

[dutzi]

Thanks, that helped a lot!

Now I'm stuck at a point where I have a component that has one native module inside another one (a Path within an Svg):

  <Svg viewBox="0 0 18 17" {...props}>
    <Path d="..." />
  </Svg>

And I need the svg element that is rendered by the Svg native module to contain that path (rendered by the Path native module) but without anything between them.

Right now it looks like this:

Where path is a distant sibling of svg.

And for SVGs to render we need it to look like this:

Where path is a direct descendent of svg.

Is that even possible?

Update:

I was able to hack something up using MutationObserver (by listening to DOM changes in on ui-child-container-view containing the svg element and adding the path elements "manually" to the svg), but now I'm encountering something that looks like a bug in Chrome, where I don't see the svg. It's like it's not even rendered, but if I select the svg in the Elements Panels and choose Edit As HTML and make a small change (add a space character before the <svg) and hit Enter - then I see it. 🤷🏻‍♂️.

Update 2:

Adding this line, after mutating the svg, solved it:

this.childContainer.innerHTML = this.childContainer.innerHTML;

(but probably screwed things up)

[dai-shi]

Oh, I didn't know you had the same issue. I solved it with Shadow DOM. Related issue: https://github.com/dai-shi/react-native-dom-expo/issues/9