The Shipcode SDK gives you the ability to display content built in Shipcode within existing React Native apps.

Architecture

The Shipcode SDK is modular, separating the core application logic from specific integration concerns.

Core Plumbing

• The core "plumbing" is located within @shipcode/shipcode.
• It contains a set of polyfills as well as an initialization function that instantiates all of the services required for Shipcode to function.
• The shipcode package also exposes all of the APIs required to render a Shipcode application. However, integrating this directly involves complexity around routing, navigation, navigation bars, tab bars, and more.

Integration Packages

• @shipcode/shipcode-react-navigation: To simplify integration, Shipcode provides a ShipcodeNavigator component in this package. It implements all core navigation functionality using React Navigation.
• @shipcode/shipcode-expo: You will need to provide a means to load remote fonts. Shipcode provides a convenience integration for this with Expo Fonts in this package.

Usage

Dependencies

The main shipcode package requires the following peer dependencies:

• JSON

    "react": ">=18.2.0",
    "react-native": ">=0.73.6",
    "react-native-fast-image": ">=8.6.3",
    "react-native-svg": ">=15.2.0",
    "react-native-video": ">=5.2.1",
    "react-native-webview": ">=13.8.7",
    "react-player": ">=2.16.0"
  

The optional shipcode-expo package requires the following peer dependencies:

• JSON

    "react-native": ">=0.73.6",
    "@react-native-async-storage/async-storage": ">=1.23.1",
    "expo-font": ">=11.10.3",
    "expo-secure-store": ">=12.8.1"
  

The optional shipcode-react-navigation package requires the following peer dependencies:

• JSON

    "react": ">=18.2.0",
    "react-native": ">=0.73.6",
    "@react-navigation/bottom-tabs": ">=6.5.9",
    "@react-navigation/native": ">=6.1.17",
    "@react-navigation/stack": ">=6.3.16",
    "react-native-gesture-handler": ">=2.16.1",
    "react-native-svg": ">=15.2.0"
  

Polyfills

Before registering your main app component, import the following polyfills:

• TypeScript

    import 'react-native-get-random-values';
    import 'react-native-gesture-handler';
    import '@shipcode/shipcode/polyfills';
  

Initialization

Before registering your main app component, import and invoke the Shipcode initialization function:

• TypeScript

    import { initShipcode, GlobalStore } from '@shipcode/shipcode';
    import { ExpoIntegration } from '@shipcode/shipcode-expo';
    import { ReactNavigationIntegration } from '@shipcode/shipcode-react-navigation';
  
    initShipcode({
      App: {
        GlobalStore,
        ...ReactNavigationIntegration,
        ...ExpoIntegration,
      },
    });
  

Rendering Shipcode with ShipcodeNavigator

To display content from Shipcode, you simply need to import and render the ShipcodeNavigator component.

• JavaScript

    import { ShipcodeNavigator } from '@shipcode/shipcode-react-navigation';
  
    // ...
    <ShipcodeNavigator
      fontLoader={fontLoader}
      navigatorRef={navigator}
      onStart={handleStart}
      projectId={PROJECT_ID}
      apiToken={API_TOKEN}
    />;
  

The navigator has several properties:

• fontLoader
• • Required? Yes
  • Description: A callback that loads remote or local fonts. Typically this is Shipcode's own fontLoader but can be any object that provides a loadAsync function.
• navigatorRef
• • Required? Yes
  • Description: A ref that will be set to the instance of react-navigation used by Shipcode.
• projectId
• • Required? Yes
  • Description: The identifier for your project. This can be retrieved from your project settings in Shipcode.
• apiToken
• • Required? Yes
  • Description: A token for accessing content from the Shipcode API. This can be retrieved from your project settings in Shipcode.
• onStart
• • Required? No
  • Description: An optional callback to be invoked once Shipcode has initialized.