This is a short introduction to building a most straightforward Rich Text Editor for React Native yourself. You’ll find an example of source code that illustrates a basic idea of making Rich Text Editor and an essential technic behind it.
The story began when I was looking for a simple Rich Editor control on iOS and Android for a Flashside project I was involved in.
All I found was either too heavy or outdated – nothing I could consider using for my needs. So I decided to build my own Rich Editor component for React Native.
I invite you to learn more on pretty simple technology and approach hoping it may bring you further in building something helpful for other people.
Long story short – here is the source code illustrating the idea.
And we begin with the most central point of all 99% of rich editors I know – with the DIV.
The very basic implementation of the Rich Editor looks like this:
That part of the code let the HTML block act as a text field with rich text formatting. Try it out on a simple blank HTML page to experience the full power of it.
The rest of the solution is just about plugging that DIV into your own application.
To make it possible, we’ll need to add WebView – the second most remarkable thing in this example.
$ yarn add react-native-webview
Basically, that would be already sufficient – add WebView to your screen and inject HTML code above into it, but we’ll need some way to read the user’s input from the Web Page and send it back to the Web Page. This is where the most effort is put.
The picture below demonstrates how the communication between WebView and Web Page is done.
That’s it; the rest files are just helpers.
By the way, I’m attaching a couple of screenshots below to show how it looks like.
In iOS there is already a formatting toolbar available out of the box to make the text bold, italic, or underline. In Android, it’s not there by default, so you may need to implement your own.
It’s pretty easy and straightforward though, check out App.tsx to prove it yourself.
And lastly, if you can recommend any excellent Rich Editor component for React – please let me know; I’d be happy to hear back from you.