Open francosion042 opened 4 months ago
same issue am facing
Any updates?
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.
@spacester7563 Doesn't work. Thanks for trying though.
@5starkarma Have you resolved the error yet, I had the same problem
@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.
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.
`
<RichEditor ref={edit} style={styles.container} initialContentHTML="Hello World" /> `
heres my code its working. Also you have to adjust the height of the editor if not showing.
@sajjadjaved01 will this work for ios ? and where is RichToolbar in your code ?
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 ), [actions.hiliteColor]: ({ tintColor }: IconRecord) => ( <Text style={[styles.tib, { color: tintColor, backgroundColor: "red" }]}
BC ), [actions.heading1]: ({ tintColor }) => ( <Text style={[styles.tib, { color: tintColor }]}>H1 ), [actions.heading4]: ({ tintColor }: IconRecord) => ( <Text style={[styles.tib, { color: tintColor }]}>H4 ), insertHTML: ({ tintColor }) => ( <Text style={[styles.tib, { color: tintColor }]}>HTML ), }} insertHTML={handleInsertHTML} getEditor={() => edit.current} `
Do you know if anyone has been able to patch this issue as a temporary quick fix??
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}
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.
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
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. ¯_(ツ)_/¯
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.
I just upgraded to the new Expo SDK 51 and the editor is no longer working.