Swiper slider not working unless page is resized

Questions
1

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

2

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 {
        children,
        ...rest
    } = props;

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

    useEffect(() => {

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

    return (
        <swiper-container
            style={{ width: '100%', height: '100%' }}
            init={false}
            ref={swiperRef}>
            {children}
        </swiper-container>
    );
});