React Native Adapter

This guide explains how to use oRPC with React Native, including the platform's supported features and current limitations.

Fetch Link

React Native provides a built-in Fetch API, allowing you to connect to an oRPC server over HTTP. Learn more in the Fetch Client Adapter documentation.

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

const link = new RPCLink({
  origin: 'https://api.example.com',
  url: '/rpc',
  headers: async ({ context }) => ({
    'x-api-key': context?.something ?? ''
  })
})

INFO

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

Limitations

The built-in fetch implementation in React Native does not support File/Blob/ReadableStream<Uint8Array> or AsyncIteratorObject. Follow Support Stream #27741 for progress.

If you're using Expo SDK 56 or later, with expo/fetch, you can:

• Upload File/Blob when they are the entire input.
• Receive ReadableStream<Uint8Array> and AsyncIteratorObject when they are the entire output.

INFO

expo/fetch automatically replaces the global fetch from Expo SDK 56 onward, so no action is required.

TIP

If you're using RPC Link, you can extend the RPC JSON Serializer to support additional types, including binary data, by encoding them as base64.

WebSocket Link

React Native also provides built-in WebSocket support, allowing you to connect to an oRPC server over WebSocket. Learn more in the WebSocket Client Adapter documentation.

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

const link = new RPCLink({
  connect: () => new WebSocket('ws://localhost:3000'),
})

INFO

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