editor does not always appear

[iamjon]

Hi,
I have a weird issue with the editor. I load the component, it appears but doesn't load the webview. If I save the code it refreshes and the editor magically appears.
I'm attaching an example, I also noticed if I close the parent component and reopen it, it works as desired.

Screenrecorder-2020-12-29-15-10-26-822.mp4

"react-native": "0.63.2",
"react-native-webview": "11.0.2",
"react-native-pell-rich-editor": "^1.5.3",

[stulip]

I can't see any problems in the video

[iamjon]

at 6 seconds you'll see the component load but there's not editor, it should look the way it does at 25 seconds in with the placeholder

[stulip]

@iamjon You can look at this part of your code

[iamjon]

@stulip I'm sorry I don't understand. Here is my component
import React, { Component } from 'react';
import { View, StyleSheet, Keyboard, TouchableWithoutFeedback, Text, KeyboardAvoidingView } from 'react-native';
import { RichEditor, RichToolbar } from 'react-native-pell-rich-editor';

interface RichTextProps {
defaultHtml: string;
onUpdate: (html) => void;
}

export class RichText extends Component<RichTextProps, any> {
richtext = React.createRef();

constructor(props) {
    super(props);
}


onEditorInitialized = () => {
   console.log('initalised');
}

handleChange = (html) => {
    if (this.props.onUpdate){
        this.props.onUpdate(html);
    }
}

render() {
    return (
        <KeyboardAvoidingView behavior="padding" enabled keyboardVerticalOffset={0} style={styles.keyboardView}>
            <TouchableWithoutFeedback onPress={Keyboard.dismiss} >
                <View style={styles.main}>
                    <RichEditor
                        ref={this.richtext}
                        initialContentHTML={this.props.defaultHtml}
                        placeholder={"PlaceHolder"}
                        editorInitializedCallback={this.onEditorInitialized}
                        onChange={this.handleChange}
                    />
                </View>
            </TouchableWithoutFeedback>
            <View style={styles.toolbarWrap}>
                 <RichToolbar getEditor={() => this.richtext.current} />
            </View>
        </KeyboardAvoidingView>
    );
}

}

[stulip]

I put this code in. In the example of this project, your situation does not appear

[Andrea-Arguello]

I am also experiencing this issue. The RicheEditor component will take a while to load. However, for my use case it would suffice if I knew when the component has been mounted already, that way I could place a loader in the meantime.

[iamjon]

I didn't think of that. Good call. I'll have to investigate further. I think the following functions might help. The webview functions can be passed as props from the RichEditor.
onEditorInitialized = () => { console.log('initalised'); }

might work

webview functions that can help:

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#methods

mainly onloadprogress https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onloadprogress

and onloadend
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onloadend

and renderloading +startInLoadingState
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#renderloading

[Andrea-Arguello]

I ended up setting a state variable called “loaded” that changes to true when onEditorInitialized is called. Hope this helps.

[iamjon]

So in my case it was being caused this line in RichEditor.js

const opacity = that.state.isInit ? 1 : 0;

I used patch package and set the opacity to 1 and it started working all the time.

[iamjon]

@stulip is this something you want to examine further or can I close the issue?

[cuongnv40]

Hi,
I have a weird issue with the editor. I load the component, it appears but doesn't load the webview. If I save the code it refreshes and the editor magically appears.
I'm attaching an example, I also noticed if I close the parent component and reopen it, it works as desired.

Screenrecorder-2020-12-29-15-10-26-822.mp4
"react-native": "0.63.2",
"react-native-webview": "11.0.2",
"react-native-pell-rich-editor": "^1.5.3",

Today i get same issue, tks for your question.

[franklinatdn]

I've got same issue, and I set the opacity = 1 that is working well.

[stulip]

A patch version 1.8.7 is released to fix the problem of non-representation caused by this transparency