Fix bugs, add enhancements in the Example app

* Credentials is not exportable in v11 * Enums for realm opening behavior did not exist in v11 * Automatically login after register using a useEffect * react-native-get-random-values was not installed * link to the local `@realm/react` in example
realm · Jun 21, 2023 · 2ed7401 · 2ed7401
1 parent ed75304
commit 2ed7401
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 15 deletions.
diff --git a/example/app/AppWrapperSync.tsx b/example/app/AppWrapperSync.tsx
@@ -25,7 +25,9 @@ export const AppWrapperSync: React.FC<{
               existingRealmFileBehavior: {
                 type: OpenRealmBehaviorType.DownloadBeforeOpen,
                 timeOut: 1000,
-                timeOutBehavior: OpenRealmTimeOutBehavior.OpenLocalRealm,
+                timeOutBehavior:
+                  // In v11 the enums are not set up correctly, so we need to use the string values
+                  OpenRealmTimeOutBehavior?.OpenLocalRealm ?? 'openLocalRealm',
               },
             }}>
             <AppSync />

diff --git a/example/app/components/LoginScreen.tsx b/example/app/components/LoginScreen.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {View, Text, StyleSheet, TextInput, Pressable} from 'react-native';
 import colors from '../styles/colors';
 import {shadows} from '../styles/shadows';
@@ -11,6 +11,13 @@ export const LoginScreen = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
+  // Automatically log in after registration
+  useEffect(() => {
+    if (result.success && result.operation === AuthOperationName.Register) {
+      logInWithEmailPassword({email, password});
+    }
+  }, [result, logInWithEmailPassword, email, password]);
+
   return (
     <View style={styles.content}>
       <View style={styles.inputContainer}>

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -329,6 +329,8 @@ PODS:
   - React-jsinspector (0.71.7)
   - React-logger (0.71.7):
     - glog
+  - react-native-get-random-values (1.9.0):
+    - React-Core
   - React-perflogger (0.71.7)
   - React-RCTActionSheet (0.71.7):
     - React-Core/RCTActionSheetHeaders (= 0.71.7)
@@ -466,6 +468,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../../node_modules/react-native/ReactCommon/logger`)
+  - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
   - React-perflogger (from `../../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
@@ -541,6 +544,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../../node_modules/react-native/ReactCommon/logger"
+  react-native-get-random-values:
+    :path: "../node_modules/react-native-get-random-values"
   React-perflogger:
     :path: "../../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
@@ -606,6 +611,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: eaa5f71eb8f6861cf0e57f1a0f52aeb020d9e18e
   React-jsinspector: 9885f6f94d231b95a739ef7bb50536fb87ce7539
   React-logger: 3f8ebad1be1bf3299d1ab6d7f971802d7395c7ef
+  react-native-get-random-values: dee677497c6a740b71e5612e8dbd83e7539ed5bb
   React-perflogger: 2d505bbe298e3b7bacdd9e542b15535be07220f6
   React-RCTActionSheet: 0e96e4560bd733c9b37efbf68f5b1a47615892fb
   React-RCTAnimation: fd138e26f120371c87e406745a27535e2c8a04ef

diff --git a/example/package.json b/example/package.json
@@ -10,9 +10,10 @@
     "test": "jest"
   },
   "dependencies": {
-    "@realm/react": "^0.4.3",
+    "@realm/react": "*",
     "react": "18.2.0",
     "react-native": "0.71.7",
+    "react-native-get-random-values": "^1.9.0",
     "realm": "*"
   },
   "devDependencies": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/realm-react/CHANGELOG.md b/packages/realm-react/CHANGELOG.md
@@ -8,7 +8,9 @@
 
 ### Fixed
 * Include the `src` in the distributed package.  This fixes a warning about source maps being not included.
-* Get the documentation to appear in LSP .
+* Get the `useAuth` and `useEmailPasswordAuth` tsdoc to appear on hover over for LSP enabled IDEs.
+* `useEmailPasswordAuth` was crashing on v11 since there are no named exports on `Realm`.
+
 
 ### Internal
 * Refactor `useAuthOperation` to use the `reject` callback rather than `catch`.

diff --git a/packages/realm-react/src/useEmailPasswordAuth.tsx b/packages/realm-react/src/useEmailPasswordAuth.tsx
@@ -18,10 +18,9 @@
 
 import { useApp, useAuthResult } from "./AppProvider";
 import { AuthOperationName, AuthResult } from "./types";
-import { Credentials } from "realm";
+import Realm from "realm";
 import { useAuthOperation } from "./useAuthOperation";
 import { useCallback } from "react";
-import { EmailPasswordAuth } from "realm/dist/bundle";
 
 interface UseEmailPasswordAuth {
   /**
@@ -123,7 +122,7 @@ export function useEmailPasswordAuth(): UseEmailPasswordAuth {
 
   const logIn = useAuthOperation({
     operation: useCallback(
-      (credentials: { email: string; password: string }) => app.logIn(Credentials.emailPassword(credentials)),
+      (credentials: { email: string; password: string }) => app.logIn(Realm.Credentials.emailPassword(credentials)),
       [app],
     ),
     operationName: AuthOperationName.LogIn,