Editor not working on Expo SDK 51

[francosion042]

I just upgraded to the new Expo SDK 51 and the editor is no longer working.

[segun-flexible]

same issue am facing

[5starkarma]

Any updates?

[spacester7563]

Go to your package-lock.json then search using ctrl + f and search "react-native-pell-rich-editor" then change the react-native-webview version to "^13.10.2" as shown in image below then run npm install it will fix your problem.

[5starkarma]

@spacester7563 Doesn't work. Thanks for trying though.

[hoangann2000]

@5starkarma Have you resolved the error yet, I had the same problem

[5starkarma]

@hoangann2000 No, I haven't had time to look into it so I am stuck on Expo 50 until I do have time. If you figure it out please leave a comment here with the solution.

[sajjadjaved01]

I was faceing this same issue on expo sdk 51, some how resolved it.

Yon can try the following:
Try removing Remove ScrolllView.
Try running multiple times the project.

<SafeAreaView style={styles.fullScreen}> <KeyboardAvoidingView style={styles.keyboardAvoidingView} behavior={Platform.OS === "ios" ? "padding" : "height"} > <RichEditor ref={edit} style={styles.container} initialContentHTML="Hello <b>World</b>" /> </KeyboardAvoidingView> </SafeAreaView>

heres my code its working.
Also you have to adjust the height of the editor if not showing.

[spacester7563]

@sajjadjaved01 will this work for ios ?
and where is RichToolbar in your code ?

[sajjadjaved01]

Yes this code is working on IOS, and i have implemented the toolbar after this. and is working. @spacester7563

ITS WORKING WHEN YOU RUN ON DEVICE (Not with Expo Go)

<RichToolbar actions={[ actions.keyboard, actions.undo, actions.redo, actions.setBold, actions.setItalic, actions.setUnderline, actions.setStrikethrough, actions.insertOrderedList, actions.blockquote, actions.alignLeft, actions.alignCenter, actions.alignRight, actions.code, actions.line, actions.foreColor, actions.hiliteColor, actions.heading1, actions.heading4, "insertHTML", "fontSize", ]} iconMap={{ [actions.foreColor]: () => ( <Text style={[styles.tib, { color: "blue" }]}>FC</Text> ), [actions.hiliteColor]: ({ tintColor }: IconRecord) => ( <Text style={[styles.tib, { color: tintColor, backgroundColor: "red" }]} > BC </Text> ), [actions.heading1]: ({ tintColor }) => ( <Text style={[styles.tib, { color: tintColor }]}>H1</Text> ), [actions.heading4]: ({ tintColor }: IconRecord) => ( <Text style={[styles.tib, { color: tintColor }]}>H4</Text> ), insertHTML: ({ tintColor }) => ( <Text style={[styles.tib, { color: tintColor }]}>HTML</Text> ), }} insertHTML={handleInsertHTML} getEditor={() => edit.current} ></RichToolbar>

[vinodsptharsha]

Do you know if anyone has been able to patch this issue as a temporary quick fix??

[goat-io]

Had the same issue, seems to be related to WebView and a specific property that got removed for IOS somewhere down the line.
I managed to use it without a problem in IOS and expo51 by patching the library with patch-package
Here is the patch

🚨Warning: Im not sure if this breaks other functionalities that may depend on it! I just use this editor for basic rich text editing.

diff --git a/node_modules/react-native-pell-rich-editor/src/RichEditor.js b/node_modules/react-native-pell-rich-editor/src/RichEditor.js
index 14bea22..792147f 100755
--- a/node_modules/react-native-pell-rich-editor/src/RichEditor.js
+++ b/node_modules/react-native-pell-rich-editor/src/RichEditor.js
@@ -267,7 +267,6 @@ export default class RichTextEditor extends Component {
           ref={that.setRef}
           onMessage={that.onMessage}
           originWhitelist={['*']}
-          dataDetectorTypes={'none'}
           domStorageEnabled={false}
           bounces={false}
           javaScriptEnabled={true}

[vinodsptharsha]

Had the same issue, seems to be related to WebView and a specific property that got removed for IOS somewhere down the line. I managed to use it without a problem in IOS and expo51 by patching the library with patch-package Here is the patch

🚨Warning: Im not sure if this breaks other functionalities that may depend on it! I just use this editor for basic rich text editing.

diff --git a/node_modules/react-native-pell-rich-editor/src/RichEditor.js b/node_modules/react-native-pell-rich-editor/src/RichEditor.js
index 14bea22..792147f 100755
--- a/node_modules/react-native-pell-rich-editor/src/RichEditor.js
+++ b/node_modules/react-native-pell-rich-editor/src/RichEditor.js
@@ -267,7 +267,6 @@ export default class RichTextEditor extends Component {
           ref={that.setRef}
           onMessage={that.onMessage}
           originWhitelist={['*']}
-          dataDetectorTypes={'none'}
           domStorageEnabled={false}
           bounces={false}
           javaScriptEnabled={true}

This saved me tons of work hours!! Thank you. I had almost migrated to https://10play.github.io/10tap-editor/docs/intro.

[aldiand]

you can do this also

diff --git a/node_modules/react-native-webview/apple/RCTConvert+WKDataDetectorTypes.h b/node_modules/react-native-webview/apple/RCTConvert+WKDataDetectorTypes.h
new file mode 100644
index 0000000..8ba640a
+++ b/node_modules/react-native-webview/apple/RCTConvert+WKDataDetectorTypes.h
@@ -0,0 +1,11 @@
+#import <WebKit/WebKit.h>
+
+#import <React/RCTConvert.h>
+
+#if TARGET_OS_IPHONE
+@interface RCTConvert (WKDataDetectorTypes)
+
++ (WKDataDetectorTypes)WKDataDetectorTypes:(id)json;
+
+@end
+#endif // TARGET_OS_IPHONE
\ No newline at end of file
diff --git a/node_modules/react-native-webview/apple/RCTConvert+WKDataDetectorTypes.m b/node_modules/react-native-webview/apple/RCTConvert+WKDataDetectorTypes.m
new file mode 100644
index 0000000..975c2ea
--- /dev/null
+++ b/node_modules/react-native-webview/apple/RCTConvert+WKDataDetectorTypes.m
@@ -0,0 +1,27 @@
+#import <WebKit/WebKit.h>
+
+#import <React/RCTConvert.h>
+
+#if TARGET_OS_IPHONE
+
+@implementation RCTConvert (WKDataDetectorTypes)
+
+RCT_MULTI_ENUM_CONVERTER(
+     WKDataDetectorTypes,
+     (@{
+       @"none" : @(WKDataDetectorTypeNone),
+       @"phoneNumber" : @(WKDataDetectorTypePhoneNumber),
+       @"link" : @(WKDataDetectorTypeLink),
+       @"address" : @(WKDataDetectorTypeAddress),
+       @"calendarEvent" : @(WKDataDetectorTypeCalendarEvent),
+       @"trackingNumber" : @(WKDataDetectorTypeTrackingNumber),
+       @"flightNumber" : @(WKDataDetectorTypeFlightNumber),
+       @"lookupSuggestion" : @(WKDataDetectorTypeLookupSuggestion),
+       @"all" : @(WKDataDetectorTypeAll),
+     }),
+     WKDataDetectorTypeNone,
+     unsignedLongLongValue)
+
+@end
+
+#endif // TARGET_OS_IPHONE
\ No newline at end of file

[almirfilho]

Had the same issue, seems to be related to WebView and a specific property that got removed for IOS somewhere down the line. I managed to use it without a problem in IOS and expo51 by patching the library with patch-package Here is the patch

🚨Warning: Im not sure if this breaks other functionalities that may depend on it! I just use this editor for basic rich text editing.

diff --git a/node_modules/react-native-pell-rich-editor/src/RichEditor.js b/node_modules/react-native-pell-rich-editor/src/RichEditor.js
index 14bea22..792147f 100755
--- a/node_modules/react-native-pell-rich-editor/src/RichEditor.js
+++ b/node_modules/react-native-pell-rich-editor/src/RichEditor.js
@@ -267,7 +267,6 @@ export default class RichTextEditor extends Component {
           ref={that.setRef}
           onMessage={that.onMessage}
           originWhitelist={['*']}
-          dataDetectorTypes={'none'}
           domStorageEnabled={false}
           bounces={false}
           javaScriptEnabled={true}

@goat-io Thank you very much! This fixed it for me in Expo SDK 51.
Interestingly, this seems to be an issue only on development builds (expo-dev-client). It does not crash in Production builds. ¯_(ツ)_/¯

[eduardo-santos-tribia]

I'm also having this issue and I'm not using Expo. I'm on the latest react-native version 0.74.2.

The fix provided by @goat-io worked for my project as well, but I also don't know the impact of this fix.