Add React Native Migration Guide #875

MongoCaleb · 2025-01-24T17:11:27Z

Pull Request Info

Jira ticket: https://jira.mongodb.org/browse/DOCSP-46764

Staging Links

sync/migration/reactnativetutorial

deprecation

migrate-hosting-graphql

sync/device-sync-deprecation

sync/migration/awsappsync

netlify · 2025-01-24T17:11:46Z

✅ Deploy Preview for docs-app-services ready!

Name	Link
🔨 Latest commit	`98e5781`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-app-services/deploys/679bc33d00885b000838cfbb
😎 Deploy Preview	https://deploy-preview-875--docs-app-services.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 30 (🟢 up 1 from production) Accessibility: 85 (no change from production) Best Practices: 75 (no change from production) SEO: 83 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

…CSP-46764

cbullinger

Several URL-related items to correct. I think you can consider everything else as a suggestion 👍

cbullinger · 2025-01-27T20:27:59Z

source/sync/device-sync-deprecation.txt

Suggest:

for all of the PDF links, add something to indicate it as a pdf

e.g. Ditto Reference Architecture Guide (PDF)

for links to external guides and docs, something indicating it's not MDB-hosted?

e.g. [Atlas Device Sync to Ditto migration guide] in the Ditto documentation

or Official [AWS AppSync documentation]?

cbullinger · 2025-01-27T20:49:32Z

source/sync/device-sync-deprecation.txt

@@ -12,6 +12,7 @@ Device Sync Deprecation
   :hidden:

   Migrate to AWS AppSync </sync/migration/awsappsync>
+   Migrate a React Native Application from Device Sync to PowerSync </sync/migration/reactnativetutorial>


Suggested change

Migrate a React Native Application from Device Sync to PowerSync </sync/migration/reactnativetutorial>

Tutorial: Migrate RN App from Device Sync to PowerSync </sync/migration/reactnativetutorial>

Do we really need to specify Device Sync here? Isn't it implied that's what you'd be migrating from?

cbullinger · 2025-01-27T20:51:13Z

source/sync/migration/reactnativetutorial.txt

+solution and could be the right solution to migrate to if you have a mobile
+application using Device Sync.
+
+This article will guide you through the steps you need to take in order to


Suggested change

This article will guide you through the steps you need to take in order to

This tutorial will guide you through the steps needed to

cbullinger · 2025-01-27T20:54:57Z

source/sync/migration/reactnativetutorial.txt

+================================================================
+Migrate a React Native Application from Device Sync to PowerSync
+================================================================


Suggested change

================================================================

Migrate a React Native Application from Device Sync to PowerSync

================================================================

==========================================================================

Tutorial: Migrate a React Native Application from Device Sync to PowerSync

==========================================================================

again, do we need to specify from Device Sync here?

source/sync/migration/reactnativetutorial.txt

Co-authored-by: cbullinger <[email protected]>

… into DOCSP-46764

takameyer

Found a few formatting things. I appreciate all the work done here!

Would be important for someone to actually do the tutorial and ensure there aren't any technical pieces that do not work.

takameyer · 2025-01-29T08:10:50Z

source/sync/migration/reactnativetutorial.txt

+configure the PowerSync service, update the local database schemas and
+bindings, and set up a backend service for writing to Atlas.
+
+This tutorial uses a Realm todo list application for React Native available in the [realm2powersync example repository](https://github.com/takameyer/realm2powersync/tree/main). 


This link was written in markdown. It appears to have not rendered correctly on the page. Ensure this and other links are formatted correctly

takameyer · 2025-01-29T08:12:33Z

source/sync/migration/reactnativetutorial.txt

+`PowerSync Security & IP Filtering <https://docs.powersync.com/installation/database-setup/security-and-ip-filtering>`__ 
+documentation.
+
+In the left sidebar, click **Network Access** under the Security heading.


Would it be useful to have imagery here as well?

We / you had an image here. Cory and I discussed, and felt like the size really broke up the flow and didn't add enough additional value.

OK, so I cropped it and added a red box around the part that is important. LMK what you think.

takameyer · 2025-01-29T08:14:17Z

source/sync/migration/reactnativetutorial.txt

+~~~~~~~~~~~~~~~~
+
+To finalize this setup, you will use the 
+`PowerSync Diagnostics App <https://diagnostics-app.powersync.com/login>` 


This link didn't render correctly

takameyer · 2025-01-29T08:18:06Z

source/sync/migration/reactnativetutorial.txt

+- Mark items as done
+- Delete items
+
+.. image:: /images/migration/react_native_guide/image9.png


Image needs some constraints. It's taking up the entire page.

takameyer · 2025-01-29T08:20:02Z

source/sync/migration/reactnativetutorial.txt

+
+For this tutorial, you will modify ``source/ItemSchema.tsx`` as follows:
+
+.. code-block:: bash


Suggested change

.. code-block:: bash

.. code-block:: javascript

takameyer · 2025-01-29T08:29:12Z

source/sync/migration/reactnativetutorial.txt

+Finally, update ``source/ItemListView.tsx`` to invoke the ``toggleViewAll``
+method in the ``onValueChange`` attribute of the “Show All Tasks” switch:
+
+.. code-block:: bash


Suggested change

.. code-block:: bash

.. code-block:: javascript

takameyer · 2025-01-29T08:29:34Z

source/sync/migration/reactnativetutorial.txt

+
+First, add the following to ``source/PowerSync.ts``:
+
+.. code-block:: bash


Suggested change

.. code-block:: bash

.. code-block:: javascript

takameyer · 2025-01-29T08:29:44Z

source/sync/migration/reactnativetutorial.txt

+Next, refactor the ``source/OfflineModeButton.tsx`` to remove the Realm
+functionality and replace it with by invoking the new method:
+
+.. code-block:: bash


Suggested change

.. code-block:: bash

.. code-block:: javascript

takameyer · 2025-01-29T08:30:21Z

source/sync/migration/reactnativetutorial.txt

+Finally, open ``source/App.tsx`` and uncomment the ``headerRight``
+component back into the ``Stack.Screen`` of the application:
+
+.. code-block:: bash


Suggested change

.. code-block:: bash

.. code-block:: javascript

takameyer · 2025-01-29T08:32:17Z

source/sync/migration/reactnativetutorial.txt

+
+First, remove the default sync rules and replace them with the following:
+
+.. code-block:: bash


Suggested change

.. code-block:: bash

.. code-block:: yaml

Is there a yaml formatter for code-block?

…re copyable

MongoCaleb · 2025-01-30T22:20:29Z

LGTM from @takameyer via Slack.

MongoCaleb added 7 commits January 21, 2025 09:35

update deprecation date; WIP on aws appsync migration guide

7e15162

add to TOC and placeholder text

660c9a5

fix toc link

9540b74

flesh out more details

2781ecb

change wording on auth

dfb9ae3

merge aws guide work

b9d0d29

WIP importing RN tutorial guide

0fc20c1

MongoCaleb added 17 commits January 24, 2025 10:04

add images

88e68b5

clean up errors before importing part 2

448de38

clean up more errors

66da2d2

add phase 2

f5e71b4

fix formatting errors

1982b73

add phase 3 and 4

99f6d1f

fix headings

226239f

add phase 5

4fc7e19

numerous formatting fixes

e5ecc89

add phase 6

44f4193

full review pass #1

805cd36

update image to new UI and move to correct location

ec47349

add link to tutorial on deprecation page

f580a84

Merge branch 'master' of github.com:mongodb/docs-app-services into DO…

9b67338

…CSP-46764

fix merge conflicts

910a930

fix borked link

3805368

fix ambiguous target and formatting warning

f9770e6

cbullinger approved these changes Jan 27, 2025

View reviewed changes

MongoCaleb and others added 3 commits January 28, 2025 08:50

Apply suggestions from code review

0801578

Co-authored-by: cbullinger <[email protected]>

review changes

44fcc6d

Merge branch 'DOCSP-46764' of github.com:MongoCaleb/docs-app-services…

5e255a0

… into DOCSP-46764

takameyer suggested changes Jan 29, 2025

View reviewed changes

MongoCaleb added 3 commits January 29, 2025 09:37

fix borked links, update code formatting, minimize images

60eeb02

fix width and change image name

ec6c9a8

make image smaller and readd it

71c3a0b

MongoCaleb requested a review from takameyer January 29, 2025 18:06

MongoCaleb added 4 commits January 29, 2025 13:09

make image smaller

fca5ac4

wording and format changes to clarify some steps and make the code mo…

3f5c781

…re copyable

more clarification & claenup

7aff03b

phase 6 cleanup

98e5781

MongoCaleb merged commit 7b6924f into mongodb:master Jan 30, 2025
8 checks passed

	Migrate a React Native Application from Device Sync to PowerSync </sync/migration/reactnativetutorial>
	Tutorial: Migrate RN App from Device Sync to PowerSync </sync/migration/reactnativetutorial>

	This article will guide you through the steps you need to take in order to
	This tutorial will guide you through the steps needed to


		For this tutorial, you will modify ``source/ItemSchema.tsx`` as follows:

		.. code-block:: bash


		First, add the following to ``source/PowerSync.ts``:

		.. code-block:: bash


		First, remove the default sync rules and replace them with the following:

		.. code-block:: bash

Add React Native Migration Guide #875

Add React Native Migration Guide #875

Uh oh!

Conversation

MongoCaleb commented Jan 24, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Info

Staging Links

Uh oh!

netlify bot commented Jan 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for docs-app-services ready!

Uh oh!

cbullinger left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

takameyer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MongoCaleb commented Jan 30, 2025

Uh oh!

Uh oh!

Uh oh!

MongoCaleb commented Jan 24, 2025 •

edited by github-actions bot

Loading

netlify bot commented Jan 24, 2025 •

edited

Loading