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
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: