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:

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

Javascript

// App.js
import React from "react";
import { Text, Platform, KeyboardAvoidingView, SafeAreaView, ScrollView}
    from "react-native";
import { actions, RichEditor, RichToolbar }
    from "react-native-pell-rich-editor";

// Custom component for heading1 action
const handleHead = ({ tintColor }) => (
    <Text style={{ color: tintColor }}>H1</Text>
);

const App = () => {

    // Create a reference to the
    // RichEditor component
    const richText = React.useRef();
    return (
        <SafeAreaView>
            <ScrollView>

                {/* KeyboardAvoidingView to
                    handle keyboard behavior */}
                <KeyboardAvoidingView
                    behavior={
                        Platform.OS ==="ios"? "padding": "height"}
                    style={{ flex: 1 }}>

                    {/* Text component for
                        the app title */}
                    <Text style={{ color: "green",
                                   fontSize: 30,
                                   marginTop: 50,
                                   backgroundColor:"lightgrey",
                                   borderRadius: 10,
                                   textAlign: "center",}}>
                        GFG Text Editor
                    </Text>

                    {/* RichToolbar component
                    for text formatting actions */}
                    <RichToolbar style={{ marginTop: 10}}
                                 editor={richText}

                        // Connect the RichToolbar
                        // to the RichEditor
                        actions={[ actions.setBold,
                                   actions.insertBulletsList,
                                   actions.insertOrderedList,
                                   actions.insertLink,
                                   actions.setStrikethrough,
                                   actions.setItalic,
                                   actions.setUnderline,
                                   actions.heading1,]}

                        // Define available text
                        // formatting actions
                        iconMap={{[actions.heading1]:handleHead,}} />

                    {/* Text component for
                        description */}
                    <Text style={{ fontFamily: "monospace",
                                   fontWeight: 900,
                                   fontSize: 15,
                                   padding: 10}}>
                        Description:
                    </Text>

                    {/* RichEditor component
                        for text editing */}
                    <RichEditor ref={richText}
                                onChange={(descriptionText) => {

                            // Handle the change in
                            // the editor's content
                            console.log("descriptionText:",descriptionText);}} />
                </KeyboardAvoidingView>
            </ScrollView>
        </SafeAreaView>
    );
};
export default App;

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

Final Output