React Native Adapter

React Native is a framework for building native apps using React. For additional context, refer to the HTTP Adapter guide.

Fetch Link

React Native includes a Fetch API, so you can use oRPC out of the box.

WARNING

However, the Fetch API in React Native has limitations. oRPC features like File/Blob, and Event Iterator aren't supported. Follow Support Stream #27741 for updates.

TIP

If you're using RPCHandler/Link, you can temporarily add support for binary data by extending the RPC JSON Serializer to encode these types as Base64.

import { RPCLink } from '@orpc/client/fetch'

const link = new RPCLink({
  url: 'http://localhost:3000/rpc',
  headers: async ({ context }) => ({
    'x-api-key': context?.something ?? ''
  })
  // fetch: <-- polyfill fetch if needed
})

INFO

The link can be any supported oRPC link, such as RPCLink, OpenAPILink, or another custom link.

expo/fetch

If you're using Expo, you can use the expo/fetch to expand support for Event Iterator.

export const link = new RPCLink({
  url: `http://localhost:3000/rpc`,
  async fetch(request, init) {
    const { fetch } = await import('expo/fetch')

    const resp = await fetch(request.url, {
      body: await request.blob(),
      headers: request.headers,
      method: request.method,
      signal: request.signal,
      ...init,
    })

    return resp
  },
})