How do I use locally installed library (npm repo) in ReactNative Webview html?

102 views Asked by At

Context:

I am working on notes app in ReactNative as a side project. After some research I decided to go with quill and Webview for "text" areas of the app.

Expected outcome:

I don't want to use cdn source because notes app not working in offline mode is useless. I want to install quill via yarn and then use it in html source of webview such as:

<WebView
        style={{ width, height }}
        webviewDebuggingEnabled
        allowFileAccessFromFileURLs
        allowFileAccess
        javaScriptEnabled
        allowUniversalAccessFromFileURLs
        source={{
          html: `
          <div id="editor">
          <p>Hello World!</p>
          <p>Some initial <strong>bold</strong> text</p>
          <p><br></p>
          </div>

          <script src="file://${url}"></script>     **<-- This should be quill.js file path**
          
          <script>
            var quill = new Quill('#editor', {      **<-- So I can use this**
              modules: {
                  toolbar: [
                    [{ header: [1, 2, false] }],
                    ['bold', 'italic', 'underline'],
                    ['image', 'code-block']
                  ]
                },
              theme: 'snow'
            });
          </script>
          `,
        }}
      />

Done so far:

I managed to get to the point where I use react-native-fs to link local app storage in phone and get the source files in google chrome debugger

(Webview code is as above)

RNFS.readDir(RNFS.DocumentDirectoryPath).then(result => {
      console.log('GOT RESULT', result)
// The path from log is: "/data/user/0/com.awesomenoteapp/files/BridgeReactNativeDevBundle.js"
      setUrl(result[0].path)
    })

enter image description here

Problem:

I'm stuck at this point, no idea how to link a specific library having path to the bundle. I get two issues in devtools console

  1. This is only visible in devtools when inspecting webview so must be related

Uncaught Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules

  1. Obvious issue pointing to incorrect import

Uncaught ReferenceError: Quill is not defined

How should I do that so the library is linked statically and comes with bundle, not streamed via cdn?

0

There are 0 answers