upgrade react native webview

Author: DaniAkash

ReactNativeDraftjsExample/App.js

@@ -6,13 +6,14 @@
  * @flow
  */
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   SafeAreaView,
   StyleSheet,
   TouchableOpacity,
   View,
-  Text
+  Text,
+  Platform
 } from "react-native";
 import KeyboardSpacer from "react-native-keyboard-spacer";
 import RNDraftView from "react-native-draftjs";
@@ -72,6 +73,10 @@ const App = () => {
   const _draftRef = React.createRef();
   const [activeStyles, setActiveStyles] = useState([]);
   const [blockType, setActiveBlockType] = useState("unstyled");
+  const [editorState, setEditorState] = useState("");
+
+  const defaultValue =
+    "<h1>A Full fledged Text Editor</h1><p>This editor is built with Draft.js. Hence should be suitable for most projects. However, Draft.js Isn’t fully compatible with mobile yet. So you might face some issues.</p><p><br></p><p>This is a simple implementation</p><ul>  <li>It contains <strong>Text formatting </strong>and <em>Some blocks formatting</em></li>  <li>Each for it’s own purpose</li></ul><p>You can also do</p><ol>  <li>Custom style map</li>  <li>Own css styles</li>  <li>Custom block styling</li></ol><p>You are welcome to try it!</p>";
 
   const editorLoaded = () => {
     _draftRef.current && _draftRef.current.focus();
@@ -85,12 +90,22 @@ const App = () => {
     _draftRef.current && _draftRef.current.setBlockType(blockType);
   };
 
+  useEffect(() => {
+    /**
+     * Get the current editor state in HTML.
+     * Usually keep it in the submit or next action to get output after user has typed.
+     */
+    setEditorState(_draftRef.current ? _draftRef.current.getEditorState() : "");
+  });
+  console.log(editorState);
+
   return (
     <SafeAreaView style={styles.containerStyle}>
       <RNDraftView
+        defaultValue={defaultValue}
         onEditorReady={editorLoaded}
         style={{ flex: 1 }}
-        placeholder={"Some placeholder Text..."}
+        placeholder={"Add text here..."}
         ref={_draftRef}
         onStyleChanged={setActiveStyles}
         onBlockTypeChanged={setActiveBlockType}
@@ -101,7 +116,7 @@ const App = () => {
         toggleStyle={toggleStyle}
         toggleBlockType={toggleBlockType}
       />
-      <KeyboardSpacer />
+      {Platform.OS === "ios" ? <KeyboardSpacer /> : null}
     </SafeAreaView>
   );
 };

ReactNativeDraftjsExample/android/app/build.gradle

@@ -208,3 +208,7 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+project.afterEvaluate {
+    apply from: '../../node_modules/react-native-draftjs/copyHtml.gradle';
+    copyEditorHtmlToAppAssets(file('../../node_modules/react-native-draftjs'))
+}