Does not work well with expo

[krunaldodiya]

Both @react-native-community/netInfo and @react-native-community/async-storage gives error while using with react-native-web with Expo

step to produce 1) create react native app using expo init myApp 2) add offix client 3) run expo start:web

[wtrocki]

Hi

I looks we forgot to mention that for expo we need to swap packages to react native ones. See #23 for more context. We will add that info to docs

[darahayes]

Hi there, as @wtrocki mentioned we will add an extra note to our documentation about this particular issue with Expo. According to this Github issue (https://github.com/react-native-community/react-native-netinfo/issues/124) it should be possible to use the react-native-community packages starting with expo sdk version 33 and above. Which version of expo are you using? Thanks.

[darahayes]

Ahh my bad, I did some further research. It seems the @react-native-community/netinfo works in expo but the @react-native-community/async-storage one does not. Updating the docs accordingly. Thanks for logging this issue!

[darahayes]

Feel free to open again if necessary!

[krunaldodiya]

Hi, thanks for resolving issue, but I am still having issue with netinfo package, please not that when using device it works fine, but when using browser (react-native-web) does not work at all,

this is my offix client

import { AsyncStorage } from "react-native";

import { HttpLink, InMemoryCache } from "apollo-boost";
import { ApolloLink } from "apollo-link";
import { setContext } from "apollo-link-context";
import { ApolloOfflineClient } from "offix-client";
import { httpUrlProd } from "../libs/vars";
import NetInfo from "@react-native-community/netinfo";

const networkStatus = {
  onStatusChangeListener(callback) {
    const listener = connected => {
      callback.onStatusChange({ online: connected });
    };
    NetInfo.isConnected.addEventListener("connectionChange", listener);
  },
  isOffline() {
    return NetInfo.getConnectionInfo().then(connected => !connected);
  }
};

const authLink = setContext(async (req, { headers }) => {
  const token = await AsyncStorage.getItem("token");

  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ""
    }
  };
});

const httpLink = new HttpLink({
  uri: httpUrlProd
});

const link = ApolloLink.from([authLink, httpLink]);

export default new ApolloOfflineClient({
  cache: new InMemoryCache(),
  link,
  offlineStorage: AsyncStorage,
  cacheStorage: AsyncStorage,
  networkStatus,
  retryOptions: {
    attempts: { max: Infinity }
  },
});

after setting up this with expo, i am simply running command expo start --web which does not work

console error

bundle.js:21387 Uncaught Invariant Violation: Trying to subscribe to unknown event: "function(t){var n=te(t);e.online!==n&&(e.online=n,e.online?e.emit("online"):e.emit("offline"))}"
    at invariant (http://192.168.0.103:19006/static/js/bundle.js:21387:15)
    at Object.addEventListener (http://192.168.0.103:19006/static/js/bundle.js:101055:62)
    at new e (http://192.168.0.103:19006/static/js/bundle.js:57285:44998)
    at Module.<anonymous> (http://192.168.0.103:19006/static/js/bundle.js:57285:44871)
    at n (http://192.168.0.103:19006/static/js/bundle.js:57285:124)
    at Object.<anonymous> (http://192.168.0.103:19006/static/js/bundle.js:57285:1181)
    at n (http://192.168.0.103:19006/static/js/bundle.js:57285:124)
    at ../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/node_modules/pusher-js/dist/react-native/pusher.js (http://192.168.0.103:19006/static/js/bundle.js:57285:923)
    at Object.<anonymous> (http://192.168.0.103:19006/static/js/bundle.js:57285:932)
    at Object.../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/node_modules/pusher-js/dist/react-native/pusher.js (http://192.168.0.103:19006/static/js/bundle.js:57286:30)
    at __webpack_require__ (http://192.168.0.103:19006/static/js/bundle.js:727:30)
    at fn (http://192.168.0.103:19006/static/js/bundle.js:101:20)
    at Object.../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/node_modules/pusher-js/react-native.js (http://192.168.0.103:19006/static/js/bundle.js:57297:18)
    at __webpack_require__ (http://192.168.0.103:19006/static/js/bundle.js:727:30)
    at fn (http://192.168.0.103:19006/static/js/bundle.js:101:20)
    at Module.../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/src/graphql/offix.ts (http://192.168.0.103:19006/static/js/bundle.js:129746:80)
    at __webpack_require__ (http://192.168.0.103:19006/static/js/bundle.js:727:30)
    at fn (http://192.168.0.103:19006/static/js/bundle.js:101:20)
    at Module.../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/App.tsx (http://192.168.0.103:19006/static/js/bundle.js:812:76)
    at __webpack_require__ (http://192.168.0.103:19006/static/js/bundle.js:727:30)
    at fn (http://192.168.0.103:19006/static/js/bundle.js:101:20)
    at Module.../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/node_modules/expo/AppEntry.js (http://192.168.0.103:19006/static/js/bundle.js:20556:62)
    at __webpack_require__ (http://192.168.0.103:19006/static/js/bundle.js:727:30)
    at fn (http://192.168.0.103:19006/static/js/bundle.js:101:20)
    at Object.0 (http://192.168.0.103:19006/static/js/bundle.js:142538:18)
    at __webpack_require__ (http://192.168.0.103:19006/static/js/bundle.js:727:30)
    at http://192.168.0.103:19006/static/js/bundle.js:794:37
    at http://192.168.0.103:19006/static/js/bundle.js:797:10
invariant @ bundle.js:21387
addEventListener @ bundle.js:101055
e @ bundle.js:57285
(anonymous) @ bundle.js:57285
n @ bundle.js:57285
(anonymous) @ bundle.js:57285
n @ bundle.js:57285
../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/node_modules/pusher-js/dist/react-native/pusher.js @ bundle.js:57285
(anonymous) @ bundle.js:57285
../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/node_modules/pusher-js/dist/react-native/pusher.js @ bundle.js:57286
__webpack_require__ @ bundle.esm.js:272
fn @ context.esm.js:84
../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/node_modules/pusher-js/react-native.js @ bundle.js:57297
__webpack_require__ @ bundle.esm.js:272
fn @ context.esm.js:84
../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/src/graphql/offix.ts @ bundle.js:129746
__webpack_require__ @ bundle.esm.js:272
fn @ context.esm.js:84
../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/App.tsx @ bundle.esm.js:357
__webpack_require__ @ bundle.esm.js:272
fn @ context.esm.js:84
../../../../../../../../../../../../../Volumes/Softwares/Code/socialstock/node_modules/expo/AppEntry.js @ bundle.js:20556
__webpack_require__ @ bundle.esm.js:272
fn @ context.esm.js:84
0 @ bundle.js:142538
__webpack_require__ @ bundle.esm.js:272
(anonymous) @ bundle.esm.js:339
(anonymous) @ bundle.esm.js:342
bundle.js:57285 Uncaught (in promise) TypeError: Cannot read property 'type' of undefined
    at te (bundle.js:57285)
    at bundle.js:57285

[wtrocki]

Looks like react native web using different api. For react native web you can actually use existing browser api that is already embedded in offix. So I guess having codebase that enables them depending on target will be the best solution for your own needs.

Offix works with web without any special configuration - for native rn we need those wrappers but only for native ones.

[krunaldodiya]

can you please provide example code for both web and native together ?

[wtrocki]

React Native -> requires extension that are documented Web -> requires no extensions - all should work

To switch between platform see: https://facebook.github.io/react-native/docs/platform-specific-code#__docusaurus