react-native example doesn't appear to be working

[TheKeenestKeen]

I've installed and ran the example project and installed Expo-Go. The following is logged to the terminal in my code editor after entering text in the mobile UI: ConnectError: [internal] FileReader.readAsArrayBuffer is not implemented

I appear to have followed the README step by step, so I'm not too sure how to resolve this.

[smaye81]

This is actually due to a limitation in React-Native and their lack of support for FileReader.readAsArrayBuffer. See the PR here.

This actually used to work in the past for unary requests, but something may have changed in our Connect repo that is causing this to now fail for unary requests also. We also have this issue to track with a possible workaround if it helps at all.

[TheKeenestKeen]

Thanks

[smaye81]

No problem, apologies for the inconvenience. I will update this repo to make more detailed mention of this issue for react-native.

[TheKeenestKeen]

Much appreciated. I applied the patch for FileReader.readAsArrayBuffer and I can successfully communicate with the remote server at https://demo.connect.build using the react-native example. However, if I point the application to one of my locally running express servers (from this repo), I get a message ConnectError: [internal] Network request failed. Is there a way to configure the server such that it behaves in a way similar to the remote server at https://demo.connect.build?

An example in the README showing this working with a local server would be greatly appreciated.

[timostamm]

If the example does not work, we have to either fix up the code causing the issue, or remove the example.

[smaye81]

Connect does not currently work at all with React Native, so we can either:

• remove this example altogether until React Native fully supports Fetch
• use the example XHR Transport that was posted in Streaming support in React Native connect-es#199. I tested this and it allows both unary and server-streaming to work.

@timostamm let me know how you want to proceed.

[timostamm]

@smaye81, the example XHR Transport is great. I think it's an excellent example for implementing a Transport. In that sense, it fits well with the other examples in this repository. Let's add it here.

I'm sure @Madumo won't mind (but please let us know if you do, Mathieu).

[smaye81]

Added the custom transport in PR 602.

[smaye81]

@TheKeenestKeen re: your network issue, can you provide some more error details? Is there a stack trace showing what is occurring?

[TheKeenestKeen]

Sorry for the late response @smaye81. I applied the patch as described in this post facebook/react-native#34402 (comment) to the react-native example in this repo. This seems to work when pointing to the remote Eliza server (app works as expected), but when I spin up the express server from this repo and point the mobile client to the express server at http://localhost:3000, I get the following:

at node_modules/@bufbuild/connect/dist/cjs/connect-error.js:1:13 in <global>
at node_modules/@bufbuild/connect/dist/cjs/connect-error.js:42:8 in ConnectError#constructor
at node_modules/@bufbuild/connect/dist/cjs/connect-error.js:107:31 in connectErrorFromReason
at node_modules/@bufbuild/connect-web/dist/cjs/connect-transport.js:80:58 in unary
- ... 8 more stack frames from framework internals

What I did above was just a stab in the dark to see if I could get something working and it is unrelated to the approach in the current open PR in this repo. Please ignore my approach above.

[smaye81]

Hi @TheKeenestKeen. Instead of using localhost, try using the IP address of the machine that is running the Express server. That should hopefully work.

Also, are you running on iOS or Android? Apple disables HTTP requests by default, so if you want this to be more of a long-term thing, see docs here.

[TheKeenestKeen]

Thanks @smaye81 -- using the IP address instead got it working! For some reason I didn't mentally register that I obviously can't access my laptop via localhost from my Android device 😮‍💨 😄

[smaye81]

Great! Going to close this issue, but if you encounter any other problems, feel free to open a new issue.