Inconsistent Loading of CKEditor Text in React Native

I’m using CKEditor in my React Native application to allow users to input formatted text. However, I’m facing an issue where the text doesn’t load consistently.

Sometimes, when I navigate to a screen that has the CKEditor component, the text loads properly. But other times, the text doesn’t load at all or only loads partially.

I’ve tried searching for solutions online but haven’t found anything that addresses this issue specifically.

Has anyone else experienced this problem and found a solution? Is there a specific way I should be implementing CKEditor in React Native to ensure consistent loading of text? Any help would be greatly appreciated.

Adding the present implementation:

import React, { useEffect, useRef } from 'react'
import { useState } from 'react';
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import WebView from 'react-native-webview'
import { ckeditor_url } from '../redux/config/apiConfig'
import { HEIGHT, WIDTH } from '../style/CommonStyles';

const CKEditor = ({ value, onFocus, onChange, openMath }) => {
    const webview = useRef(null);
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        webview?.current?.injectJavaScript(`CKEDITOR.instances.editor1.setData(`${value}`);true`);
    }, [value])

    const onLoad = (a) => {
        try {
            setTimeout(() => {
                webview?.current?.injectJavaScript(`CKEDITOR.instances.editor1.setData(`${value}`);true`);
                setTimeout(() => setLoading(false), 1500)
            }, 1000)
        }
        catch (e) {
            setLoading(false)
        }

    }

    const handleMessage = event => {
        let msgData;
        try {
            msgData = event.nativeEvent.data;
            if (msgData.indexOf('onFocus') === 0) onFocus()
            if (msgData.indexOf('onChange') === 0) onChange(msgData.replace('onChange:', ""));
            if (msgData.indexOf('Math') === 0) openMath(true);

        } catch (err) {
            return;
        }
    };

    const showLoadingIndicator = () => {
        return (
            <View style={styles.activityOverlayStyle}>
                <View style={styles.activityIndicatorContainer}>
                    <ActivityIndicator size="large" animating={true} color="green" />
                </View>
            </View>
        );
    };

    return (
        <WebView
            ref={webview}
            style={{ flex: 1, opacity: 0.99 }}
            source={{ uri: ckeditor_url }}
            onLoadEnd={onLoad}
            onLoadStart={() => setLoading(true)}
            renderLoading={showLoadingIndicator}
            androidLayerType="hardware"
            overScrollMode="never"
            javaScriptEnabled={true}
            originWhitelist={['*']}
            domStorageEnabled={true}
            androidHardwareAccelerationDisabled={true}
            automaticallyAdjustContentInsets={true}
            scrollEnabled={true}
            onMessage={handleMessage}
        />
    )
}

const styles = StyleSheet.create({
    activityIndicatorContainer: {
        alignSelf: 'center',
        backgroundColor: 'white',
        borderRadius: 50,
        padding: 10,
        shadowColor: '#000000',
        shadowOffset: {
            width: 0,
            height: 3
        },
        shadowOpacity: 1.0,
        shadowRadius: 5
    },
    activityOverlayStyle: {
        ...StyleSheet.absoluteFillObject,
        alignContent: 'center',
        borderRadius: 0,
        display: 'flex',
        justifyContent: 'center'
    },
    overlay: {
        backgroundColor: '#2228',
        height: HEIGHT * 100,
        position: 'absolute',
        width: WIDTH * 100,
        zIndex: 1000,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

export default CKEditor