React Native support

It looks like there are just a couple little missing pieces to work with react native. I’m not sure exactly how to integrate them properly into the codebase so I will put the snippets here. We just need a NetworkStatus implementation and to pass AsyncStorage for the storage engine when creating the client. IMO these should just be defaults when react native is the environment.

Detecting react-native

if (typeof navigator != 'undefined' && navigator.product == 'ReactNative') {
  // I'm in react-native, use the ReactNativeNetworkStatus and AsyncStorage
}

React native network status implementation

import {  NetInfo } from "react-native"
import { NetworkStatus, NetworkStatusChangeCallback } from "apollo-offline-client"

class ReactNativeNetworkStatus implements NetworkStatus {
  public onStatusChangeListener(callback: NetworkStatusChangeCallback): void {
    const listener = (connected: boolean) => {
      callback.onStatusChange({online: connected})
    };
    NetInfo.isConnected.addEventListener('connectionChange', listener)
  }

  public async isOffline(): Promise<boolean> {
    const isConnected = await NetInfo.isConnected.fetch()
    return !isConnected
  }
}

Config for react native

import { AsyncStorage } from "react-native"
import ReactNativeNetworkStatus from "./react-native-network-status.ts"

let config = {
  httpUrl: "http://localhost:4000/graphql",
  wsUrl: "ws://localhost:4000/graphql",
  storage: AsyncStorage,
  networkStatus: new ReactNativeNetworkStatus()
} 

edit: oops it looks like AsyncStorage might not be just drop in. Types don’t line up but I think it will work regardless.

[wtrocki]

Additionally, I will refactor current config to decouple cordova integration and provide a similar package for cordova. After this is done documentation will have separate chapters for each platform and we will avoid having if inside the package.

We do not have any example application now for the React Native so looking for a community for input and end to end testing the package.

[wtrocki]

Docs: https://offix.dev/docs/next/react-native

This is pointing to master. We going to land it in 0.12.0 release