Open In App

Create a Text Editor App using React-Native

Last Updated : 06 Nov, 2023
Like Article

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:




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


// 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 (
                {/* KeyboardAvoidingView to 
                    handle keyboard behavior */}
                        Platform.OS ==="ios"? "padding": "height"}
                    style={{ flex: 1 }}>
                    {/* Text component for 
                        the app title */}
                    <Text style={{ color: "green",
                                   fontSize: 30,
                                   marginTop: 50,
                                   borderRadius: 10,
                                   textAlign: "center",}}>
                        GFG Text Editor
                    {/* RichToolbar component 
                    for text formatting actions */}
                    <RichToolbar style={{ marginTop: 10}}
                        // Connect the RichToolbar 
                        // to the RichEditor
                        actions={[ actions.setBold,
                        // Define available text 
                        // formatting actions
                        iconMap={{[actions.heading1]:handleHead,}} />
                    {/* Text component for 
                        description */}
                    <Text style={{ fontFamily: "monospace",
                                   fontWeight: 900,
                                   fontSize: 15,
                                   padding: 10}}>
                    {/* RichEditor component 
                        for text editing */}
                    <RichEditor ref={richText}
                                onChange={(descriptionText) => {
                            // Handle the change in
                            // the editor's content
                            console.log("descriptionText:",descriptionText);}} />
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



Final Output

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads