Create a Text Editor App using React-Native

In this article, we are going to implement a text editor app using React Native. It will contain multiple text formatting functionalities like bold, italic, underline, etc. We will implement Editor with a library called "react-native-pell-rich-editor."

Preview of final output: Let us have a look at how the final output will look like:

👁 Screenshot_2023-10-30-16-27-30-02_f73b71075b1de7323614b647fe394240-(1)

Prerequisites

• React Native
• React Native components.
• NPM (Node Package Manager)

Approach

In this approach, we've created a React Native application for a text editor with rich text formatting capabilities. Here's a breakdown of the important parts:

• We import necessary components and libraries, including `Text`, `Platform`, `KeyboardAvoidingView`, `SafeAreaView`, `ScrollView`, `actions`, `RichEditor`, and `RichToolbar`.
• We define a custom component `handleHead` for the "heading1" action, which allows us to customize the appearance of the action button.
• The `App` component is created, and we set up a reference (`richText`) to the `RichEditor` component to interact with it.
• Within the app, we use `SafeAreaView`, `ScrollView`, and `KeyboardAvoidingView` to handle various UI elements, ensuring they work well on different devices and handle keyboard behavior.
• We provide a simple user interface with an app title, description, and the `RichEditor` component for text editing. The `onChange` event allows us to capture changes in the editor's content.
• The `RichToolbar` component offers a set of text formatting actions, including bold, italic, underline, and heading1. We connect it to the `RichEditor` and provide a custom component (`handleHead`) for the "heading1" action.

Steps to Create & Configure React Native App:

Step 1: Create a new React Native project.

npx react-native init TextEditorApp

Step2: Navigate to the project directory:

 cd TextEditorApp

Step 3: Install the Library "react-native-pell-editor"

 npm install react-native-pell-rich-editor --save

Example: Write the following code in App.js file

Steps to Run Application:

Step 1: To run the app in an iOS simulator or on a connected iOS device:

 npx react-native run-ios

Step 1 :To run the app in an Android emulator or on a connected Android device:

 npx react-native run-android

Output