Introducing react-native-webview-quilljs
A Quill.js Component for React-Native Applications with no Native Code
Introduction
In the process of finding a text editor capable of creating richly styled text for one of my projects, I stumbled upon Quill.js, “… a modern rich text editor built for compatibility and extensibility”. Based on this statement, it seemed perfect for my needs. I also came across react-quill, a React Quill.js component, which wraps vanilla Quill.js for use in React web applications.
Thanks to my past experience developing the react-native-webview-braintree component, I already knew that wrapping React components in a React-Native webview for use in React-Native apps was a viable option for projects that needed to avoid using native code; for example, projects made using Expo.io.
The react-native-webview-quilljs component uses the same techniques discussed in this post in order to make Babel compile the react-quill component and an index file into an index.html file to be imported by a react-native-webview-messaging <WebView/> component. The react-native-webview-messaging component simplifies communication between the react-quill component and it’s wrapping React Native webview.
Both the github and npm pages contain instructions on how to use the component. Also, in addition to the actual project, I create a test application to demonstrate the usage of the editor and view components.
Issues
To note, there is one issue I continue to encounter in using WebViews to wrap React components or even vanilla JS; the wrapped item must be loaded. This is not an instantaneous process, and can take several seconds in some cases. This component shows an activity indicator during the loading process. However, it would be very desirous to preload or stage the component in some way that it is immediately available for use when called upon. Hopefully, someone reading this has some suggestions that they can post in the comments.
Conclusion
I hope whoever uses this component finds it useful, and I would love to hear back from you if you do. I’d also like to hear back from you if you can suggest any improvements.
