WhoBuilt

Network layer in React Native

Sep 14, 2018· 21 min· 1.1K views·Watch on YouTube

Speaker

Alexey KureevReact Native developer at Meta

Alexey Kureev, a React Native developer at Birdspot in Amsterdam, explains React Native networking at a Callstack talk.

How React Native networking works

Kureev introduces XMLHttpRequest, Fetch, and WebSocket as platform APIs exposed to JavaScript. React Native routes XMLHttpRequest through its networking module, which uses OkHttp on Android and NSURLSession on iOS. Fetch is polyfilled on top of XMLHttpRequest, so it shares that implementation’s limitations; WebSocket provides persistent, two-way communication.

Debugging network requests

Chrome DevTools does not show React Native requests because they run through the mobile platform, not Chrome’s networking APIs. Desktop traffic tools such as Charles Proxy or Wireshark may not capture requests made by a physical device. Kureev recommends Reactotron, which uses React Native interceptors to display XHR and WebSocket activity.

Sending binary data

Kureev says React Native’s XHR implementation lacked Blob and File support, making binary transfers difficult. A Base64 workaround sends data across the JavaScript bridge as a string, creating substantial overhead, especially for large images. React Native Fetch Blob keeps the data native and passes a small reference across the bridge; Kureev also notes that WebSocket binary support had shipped, while XHR support was still under review.

Credentials and cookies

Kureev contrasts web behavior, where XHR credentials are off by default unless `withCredentials` is enabled, with mobile platforms, which send credentials by default. React Native’s behavior had changed and then been reverted, breaking some applications along the way. He advises checking the implementation and changelog because the policy remained unsettled.

Takeaways

  • Expect Fetch to inherit limitations from React Native’s XMLHttpRequest implementation.
  • Use Reactotron to inspect React Native requests when Chrome DevTools cannot see them.
  • Avoid moving large Base64 payloads across the JavaScript bridge; a native-side blob reference can reduce overhead.
  • Verify cookie and credential behavior for the React Native version your application uses.

Mentioned in this talk

BirdspotInfinite RedExpoCallstack TeamOkHttpChromeCharles ProxyWiresharkReactotronReact Native Fetch BlobReact NativeJavaScriptXMLHttpRequestNSURLSessionFetchWebSocketXHR interceptorWebSocket interceptorBase64 encoding workaround

Search inside this talk

What was claimed 12

Related talks