Swiper slider not working unless page is resized

I experienced the same issue as described here javascript - Swiper slider not working unless page is resized - Stack Overflow with Swiper Element, however none of the proposed solutions were working.

The Swiper navigation element would not change on intial render, and only after a resize of the window would it show up.

I tried adding a resizeObserver but it also did not fire for the initial resize of a wrapper div. I then tried adding a small delay before initializing the swiper and it worked, however it is not a proper soution.

I also referred to the blog entry Using Swiper Element In React, especially the section: Custom Wrapper Component

I discovered that as my slide data was loaded asynchronously and as the delay seemed to work all I had to do was re-initialize the swiper component when the slide data was available.

I adapted the wrapper for React Native as follows, adding two properties ‘updateProps’ and ‘slidesLoaded’, the use of any of the two solving my problem:

export const Swiper: React.FC<ISwiperProps> = React.forwardRef((props, ref) => {

    const swiperRef = useCombinedRefs(ref, useRef<any>());    
    const {
    } = props;

    useEffect(() => {
    }, []);

    useEffect(() => {

        const params: ISwiperProps = {
        delete params['updateProps'];
        delete params['slidesLoaded'];
        Object.assign(swiperRef.current, params);
    }, [props.updateProps, props.slidesLoaded]);

    return (
            style={{ width: '100%', height: '100%' }}