title: Realm Sync offline-first on React Native: how to implement?
body: <p>I am working on an <a href="https://www.mongodb.com/collateral/the-offline-first-approach-to-mobile-app-development" rel="nofollow noreferrer">offline-first</a> app with Realm Sync on React Native.</p>
  <p>The specific programming problem I want to solve is how to implement this offline-first behaviour with React Native in my app, so that a logged in user will have a seamless experience whether online or offline. I am looking for code which illustrates best practices for offline-first with Realm Sync which implements this.</p>
  <p>The otherwise excellent Realm documentation is very limited when it comes to offline-first and the<a href="https://docs.mongodb.com/realm/tutorial/react-native/" rel="nofollow noreferrer"> demo app in the MongoDB Realm documentation</a> implements Sync, but is not designed to be offline capable. Naturally my starting point was that app, as it it the one recommended in the documentation as well as on the forum.</p>
  <p>I have tested both the iOS Swift and the React Native 'Task Tracker' app and they are not offline-first capable as currently implemented, which their engineers confirmed to.</p>
  <p>The significant code in <code>TaskProvider.js</code> from that app is:</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
      const config = {
        sync: {
          user: user,
          partitionValue: projectPartition,
        },
      };
      // open a realm for this particular project
      Realm.open(config).then((projectRealm) =&gt; {
        realmRef.current = projectRealm;
  
        const syncTasks = projectRealm.objects(&quot;Task&quot;);
        let sortedTasks = syncTasks.sorted(&quot;name&quot;);
        setTasks([...sortedTasks]);
        sortedTasks.addListener(() =&gt; {
          setTasks([...sortedTasks]);
        });
      });
  
      // ...
    }, [user, projectPartition]);
  </code></pre>
  <p>Since I need to use code like this in my own app, the first question is how to change this code to perform properly for offline-first usage. Additionally if you have gotten an offline-first Realm Sync app to work on React Native please provide a link or relevant example code.</p>