Should the api library work with react native?

[richstokes]

Curious about this so figured I'd see if I could make a quick PoC app.

After following what I think should be the minimum needed, its failing to connect.

I'm doing this:

import AtpApi, { ServiceClient as AtpServiceClient } from '@atproto/api'
const client = AtpApi.service('http://localhost:2583');

const res = await client.com.atproto.session.create({
            username: 'alice',
            password: 'alice-pass',
        });

Which results in this when I open the app (launching via Expo):

[TypeError: this._url.endsWith is not a function. (In 'this._url.endsWith('/')', 'this._url.endsWith' is undefined)]

I spent a bit of time over the last couple of evenings looking to see if it was something on the React side, it doesn't seem to be.

According to this doc I am calling the library correctly?

[pfrazee]

It should work with RN since that's where I use it. I assume there's no stacktrack being given?

[richstokes]

This is the full trace:

 WARN  Possible Unhandled Promise Rejection (id: 0):
TypeError: this._url.endsWith is not a function. (In 'this._url.endsWith('/')', 'this._url.endsWith' is undefined)
URL@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:29214:32
constructMethodCallUri@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:104411:22
@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:104592:47
generatorResume@[native code]
asyncGeneratorStep@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:21010:26
_next@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:21029:29
@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:21034:14
tryCallTwo@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:25631:9
doResolve@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:25762:25
Promise@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:25650:14
@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:21026:25
create@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:110210:39
@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:157312:56
generatorResume@[native code]
asyncGeneratorStep@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:21010:26
_next@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:21029:29
@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:21034:14
tryCallTwo@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:25631:9
doResolve@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:25762:25
Promise@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:25650:14
@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:21026:25
_signIn@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:157319:25
signIn@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:157306:25
@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:111738:23
loadModuleImplementation@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:252:14
@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:1135:48
loadModuleImplementation@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:252:14
guardedLoadModule@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:153:47
global code@http://192.168.1.241:19000/index.bundle?platform=ios&dev=true&hot=false:157838:4

Interestingly, if I log the client object, it seems that some fields are not populated? i.e:

{"_baseClient": {"xrpc": {"fetch": [Function defaultFetchHandler], "lex": [Lexicons]}}, "app": {"_service": [Circular], "bsky": {"_service": [Circular], "actor": [_ActorNS], "embed": [_EmbedNS], "feed": [_FeedNS], "graph": [_GraphNS], "notification": [_NotificationNS], "system": [_SystemNS]}}, "com": {"_service": [Circular], "atproto": {"_service": [Circular], "account": [_AccountNS], "admin": [_AdminNS], "blob": [_BlobNS], "handle": [_HandleNS], "repo": [_RepoNS], "report": [_ReportNS], "server": [_ServerNS], "session": [_SessionNS], "sync": [_SyncNS]}}, "xrpc": {"baseClient": {"fetch": [Function defaultFetchHandler], "lex": [Lexicons]}, "headers": {}, "uri": "http://localhost:2583/"}}

I suppose to ask the Q backwards, do you have a working example beyond whats in the doc/readme that one should need to use with RN?

[pfrazee]

I've created an example repo to help people with this. There are a couple of polyfills you have to add: https://github.com/pfrazee/example-atproto-rn-app