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)
})
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
- This is only visible in devtools when inspecting webview so must be related
Uncaught Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules
- 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?