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.

[dariodaich]

Impact of the patch

dataDetectorTypes prop controls which data types WebView component will parse as special, and render them as links (docs).

By default, only phone numbers are detected as special. It might cause a UX problem for your app if you expect your users to input phone number frequently as the react-native-webview will format them as links and users will be able to click them.

This is not a react-native-rich-editor, but a react-native-webview issue.

[janspoerer]

The error persists after upgrading to react-native-webview": "13.10.4".

I cannot find any occurrence of dataDetectorTypes in node_modules nor anywhere else in the code, so this does not seem to be a viable option for all cases.

[nitrique]

Hi, fixed on my side with react-native-webview 13.12.3