(DOCSP-26999): Connect to App Services page

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

@@ -0,0 +1,36 @@
+// :snippet-start: app-provider
+import React from 'react';
+import {AppProvider} from '@realm/react';
+// :remove-start:
+import {render} from '@testing-library/react-native';
+import {useApp} from '@realm/react';
+import {View, Text} from 'react-native';
+
+const APP_ID = 'example-testers-kvjdy';
+
+function MyApp() {
+  const app = useApp();
+  if (app.id !== APP_ID) {
+    throw new Error('Did not instantiate app client');
+  }
+  return (
+    <View>
+      <Text>Foo</Text>
+    </View>
+  );
+}
+// :remove-end:
+function AppWrapper() {
+  return (
+    <View>
+      <AppProvider id={APP_ID}>
+        <MyApp />
+      </AppProvider>
+    </View>
+  );
+}
+// :snippet-end:
+
+test('Instantiate AppProvider correctly', () => {
+  render(<AppWrapper />);
+});

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

@@ -0,0 +1,42 @@
+// :snippet-start: use-app
+import React from 'react';
+import {useApp} from '@realm/react';
+import {Credentials} from 'realm';
+// :remove-start:
+import {App} from 'realm';
+import {AppProvider} from '@realm/react';
+import {render, fireEvent, waitFor} from '@testing-library/react-native';
+import {View, Button} from 'react-native';
+
+const APP_ID = 'example-testers-kvjdy';
+
+function AppWrapper() {
+  return (
+    <View>
+      <AppProvider id={APP_ID}>
+        <MyApp />
+      </AppProvider>
+    </View>
+  );
+}
+// :remove-end:
+function MyApp() {
+  const app = useApp();
+  function logInAnonymousUser() {
+    app.logIn(Credentials.anonymous());
+  }
+  // ...
+  // :remove-start:
+  return <Button onPress={logInAnonymousUser} testID='test-use-app' title='Test Me!' />;
+  // :remove-end:
+}
+// :snippet-end:
+
+afterEach(async () => await App.getApp(APP_ID).currentUser?.logOut());
+
+test('useApp hook works correctly', async () => {
+  const {getByTestId} = render(<AppWrapper />);
+  const button = getByTestId('test-use-app');
+  fireEvent.press(button);
+  await waitFor(() => expect(App.getApp(APP_ID).currentUser).not.toBeNull());
+});

examples/react-native/bluehawk.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+PROJECT=$(git rev-parse --show-toplevel)
+JS_RN_EXAMPLES=$PROJECT/examples/react-native/__tests__/js/
+TS_RN_EXAMPLES=$PROJECT/examples/react-native/__tests__/ts
+
+echo $JS_RN_EXAMPLES
+
+JS_GENERATED_EXAMPLES=$PROJECT/source/examples/generated/react-native/js
+TS_GENERATED_EXAMPLES=$PROJECT/source/examples/generated/react-native/ts
+echo $JS_GENERATED_EXAMPLES
+
+bluehawk snip $JS_RN_EXAMPLES -o $JS_GENERATED_EXAMPLES
+
+bluehawk snip $TS_RN_EXAMPLES -o $TS_GENERATED_EXAMPLES
+

source/examples/generated/react-native/ts/app-provider.test.snippet.app-provider.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {AppProvider} from '@realm/react';
+
+function AppWrapper() {
+  return (
+    <View>
+      <AppProvider id={APP_ID}>
+        <MyApp />
+      </AppProvider>
+    </View>
+  );
+}

source/examples/generated/react-native/ts/use-app.test.snippet.use-app.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { useApp } from "@realm/react";
+import { Credentials } from "realm";
+
+function MyApp() {
+  const app = useApp();
+  function logInAnonymousUser() {
+    app.logIn(Credentials.anonymous());
+  }
+  // ...
+}

source/sdk/react-native/app-services/connect-to-app-services-app.txt

@@ -4,94 +4,63 @@
 Connect to an Atlas App Services App - React Native SDK
 =======================================================
 
+.. contents:: On this page
+   :local:
+   :backlinks: none
+   :depth: 2
+   :class: singlecol
+
 Overview
 --------
 
 The App client is the interface to the App Services
 backend. It provides access to the :ref:`authentication functionality
-<react-native-authenticate-users>`, :ref:`functions <react-native-call-a-function>`, and
-:ref:`sync management <react-native-realm-sync>`.
-
-
-.. _react-native-access-the-app-client:
-
-Access the App Client
----------------------
-
-Pass the Realm App ID for your App, which you can :ref:`find in the Realm UI <find-your-app-id>`.
-
-.. tabs-realm-languages::
-
-      .. tab::
-         :tabid: typescript
-
-         .. code-block:: typescript
-
-            const id = "<Your App ID>"; // replace this with your App ID
+<react-native-authenticate-users>`, :ref:`Atlas Functions <react-native-call-a-function>`,
+and :ref:`Atlas Device Sync <react-native-realm-sync>`.
 
-      .. tab::
-         :tabid: javascript
+Before You Begin
+----------------
 
-         .. code-block:: javascript
-
-            const id = "<Your App ID>"; // replace this with your App ID
+#. :ref:`Create an App Services App <create-a-realm-app>`
+#. :ref:`Get Your App ID <find-your-app-id>`
 
 .. _react-native-app-client-configuration:
+.. _react-native-access-the-app-client:
 
-Configuration
--------------
-
-To set up your App client, pass a configuration object to an instance
-of ``Realm.App``.
-
-.. tabs-realm-languages::
-
-      .. tab::
-         :tabid: typescript
-
-         .. code-block:: typescript
-
-            const config = {
-              id,
-            };
-            const app = new Realm.App(config);
-
-      .. tab::
-         :tabid: javascript
+Configure the App Client
+------------------------
 
-         .. code-block:: javascript
+To set up your App client, pass the App ID string
+to the ``id`` prop of the ``AppProvider``.
+Wrap any components that need to access the App with the ``AppProvider``.
 
-            const config = {
-              id,
-            };
-            const app = new Realm.App(config);
 
-.. note:: 
-
-   ``id`` is a required field of the application configuration object. To see the full list of fields for the configuration object that ``Realm.App`` accepts as a parameter, view the :js-sdk:`App Configuration Type Definitions <Realm.App.html#~AppConfiguration>`.
+.. literalinclude:: /examples/generated/react-native/ts/app-provider.test.snippet.app-provider.tsx
+   :language: typescript
 
 .. _react-native-app-retrieve-client:
 
 Retrieve an Instance of the App Client
 --------------------------------------
 
-To retrieve an instance of the App Client from anywhere in your application, call :js-sdk:`Realm.App.getApp() <Realm.App.html#getApp>` and pass in your ``App ID``. 
-
-.. tabs-realm-languages::
-
-      .. tab::
-         :tabid: typescript
+All components wrapped within an ``AppProvider`` can access the :js-sdk:`App <Realm.App.html>`
+client with the ``useApp()`` hook. Using the App, you can authenticate users
+and access App Services.
 
-         .. code-block:: typescript
+.. literalinclude:: /examples/generated/react-native/ts/use-app.test.snippet.use-app.tsx
+   :language: typescript
 
-            const app = Realm.App.getApp("<Your App ID>"); // replace this with your App ID
+.. _react-native-retrieve-client-outside-provider:
 
-      .. tab::
-         :tabid: javascript
+Retrieve App Outside the App Provider
+-------------------------------------
 
-         .. code-block:: javascript
+To retrieve an instance of the App Client from anywhere in your application,
+instantiate a new instance of :js-sdk:`Realm.App() <Realm.App.html>`
+from the ``realm`` package, then pass in your ``App ID``.
 
-            const app = Realm.App.getApp("<Your App ID>"); // replace this with your App ID
+.. code-block:: typescript
 
+   import Realm from "realm";
 
-
+   const app = Realm.App.getApp("<Your App ID>");