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
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
Contact Us