vincentriemer / react-native-dom

An experimental, comprehensive port of React Native to the web.
https://rntester.now.sh
MIT License
3.25k stars 73 forks source link

requireNativeComponent: "XXX" was not found in the UIManager #98

Open dutzi opened 5 years ago

dutzi commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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:

screen shot 2019-02-18 at 23 38 33

Where path is a distant sibling of svg.

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

screen shot 2019-02-18 at 23 41 57

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 commented 5 years ago

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