React Native Realm flexible sync progress screen

MongoDB Atlas App Services & Realm Realm
,
1

I have integrated realm flexible sync which download lots of data from realm database after user login and works fine but i want to show progress screen until all data are downloaded on first launch.

As per documentation i have integrated to get progress notification but it only notify when 100% downloaded which is not wise for our app as we want to show actual progress and once download complete start using the app.

Please find below code that i implemented for same as per documentation.

enum ProgressDirection {
    Download = 'download',
    Upload = 'upload',
}

enum ProgressMode {
    ReportIndefinitely = 'reportIndefinitely',
    ForCurrentlyOutstandingWork = 'forCurrentlyOutstandingWork',
}

const AppSync = () => {
    const app = useApp();
    const realm = useRealm();

    useEffect(() => {
        if (__DEV__) {
            Realm.App.Sync.setLogLevel(app, 'debug');
        }

        const progressNotificationCallback = (transferred, transferable) => {
            // Convert decimal to percent with no decimals
            // (e.g. 0.6666... -> 67)
            const percentTransferred = parseFloat((transferred / transferable).toFixed(2)) * 100;
            console.log('percentTransferred', percentTransferred);
        };

        // Listen for changes to connection state
        realm.syncSession?.addProgressNotification(
            ProgressDirection.Download,
            ProgressMode.ForCurrentlyOutstandingWork,
            progressNotificationCallback
        );
        // Remove the connection listener when component unmounts
        return () => {
            realm.syncSession?.removeProgressNotification(progressNotificationCallback);
            if (!realm.isClosed) realm.close();
        };
    }, []);

    ...
}

percentTransferred log showed only when percentTransferred to 100%

My aim is to have progress screen until data get downloaded and once downloaded then render the app part only after it.

2

Hey @Hardik_Chavda,

As noted in this section of the docs, download progress notifications are not yet supported for flexible sync, but support for this is coming soon.

3

Okay but is there is workaround for this to show progress screen?
For now it’s fine to have random progress bar but hide progress screen and load the app part once all data available.

4

If you don’t need granular progress, you can use the downloadAllServerChanges method to be notified when the session has caught up.

5

Thank you :slightly_smiling_face: at least i can use this and show skeleton screen.

Obviously not best solution but what i can do if as download progress notifications are not yet supported for flexible sync.