Select Page

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:

<div contenteditable="true"></div>

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.

React Native – communication between WebView and Web Page

The code in files rich-editor.tsx and rich-editor-communicator.tsx solve that part.

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.

Take care!
Ievgen