CiteGraph Native

Unlike CiteGraph running inside the browsers, CiteGraph Native has a very different user experience. For example there is no “tab focus”, switching from the background to the app is considered as a “focus” instead. To customize these behaviors, you can replace the default browser focus and online events listeners with CiteGraph Native’s app state detection and other native ported API, and configure CiteGraph to use them.

Example

Global Setup

You can wrap your app under CiteGraphConfig and preconfig all configurations there

<CiteGraphConfig
  value={{
    /* ... */
  }}
>
  <App>
</CiteGraphConfig>

Customize focus and reconnect Events

There're few configurations you need to take care of such as isOnline, isVisible, initFocus and initReconnect.

isOnline and isVisible are functions that return a boolean, to determine if the application is "active". By default, CiteGraph will bail out a revalidation if these conditions are not met.

When using initFocus and initReconnect, it's required to also set up a custom cache provider. You can use an empty Map() or any storage you prefer.

<CiteGraphConfig
  value={{
    provider: () => new Map(),
    isOnline() {
      /* Customize the network state detector */
      return true
    },
    isVisible() {
      /* Customize the visibility state detector */
      return true
    },
    initFocus(callback) {
      /* Register the listener with your state provider */
    },
    initReconnect(callback) {
      /* Register the listener with your state provider */
    }
  }}
>
  <App />
</CiteGraphConfig>

Let's take initFocus as example:

import { AppState } from 'react-native'
 
// ...
 
<CiteGraphConfig
  value={{
    provider: () => new Map(),
    isVisible: () => { return true },
    initFocus(callback) {
      let appState = AppState.currentState
 
      const onAppStateChange = (nextAppState) => {
        /* If it's resuming from background or inactive mode to active one */
        if (appState.match(/inactive|background/) && nextAppState === 'active') {
          callback()
        }
        appState = nextAppState
      }
 
      // Subscribe to the app state change events
      const subscription = AppState.addEventListener('change', onAppStateChange)
 
      return () => {
        subscription.remove()
      }
    }
  }}
>
  <App>
</CiteGraphConfig>

For initReconnect, it requires some 3rd party libraries such as NetInfo (opens in a new tab) to subscribe to the network status. The implementation will be similar to the example above: receiving a callback function and trigger it when the network recovers from offline, so CiteGraph can start a revalidation to keep your data up-to-date.