How to use react-native-offline - 8 common examples

export async function preAuth () {
  if (!await checkInternetConnection()) {
    // return early if not connected
    return false
  }

  if (preAuthorizing) {
    try {
      // allow 5 seconds for active preauthorization to complete (after which
      // whatever is waiting will be able to continue)
      await pTimeout(waitForPreauthorization(), 5000)

      console.log('alternate preAuthorization succeeded')

      return true
    } catch (err) {
      console.log('alternative preAuthorization timed out or failed', err)

// @flow
import { Platform } from 'react-native';
import { composeWithDevTools } from 'remote-redux-devtools';
import { applyMiddleware, createStore } from 'redux';
import Thunk from 'redux-thunk';
import { createNetworkMiddleware } from 'react-native-offline';
import { persistStore, autoRehydrate } from 'redux-persist';
import realmPersist from 'redux-persist-realm';

import reducer from './reducer';

const preloadedState = {};
const networkMiddleware = createNetworkMiddleware();
const composeEnhancers = composeWithDevTools({
    name: Platform.OS,
    hostname: '127.0.0.1',
    port: 8888,
    realtime: true,
});

const store = createStore(
    reducer,
    preloadedState,
    composeEnhancers(
        applyMiddleware(...[
            networkMiddleware,
            Thunk,
        ]),
        autoRehydrate()

// @flow

import { create } from 'apisauce';
import { withNetworkConnectivity } from 'react-native-offline';

export const API_URL = __DEV__
    ? 'http://localhost:3030'
    : 'http://138.197.149.40';
export const withCheckInternet = withNetworkConnectivity({
    pingServerUrl: API_URL,
});

const api = create({
    baseURL: API_URL,
});

api.addResponseTransform((response) => {
    if (response.status >= 400 || !response.ok) {
        const error = new Error(response.status || response.problem);

        error.status = response.status;
        error.response = response;

        throw error;
    }

(isConnected) => {
      if (isConnected) {

        //check if there is internet connection
        checkInternetConnection().then((hasInternet) => {
          if (hasInternet)
            onConnect && onConnect()
          else
            onDisconnect && onDisconnect()
        })
      }
      else {
        onDisconnect && onDisconnect()
      }
    }
  )

createNetworkMiddleware
} from "react-native-offline";

import LoginScreen from "./src/screens/LoginScreen";
import UsersScreen from "./src/screens/UsersScreen";
import ChatScreen from "./src/screens/ChatScreen";

import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware } from "redux";

import ChatReducer from "./src/reducers/ChatReducer";

import { watcherSaga } from "./src/sagas";

const sagaMiddleware = createSagaMiddleware();
const networkMiddleware = createNetworkMiddleware();

const persistConfig = {
  key: "root",
  storage,
  blacklist: ["network", "chat"]
};

const chatPersistConfig = {
  key: "chat",
  storage: storage,
  blacklist: ["isNetworkBannerVisible"]
};

const rootReducer = combineReducers({
  chat: persistReducer(chatPersistConfig, ChatReducer),
  network

export default function createReduxStore({
  withSaga = false,
  queueReleaseThrottle = 1000,
} = {}) {
  const networkMiddleware = createNetworkMiddleware({
    regexActionType: /^OTHER/,
    actionTypes: ['ADD_ONE', 'SUB_ONE'],
    queueReleaseThrottle,
  });

  const sagaMiddleware = createSagaMiddleware();

  const rootReducer = combineReducers({
    counter,
    network,
  });

  const middlewares = [networkMiddleware];
  if (withSaga === true) {
    middlewares.push(sagaMiddleware);
  }

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case offlineActionTypes.CONNECTION_CHANGE:
      if (network.isConnected != action.payload && !action.payload) {
        return { ...state, isNetworkBannerVisible: true };
      } else {
        return { ...state, isNetworkBannerVisible: false };
      }

    case SET_CURRENT_USER:
      return { ...state, user: action.user };

    case SET_CURRENT_ROOM:
      return { ...state, room: action.room };

    case PUT_USER:
      const current_users = [...state.users];
      const users = current_users.concat(action.user);
      return { ...state, users };

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case offlineActionTypes.CONNECTION_CHANGE:
      if (network.isConnected != action.payload && !action.payload) {
        return { ...state, isNetworkBannerVisible: true };
      } else {
        return { ...state, isNetworkBannerVisible: false };
      }

    case SET_CURRENT_USER:
      return { ...state, user: action.user };

    case SET_CURRENT_ROOM:
      return { ...state, room: action.room };

    case PUT_USER:
      const current_users = [...state.users];
      const users = current_users.concat(action.user);
      return { ...state, users };