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

## Pull Request Info

### Jira

- https://jira.mongodb.org/browse/DOCSP-26994

### Staged Changes

- [Define an Asymmetric Object - React Native
SDK](https://docs-mongodbcom-staging.corp.mongodb.com/realm/docsworker-xlarge/DOCSP-26994-asymmetric-object/sdk/react-native/realm-database/schemas/asymmetric-object/)

### Reminder Checklist

If your PR modifies the docs, you might need to also update some
corresponding
pages. Check if completed or N/A.

- [N/A] Create Jira ticket for corresponding docs-app-services
update(s), if any
- [N/A] Checked/updated Admin API
- [N/A] Checked/updated CLI reference

### Review Guidelines


[REVIEWING.md](https://github.com/mongodb/docs-realm/blob/master/REVIEWING.md)

Co-authored-by: Mohammad Hunan Chughtai <[email protected]>

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,26 @@
+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',
+    // 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;

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,19 @@
+class Invoice extends Realm.Object<Invoice> {
+  _id!: string;
+  item!: string;
+  quantity!: number;
+  price!: number;
+
+  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/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