Search code examples
javascriptreact-nativebindjavascript-objectsshim

Is it possible to write a shim for a existing library that uses `document` and still keep it pristine?

I'm importing a library into a ReactNative project that uses document roughly 50 times. Because ReactNative, doesn't use a document, I will have to rewrite these lines in order for it to work in a ReactNative environment. The question is..

Is it possible to create a shim so that the original library is fully intact?

I would have to rewrite lines like document.body, document.createElement and document.appendElement . I guess document.body could just be my root container class, and the other two methods are self explanatory.

Because I've never seen anything like this before, I'm only guessing. Would be possible to import the library, and then bind document as a ReactNative component so that the component replaces the document in all of its mentions?

The JS file in question.

Solution

  • While it's possible to shim a document object in the global scope, I'd bet good money there is no way you'll get that component to work in React Native. It's too deeply coupled to native browser APIs to be feasible.

    Instead, I would look into running the functionality inside a WebView, or finding an alternative solution to what you're trying to achieve.

    It looks like Kandy, the library you are trying to use, offers iOS and Android SDKs. one solution might be to bridge the native SDKs to React Native.