TextEditor.js

import React, { Component } from 'react';
import { View, } from 'react-native';
import { RichToolbar, RichEditor, actions, defaultActions, getContentHtml } from 'react-native-pell-rich-editor';
import { ScrollView } from 'react-native-gesture-handler';

class TextEditor extends React.Component {
  constructor(props) {
    super(props);

  }
 
  onEditorInitialized = () => {
    if (!this.state.data) {
      this.richtext.insertHTML("<p>Details</p>");
    }
  }
  handleCustomAction = (value) => {
   // this.richtext.insertHTML("<p class='uncheckbox' value='0'  data-check='false' ><input type='checkbox'  value='1' style='width:20px'  />TEsT</p>");
    this.richtext.insertHTML("<label class='uncheckbox' value='0' data-type='task' data-check='false' ><input type='checkbox'  value='1' style='width:20px'  /><span data-type='checkmark' class='checkmark'></span>งานที่ทำ</label>");

  }
  
  onEnter=()=>{
        this.richtext.insertHTML("<br><p></p><br>");
  }

  render() {
    return (
      
      <View style={{ width: '100%', height: '100%', paddingTop: 30 }}>
        <ScrollView>
          <RichEditor
            ref={(r) => this.richtext = r}
            javaScriptEnabledAndroid={true}
            initialContentHTML={this.state.data}
            onChange={this.onChange}
            editorInitializedCallback={() => this.onEditorInitialized()}
          />
        </ScrollView>

        <RichToolbar getEditor={() => this.richtext} actions={[
          actions.setBold,
          actions.setItalic,
          actions.insertBulletsList,
          actions.insertOrderedList,
            'customAction','customAction2',]} iconMap={{ customAction: require('./../assets/icon/icon_format_checkbox.png'),customAction2: require('./../assets/icon/icon_format_return.png') }} customAction={this.handleCustomAction} customAction2={this.onEnter} />
     
      </View>
    );
  }

}

export default TextEditor;