(DOCSP-27000): Call a Function for React Native

examples/react-native/__tests__/ts/app-services/atlas-functions.test.tsx

@@ -0,0 +1,80 @@
+// :snippet-start: call-function
+import React from 'react';
+import {useUser} from '@realm/react';
+// :remove-start:
+import {Credentials} from 'realm';
+import {useEffect, useState} from 'react';
+import {App} from 'realm';
+import {AppProvider, UserProvider, useApp} from '@realm/react';
+import {render, fireEvent, waitFor} from '@testing-library/react-native';
+import {View, Button, Text} from 'react-native';
+
+const APP_ID = 'example-testers-kvjdy';
+
+function AppWrapper() {
+  return (
+    <View>
+      <AppProvider id={APP_ID}>
+        <MyApp />
+      </AppProvider>
+    </View>
+  );
+}
+
+function MyApp() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const app = useApp();
+
+  useEffect(() => {
+    app.logIn(Credentials.anonymous()).then(user => user && setLoggedIn(true));
+  }, []);
+  // ...
+  return loggedIn ? (
+    <View>
+      <UserProvider>
+        <Text>Foo!</Text>
+        <Addition />
+      </UserProvider>
+    </View>
+  ) : null;
+}
+
+let higherScopedSum: number;
+// :remove-end:
+
+function Addition() {
+  // Get currently logged in user
+  const user = useUser();
+
+  const addNumbers = async (numA: number, numB: number) => {
+    // Call Atlas Function
+
+    // Method 1: call with User.callFunction()
+    const sumMethod1 = await user?.callFunction('sum', numA, numB);
+
+    // Method 2: Call with User.function.<Function name>()
+    const sumMethod2 = await user?.functions.sum(numA, numB);
+
+    // Both methods return the same result
+    console.log(sumMethod1 === sumMethod2); // true
+    // :remove-start:
+    expect(sumMethod1).toBe(sumMethod2);
+    higherScopedSum = sumMethod1 as number;
+    // :remove-end:
+  };
+  // ...
+  // :remove-start:
+  return <Button onPress={() => addNumbers(1, 2)} testID='test-function-call' title='Test Me!' />;
+  // :remove-end:
+}
+// :snippet-end:
+
+afterEach(async () => await App.getApp(APP_ID).currentUser?.logOut());
+
+test('Call Atlas Function', async () => {
+  const {getByTestId} = render(<AppWrapper />);
+
+  const button = await waitFor(() => getByTestId('test-function-call'));
+  fireEvent.press(button);
+  await waitFor(() => expect(higherScopedSum).toBe(3));
+});

source/examples/generated/react-native/ts/atlas-functions.test.snippet.call-function.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {useUser} from '@realm/react';
+
+function Addition() {
+  // Get currently logged in user
+  const user = useUser();
+
+  const addNumbers = async (numA: number, numB: number) => {
+    // Call Atlas Function
+
+    // Method 1: call with User.callFunction()
+    const sumMethod1 = await user?.callFunction('sum', numA, numB);
+
+    // Method 2: Call with User.function.<Function name>()
+    const sumMethod2 = await user?.functions.sum(numA, numB);
+
+    // Both methods return the same result
+    console.log(sumMethod1 === sumMethod2); // true
+  };
+  // ...
+}

source/sdk/react-native/app-services/call-a-function.txt

@@ -21,31 +21,26 @@ named ``sum`` that takes two arguments, adds them, and returns the result:
      return a + b;
    };
 
-.. _react-native-call-a-function-by-name:
-
-Call a Function by Name
------------------------
+Prerequisites
+-------------
 
-.. include:: /includes/important-sanitize-client-data-in-functions.rst
+Before You Begin
+----------------
 
-To call a function, you can either pass its name and arguments to
-``User.callFunction()`` or call the function as if it was a method on the
-:js-sdk:`User.functions <Realm.User.html#functions>` property.
+#. In an App Services App, :ref:`define an Atlas Function <define-a-function>`.
+#. In your client project, :ref:`initialize the App client <react-native-connect-to-mongodb-realm-backend-app>`.
+#. Then, :ref:`authenticate a user <react-native-authenticate-users>` in your React Native project.
 
-.. note:: Link a MongoDB Atlas Data Source
-
-   This example requires a Realm app with a linked
-   :ref:`Atlas data source <data-sources>`. Replace
-   ``<appId>`` in the code with your App ID, which you can find in the
-   left navigation menu of the App Services UI.
+.. _react-native-call-a-function-by-name:
 
-.. literalinclude:: /examples/generated/node/call-a-function.snippet.call-a-function-by-name.js
-  :language: javascript
-
+Call a Function
+---------------
 
-When you run the code sample, your output should resemble the following:
+.. include:: /includes/important-sanitize-client-data-in-functions.rst
 
-.. code-block:: none
+To call a function, you can either pass its name and arguments to
+:js-sdk:`User.callFunction() <Realm.User.html#functions>` or call the function
+as if it were a method on the :js-sdk:`User.functions <Realm.User.html#functions>` property.
 
-   Using the "functions.sum()" method: the sum of 2 + 3 = 5
-   Using the "callFunction()" method: the sum of 2 + 3 = 5
+.. literalinclude:: /examples/generated/react-native/ts/atlas-functions.test.snippet.call-function.tsx
+  :language: typescript