(DOCSP-26994): @realm/react-ify 'Asymmetric Object - React Native SDK'

Author: Mohammad Hunan Chughtai

examples/react-native/__tests__/js/Models/Invoice.js

@@ -0,0 +1,20 @@
+import Realm from 'realm';
+
+// :snippet-start: js-invoice-schema
+class Invoice extends Realm.Object {
+  static schema = {
+    name: 'Invoice',
+    // sync Invoice objects one way from your device to your Atlas database.
+    asymmetric: true,
+    primaryKey: '_id',
+    properties: {
+      _id: 'objectId',
+      item: 'string',
+      quantity: 'int',
+      price: 'int',
+    },
+  };
+}
+// :snippet-end:
+
+export default Invoice;

examples/react-native/__tests__/ts/Models/Invoice.ts

@@ -0,0 +1,25 @@
+import Realm from 'realm';
+
+// TODO: Replace `static schema` with TS-first models + realm-babel-plugin (https://www.npmjs.com/package/@realm/babel-plugin) approach once realm-babel-plugin version 0.1.2 releases with bug fixes
+// :snippet-start: ts-invoice-schema
+class Invoice extends Realm.Object<Invoice> {
+  _id!: string;
+  item!: string;
+  quantity!: number;
+  price!: number;
+
+  static schema = {
+    name: 'Invoice',
+    asymmetric: true,
+    primaryKey: '_id',
+    properties: {
+      _id: 'objectId',
+      item: 'string',
+      quantity: 'int',
+      price: 'int',
+    },
+  };
+}
+// :snippet-end:
+
+export default Invoice;

source/examples/generated/react-native/js/Invoice.snippet.js-invoice-schema.js

@@ -0,0 +1,14 @@
+class Invoice extends Realm.Object {
+  static schema = {
+    name: 'Invoice',
+    // sync Invoice objects one way from your device to your Atlas database.
+    asymmetric: true,
+    primaryKey: '_id',
+    properties: {
+      _id: 'objectId',
+      item: 'string',
+      quantity: 'int',
+      price: 'int',
+    },
+  };
+}

source/examples/generated/react-native/ts/Invoice.snippet.ts-invoice-schema.ts

@@ -0,0 +1,18 @@
+class Invoice extends Realm.Object<Invoice> {
+  _id!: string;
+  item!: string;
+  quantity!: number;
+  price!: number;
+
+  static schema = {
+    name: 'Invoice',
+    asymmetric: true,
+    primaryKey: '_id',
+    properties: {
+      _id: 'objectId',
+      item: 'string',
+      quantity: 'int',
+      price: 'int',
+    },
+  };
+}

source/sdk/react-native/realm-database/schemas/asymmetric-object.txt

@@ -18,17 +18,33 @@ If you are using Flexible Sync and need to sync a collection unidirectionally
 from your device to your Atlas database, you can set the ``asymmetric`` property
 on your object schema.
 
-.. example::
+Example
+~~~~~~~
 
-   In the following example of a retail app, the client requires large amounts of
-   invoice data to be recorded rapidly by store employees. The client specifies
-   that invoice data does not need to be read after employees have recorded it. To
-   satisfy this requirement, the application developer defines an invoice
-   collection with its ``asymmetric`` property set to ``true``. 
-   
-   .. literalinclude::  /examples/generated/node/asymmetric-sync.snippet.asymmetric-sync.js
-      :language: javascript
-      :emphasize-lines: 4
+In the following example of a retail app, the client requires large amounts of
+invoice data to be recorded rapidly by store employees. The client specifies
+that invoice data does not need to be read after employees have recorded it. To
+satisfy this requirement, the application developer defines an invoice
+collection with its ``asymmetric`` property set to ``true``. 
+
+.. tabs-realm-languages::
+      
+   .. tab::
+      :tabid: typescript
+      
+      .. literalinclude:: /examples/generated/react-native/ts/Invoice.snippet.ts-invoice-schema.ts
+         :language: typescript
+         :emphasize-lines: 9
+         :linenos:
+
+   .. tab::
+      :tabid: javascript
+      
+      .. literalinclude:: /examples/generated/react-native/js/Invoice.snippet.js-invoice-schema.js
+         :language: javascript
+         :emphasize-lines: 5
+         :linenos:
+
 
 .. note:: Attempting to Read Asymmetric Sync Objects