Upgrade to React Native 0.76 and Expo 52

react-native/README.md

@@ -17,10 +17,6 @@ phone while hitting a server running on your computer.
 Starts the server locally using Expo.  You should then be able to see it running on a phone provided you have the above
 app downloaded and configured.
 
-Note that React-Native does not fully support the Fetch API when running on mobile and as a result, the Connect
-transport does not work properly in that environment. Instead, we create a custom XHR transport for use in that
-circumstance.
-
 To update the React Native project, you have to check the 
 [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) for guidance.
 

react-native/app.json

@@ -1,12 +1,14 @@
 {
   "expo": {
+    "sdkVersion": "52.0.0",
     "name": "eliza",
     "slug": "eliza",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "scheme": "eliza",
     "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",

react-native/app/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { fetch, FetchRequestInit } from "expo/fetch";
 import {
   Button,
   Dimensions,
@@ -8,39 +9,46 @@ import {
   TextInput,
   View,
 } from "react-native";
-import { createClient, Code, ConnectError } from "@connectrpc/connect";
-import { createXHRGrpcWebTransport } from "./custom-transport";
+import { createClient, ConnectError } from "@connectrpc/connect";
+import { createConnectTransport } from "@connectrpc/connect-web";
 import {
   ElizaService,
   IntroduceRequestSchema,
 } from "../gen/connectrpc/eliza/v1/eliza_pb.js";
-// Needed to polyfill TextEncoder/ TextDecoder
-import "fast-text-encoding";
 import { create } from "@bufbuild/protobuf";
-import { polyfills } from "./polyfills";
 
-polyfills();
-
-interface Response {
+interface ConvoResponse {
   text: string;
   sender: "eliza" | "user";
 }
 
 function Index() {
   const [statement, setStatement] = useState<string>("");
   const [introFinished, setIntroFinished] = useState<boolean>(false);
-  const [responses, setResponses] = useState<Response[]>([
+  const [responses, setResponses] = useState<ConvoResponse[]>([
     {
       text: "What is your name?",
       sender: "eliza",
     },
   ]);
 
-  // Make the Eliza Service client
+  // Make the Eliza Service client using grpc-web transport.
   const client = createClient(
     ElizaService,
-    createXHRGrpcWebTransport({
+    createConnectTransport({
       baseUrl: "https://demo.connectrpc.com",
+      // Customize fetch with the Expo fetch implementation
+      fetch: (input, init) => {
+        if (typeof input !== "string") {
+          throw new Error(
+            "expo/fetch requires the first argument to be a string URL",
+          );
+        }
+        return fetch(
+          input,
+          init as unknown as FetchRequestInit,
+        ) as unknown as Promise<Response>;
+      },
     }),
   );
 
@@ -63,6 +71,9 @@ function Index() {
           name: statement,
         });
 
+        // Note that cancelling streams does not currently work with
+        // React Native Expo v52.
+        // See https://github.com/expo/expo/issues/33549 for more context.
         let stream = client.introduce(request);
         for await (const response of stream) {
           setResponses((resps) => [
@@ -73,11 +84,7 @@ function Index() {
       } catch (err) {
         let text = "";
         if (err instanceof ConnectError) {
-          if (err.code === Code.Unimplemented) {
-            text = `Hi, ${statement}.  Streaming is not supported in React Native currently.`;
-          } else {
-            text = `A Connect error has occurred: ${err.code} - ${err.message}`;
-          }
+          text = `A Connect error has occurred: ${err.message}`;
         } else {
           text = `An error has occurred: ${err}`;
         }

react-native/metro.config.js

@@ -1,4 +1,5 @@
-const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const { getDefaultConfig } = require("@expo/metro-config");
+const { mergeConfig } = require("metro-config");
 
 const defaultConfig = getDefaultConfig(__dirname);