(DOCSP-26984): @realm/reactify: Mixed - React Native SDK

examples/react-native/.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     'no-undef': 'off',
     'no-new': 'off',
     'jsx-quotes': 0, // do not remove this line, this removes the requirement for double quotes in jsx/tsx. The single quotes in jsx help bluehawk replace testIDs in the generated snippets for the docs
+    'react-hooks/exhaustive-deps': 0,
     'react/jsx-max-props-per-line': [0, {'maximum': 4, 'when': 'multiline'}],
   },
 };

examples/react-native/__tests__/js/models/Cat.js

@@ -0,0 +1,13 @@
+import Realm from 'realm';
+// :snippet-start: js-cat-schema
+class Cat extends Realm.Object {
+  static schema = {
+    name: 'Cat',
+    properties: {
+      name: 'string',
+      birthDate: 'mixed',
+    },
+  };
+}
+// :snippet-end:
+export default Cat;

examples/react-native/__tests__/js/realm-database/schemas/mixed-tests.jsx

@@ -0,0 +1,149 @@
+import React, {useEffect} from 'react';
+import {Text, View} from 'react-native';
+import {render, waitFor} from '@testing-library/react-native';
+import Realm from 'realm';
+import {createRealmContext} from '@realm/react';
+import Cat from '../../models/Cat';
+
+jest.setTimeout(30000);
+
+const realmConfig = {
+  schema: [Cat],
+  deleteRealmIfMigrationNeeded: true,
+};
+
+const {RealmProvider, useRealm, useQuery} = createRealmContext(realmConfig);
+
+let assertionRealm;
+
+describe('Mixed Tests', () => {
+  beforeEach(async () => {
+    // we will use this Realm for assertions to access Realm Objects outside of a Functional Component (like required by @realm/react)
+    assertionRealm = await Realm.open(realmConfig);
+
+    // delete every object in the realmConfig in the Realm to make test idempotent
+    assertionRealm.write(() => {
+      assertionRealm.delete(assertionRealm.objects(Cat));
+
+      new Cat(assertionRealm, {
+        name: 'Clover',
+        birthDate: new Date('January 21, 2016'),
+      });
+    });
+  });
+  afterAll(() => {
+    if (!assertionRealm.isClosed) {
+      assertionRealm.close();
+    }
+  });
+  it('should create an object with a mixed value', async () => {
+    // :snippet-start: create-mixed-object
+    // :replace-start: {
+    //  "terms": {
+    //   " testID='catItem'": ""
+    //   }
+    // }
+    const CreateCatsInput = () => {
+      const realm = useRealm();
+
+      useEffect(() => {
+        // Add data to the Realm when the component mounts
+        realm.write(() => {
+          // create a Cat with a birthDate value of type string
+          new Cat(realm, {
+            name: 'Euler',
+            birthDate: 'December 25th, 2017',
+          });
+          // create a Cat with a birthDate value of type date
+          new Cat(realm, {
+            name: 'Blaise',
+            birthDate: new Date('August 17, 2020'),
+          });
+
+          // create a Cat with a birthDate value of type int
+          new Cat(realm, {name: 'Euclid', birthDate: 10152021});
+
+          // create a Cat with a birthDate value of type null
+          new Cat(realm, {name: 'Pythagoras', birthDate: null});
+        });
+      }, []);
+
+      // retrieve all cats
+      const cats = useQuery(Cat);
+
+      return (
+        <>
+          {cats.map(cat => (
+            <View testID='catItem'>
+              <Text>{cat.name}</Text>
+              <Text>{String(cat.birthDate)}</Text>
+            </View>
+          ))}
+        </>
+      );
+    };
+    // :replace-end:
+    // :snippet-end:
+
+    const App = () => (
+      <RealmProvider>
+        <CreateCatsInput />
+      </RealmProvider>
+    );
+
+    const {getAllByTestId} = render(<App />);
+
+    const catItems = await waitFor(() => getAllByTestId('catItem'), {
+      timeout: 5000,
+    });
+
+    // Test that 5 Cat Items have been added to the UI,
+    // and 5 matching Cat objects have been created in the assertionRealm
+    // (since there was already 1 cat object 'clover' created in the beforeEach)
+    // + the 4 new Cats
+    setTimeout(() => {
+      expect(catItems.length).toBe(5);
+      const cats = assertionRealm.objects(Cat);
+      expect(cats.length).toBe(5);
+    }, 5500);
+  });
+  it('should query for objects with a mixed value', async () => {
+    // :snippet-start: query-mixed-object
+    // :replace-start: {
+    //  "terms": {
+    //   " testID='catBirthDate'": ""
+    //   }
+    // }
+    const CatInfoCard = ({catName}) => {
+      // To query for the cat's birthDate, filter for their name to retrieve the realm object.
+      // Use dot notation to access the birthDate property.
+      const cat = useQuery(Cat).filtered(`name = '${catName}'`)[0];
+      const catBirthDate = cat.birthDate;
+
+      if (cat) {
+        return (
+          <>
+            <Text>{catName}</Text>
+            <Text testID='catBirthDate'>{String(catBirthDate)}</Text>
+          </>
+        );
+      } else {
+        return <Text>Cat not found</Text>;
+      }
+    };
+    // :replace-end:
+    // :snippet-end:
+
+    const App = () => (
+      <RealmProvider>
+        <CatInfoCard catName='Clover' />
+      </RealmProvider>
+    );
+    const {getByTestId} = render(<App />);
+    const catBirthDate = await waitFor(() => getByTestId('catBirthDate'));
+    // Expect catBirthDate in the UI to be the same value we set in the beforeEach (which is clover's birthday 'January 21, 2016')
+    expect(new Date(catBirthDate.props.children)).toStrictEqual(
+      new Date('January 21, 2016'),
+    );
+  });
+});

examples/react-native/__tests__/ts/models/Cat.ts

@@ -0,0 +1,17 @@
+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-cat-schema
+class Cat extends Realm.Object<Cat> {
+  name!: string;
+  birthDate?: Realm.Mixed;
+
+  static schema = {
+    name: 'Cat',
+    properties: {
+      name: 'string',
+      birthDate: 'mixed',
+    },
+  };
+}
+// :snippet-end:
+export default Cat;

examples/react-native/__tests__/ts/realm-database/schemas/mixed-test.tsx

@@ -0,0 +1,149 @@
+import React, {useEffect} from 'react';
+import {Text, View} from 'react-native';
+import {render, waitFor} from '@testing-library/react-native';
+import Realm from 'realm';
+import {createRealmContext} from '@realm/react';
+import Cat from '../../models/Cat';
+
+jest.setTimeout(30000);
+
+const realmConfig = {
+  schema: [Cat],
+  deleteRealmIfMigrationNeeded: true,
+};
+
+const {RealmProvider, useRealm, useQuery} = createRealmContext(realmConfig);
+
+let assertionRealm: Realm;
+
+describe('Mixed Tests', () => {
+  beforeEach(async () => {
+    // we will use this Realm for assertions to access Realm Objects outside of a Functional Component (like required by @realm/react)
+    assertionRealm = await Realm.open(realmConfig);
+
+    // delete every object in the realmConfig in the Realm to make test idempotent
+    assertionRealm.write(() => {
+      assertionRealm.delete(assertionRealm.objects(Cat));
+
+      new Cat(assertionRealm, {
+        name: 'Clover',
+        birthDate: new Date('January 21, 2016'),
+      });
+    });
+  });
+  afterAll(() => {
+    if (!assertionRealm.isClosed) {
+      assertionRealm.close();
+    }
+  });
+  it('should create an object with a mixed value', async () => {
+    // :snippet-start: create-mixed-object
+    // :replace-start: {
+    //  "terms": {
+    //   " testID='catItem'": ""
+    //   }
+    // }
+    const CreateCatsInput = () => {
+      const realm = useRealm();
+
+      useEffect(() => {
+        // Add data to the Realm when the component mounts
+        realm.write(() => {
+          // create a Cat with a birthDate value of type string
+          new Cat(realm, {
+            name: 'Euler',
+            birthDate: 'December 25th, 2017',
+          });
+          // create a Cat with a birthDate value of type date
+          new Cat(realm, {
+            name: 'Blaise',
+            birthDate: new Date('August 17, 2020'),
+          });
+
+          // create a Cat with a birthDate value of type int
+          new Cat(realm, {name: 'Euclid', birthDate: 10152021});
+
+          // create a Cat with a birthDate value of type null
+          new Cat(realm, {name: 'Pythagoras', birthDate: null});
+        });
+      }, []);
+
+      // retrieve all cats
+      const cats = useQuery(Cat);
+
+      return (
+        <>
+          {cats.map(cat => (
+            <View testID='catItem'>
+              <Text>{cat.name}</Text>
+              <Text>{String(cat.birthDate)}</Text>
+            </View>
+          ))}
+        </>
+      );
+    };
+    // :replace-end:
+    // :snippet-end:
+
+    const App = () => (
+      <RealmProvider>
+        <CreateCatsInput />
+      </RealmProvider>
+    );
+
+    const {getAllByTestId} = render(<App />);
+
+    const catItems = await waitFor(() => getAllByTestId('catItem'), {
+      timeout: 5000,
+    });
+
+    // Test that 5 Cat Items have been added to the UI,
+    // and 5 matching Cat objects have been created in the assertionRealm
+    // (since there was already 1 cat object 'clover' created in the beforeEach)
+    // + the 4 new Cats
+    setTimeout(() => {
+      expect(catItems.length).toBe(5);
+      const cats = assertionRealm.objects(Cat);
+      expect(cats.length).toBe(5);
+    }, 5500);
+  });
+  it('should query for objects with a mixed value', async () => {
+    // :snippet-start: query-mixed-object
+    // :replace-start: {
+    //  "terms": {
+    //   " testID='catBirthDate'": ""
+    //   }
+    // }
+    const CatInfoCard = ({catName}: {catName: string}) => {
+      // To query for the cat's birthDate, filter for their name to retrieve the realm object.
+      // Use dot notation to access the birthDate property.
+      const cat = useQuery(Cat).filtered(`name = '${catName}'`)[0];
+      const catBirthDate = cat.birthDate;
+
+      if (cat) {
+        return (
+          <>
+            <Text>{catName}</Text>
+            <Text testID='catBirthDate'>{String(catBirthDate)}</Text>
+          </>
+        );
+      } else {
+        return <Text>Cat not found</Text>;
+      }
+    };
+    // :replace-end:
+    // :snippet-end:
+
+    const App = () => (
+      <RealmProvider>
+        <CatInfoCard catName='Clover' />
+      </RealmProvider>
+    );
+    const {getByTestId} = render(<App />);
+    const catBirthDate = await waitFor(() => getByTestId('catBirthDate'));
+    // Expect catBirthDate in the UI to be the same value we set in the beforeEach (which is clover's birthday 'January 21, 2016')
+    expect(new Date(catBirthDate.props.children)).toStrictEqual(
+      new Date('January 21, 2016'),
+    );
+  });
+});

examples/react-native/testSetup.js

@@ -7,3 +7,5 @@ global.console = {
   error: jest.fn(),
   warn: jest.fn(),
 };
+
+jest.setTimeout(30000);

source/examples/generated/react-native/js/Cat.snippet.js-cat-schema.js

@@ -0,0 +1,9 @@
+class Cat extends Realm.Object {
+  static schema = {
+    name: 'Cat',
+    properties: {
+      name: 'string',
+      birthDate: 'mixed',
+    },
+  };
+}

source/examples/generated/react-native/js/mixed-tests.snippet.create-mixed-object.jsx

@@ -0,0 +1,39 @@
+const CreateCatsInput = () => {
+  const realm = useRealm();
+
+  useEffect(() => {
+    // Add data to the Realm when the component mounts
+    realm.write(() => {
+      // create a Cat with a birthDate value of type string
+      new Cat(realm, {
+        name: 'Euler',
+        birthDate: 'December 25th, 2017',
+      });
+      // create a Cat with a birthDate value of type date
+      new Cat(realm, {
+        name: 'Blaise',
+        birthDate: new Date('August 17, 2020'),
+      });
+
+      // create a Cat with a birthDate value of type int
+      new Cat(realm, {name: 'Euclid', birthDate: 10152021});
+
+      // create a Cat with a birthDate value of type null
+      new Cat(realm, {name: 'Pythagoras', birthDate: null});
+    });
+  }, []);
+
+  // retrieve all cats
+  const cats = useQuery(Cat);
+
+  return (
+    <>
+      {cats.map(cat => (
+        <View>
+          <Text>{cat.name}</Text>
+          <Text>{String(cat.birthDate)}</Text>
+        </View>
+      ))}
+    </>
+  );
+};