Implementing a Rich Text Editor in React Native

It took me quite a while to get the hang of Rich Text Editor in React Native. The documentation is simply not sufficient and leaves a lot to explore by self, which is not ideal if you are on a time crunch.

This tutorial will give you a head start in understanding the documentation of React Native Rich Text Editor better. I might not explain each and every property if they are clearly mentioned in the documentation. The main aim is to help you integrate a Rich text editor in your react-native app.

The Setup

Install react-native-pell-rich-editor library along with react-native-webview since it is a dependency.

npm i react-native-pell-rich-editor react-native-webview

Then, you would need react-native-htmlview since the editor will save the content that you write as HTML content and you would need this to render it as native views.

npm i react-native-htmlview

Rich Editor

Now we’ll create the editor component. The RichEditor component will be used to create a fully functional Rich text Editor. An example usage is as follows:

ref is used to referring to the RichEditor component and we will require it while creating our toolbar. setArticle is used to change the state article which would keep track of what is being written in the editor. editorInitializedCallback is a function that will be called when the editor is initialised. handleHeightChange is a callback when the height of the editor container changes.

The component will look something like this:

The Rich Editor

Rich Toolbar

Now to edit the content we need a toolbar. Thus, we’ll be using RichToolbar component that provides a toolbar for easily controlling an editor. It is designed to be used together with a RichEditor component. An example usage is as follows:

The editor is used to provide ref to a RichEditor component. onPressAddImage function is called when the addimage actions are tapped. actions is an array of actions that are provided by the toolbar, they can either be default or customised. There are also a few actions like setStrikethrough provided by actions(not to be confused with the array actions) member of the library. You can create your own actions and for that, you’ll need to create your own function and link it to the action as shown in line 24. iconMap is used to define the icons of self-made actions.

HTML View

The editor stores HTML content in the article state. In order to render it as native view, we need to use React Native HTMLView.

End Result

Finally, below is the end result:

Fully functional Text editor

The complete code:

I hope you found the tutorial useful!