react-native-rich-editor
react-native-rich-editor copied to clipboard
wxik
RichtoolBar causing warning: To fix, cancel all subscriptions and asynchronous task in the componentWillUnmount method
When I use the toolbar and then go back to the previous screen the warning comes out, but if i dont, this warning doesnt come out, i dont know why its causing this, this is my toolbar:
<RichToolbar editor = {this.richText} onPressAddImage = {this.insertImage} actions = {[ actions.insertBulletsList, actions.insertOrderedList, actions.insertImage, "change_text_color", ]} iconMap ={{ [actions.insertBulletsList]: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-list-bulleted" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>, [actions.insertOrderedList]: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-list-numbered" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>, [actions.insertImage]: () => <Text style = {this.styles.icon}><MaterialIcons name = "image" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>, change_text_color: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-color-text" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>, }} change_text_color = {this.change_color} style = {{backgroundColor: backgroundColor, borderTopWidth: 1}}> </RichToolbar>
@ydhnwb, I asked to friends, and they told me that it might be an internal problem, nothing serious, I already created the apk and using the app don't have any issue
The problem with me is, my program crash every I go back from a page that contains RichToolbar.
We have the same problem. Sometimes my app crashes when I enter the page that has it.
I have temporary fix, i need to put rich editor and rich toolbar inside a modal
@ydhnwb @ariesbrylle-bms, when you guys scroll the text gets highlighted?
no, mine doesn't highlight. I think I found a way not to crash the app. What causes it is the toolbar so I waited for the RichEditor to be loaded before I load the toolbar.
{mounted == true ? ( <RichToolbar editor={richText} ... /> ) : null}
This is how I did it -- the text doesn't get highlighted when I scroll.
<ScrollView style={{ height: 300 }} keyboardDismissMode={"none"}> <InsertLinkModal onCancel={() => onCancel()} onDone={(title, url) => onLinkDone(title, url)} isVisible={modalVisible} /> <RichEditor ref={richText} useContainer={false} containerStyle={{ minHeight: height, height: height, width: "100%", borderWidth: 1, borderColor: CONSTANTS.LIGHT_BG_COLOR, }} editorStyle={{ backgroundColor: "white", borderColor: CONSTANTS.PRIMARY_COLOR, }} placeholder="Type your action here." editorInitializedCallback={editorInitializedCallback} onHeightChange={(e) => { if (e > 300) { setHeight(e); } }} /> </ScrollView>
1.6.0 adjusted Toolbar, removed componentWillUnmount, and added support before editor (not yet released)
I had the same issue. It crashes on android when I try to navigate to another page. The workaround I did was create a loading state and set it as loading before navigating to the other page. Even though It stopped crashing after that it's just a hack.
