@applicaster/quick-brick-core

QuickBrick Core

This package contains the Core code of the QuickBrick App Use the available methods to create and start a quick-brick app

import * as React from "react";
// use only one of the two following imports, dependending wether you use ReactDOM or React-Native
import { AppRegistry } from "react-native"; // only if using React-native
import ReactDOM from "react-dom"; // only if using ReactDOM
import { createZappApp, renderZappApp } from "@applicaster/quick-brick-core";
import { BaseApp } from "@applicaster/zapp-${platform}-app";

const options = {
  // ... all the options - see below
  ZappApp: BaseApp,
};

const QuickBrickApp = createZappApp(options);

const App = (props) => <QuickBrickApp {...props} />;

// use only one of the two lines below
renderZappApp({ AppRegistry, App }); // if using React-native
renderZappApp({ ReactDOM, App, appMountId: "zappApp" }); // if using ReactDOM

createZappApp(options)

Creates a Zapp App with the provided options :

• rivers: layout.json as provided by Zapp
• components: (optional) map of additional components, where the key should be the PascalCase'd name of the UI Builder ui_component type (if the ui_component type is screen_picker, the component name here needs to be ScreenPicker), and the value should be the React native implementation of the component. This component map is merged with the one provided from @applicaster/zapp-react-native-ui-components, but additional components will override default ones if they have the same key.
• plugins: array of available plugins. For each plugin, you should declare the following properties:
  • module: the plugin's callable function / React component
  • name: the name of the plugin - should match the PascalCase'd identifier of the plugin. If your plugin's identifier is react-native-article, the name should be ReactNativeArticle
  • type: the type of the plugin, as it is defined in the plugin's manifest in Zapp
• reduxStoreOptions: (optional)
  • additionalReducers: map of reducers to load in the redux store, on top of the existing ones. See available reducers' names to avoid name collision which would override your own custom reducers
  • additionalMiddlewares: array of additional middlewares to load - by default, the ZappApp will have the thunk middleware, but others can be added
  • initialState: optional initial state for the redux store
• pluginConfigurations: the remote configuration options for plugins, as coming from Zapp
• remoteConfigurations: Zapp's remote configurations
• appSettings: arbitrary app settings which will be stored in the redux store.
  • runtimeConfigurationUrls: map of the urls to reload some runtime configuration properties, such as styles_url, plugin_configurations_url, remote_configurations_url and rivers_url. If these urls are provided, the app will try to download and apply the latest available remote runtime configuration.
• ZappApp: Base Zapp app to use. Typically an app bootstrapped with the createQuickBrickApp function

RenderZappApp(options)

Renders the App in the appropriate environment. Options are:

• AppRegistry: React Native's App Registry module. only required if rendering in React Native
• ReactDOM: ReactDOM's renderer module. only required if rendering for the web
• App: App to render
• appMountId: required if rendering for the web. id of the DOM node to mount to the app.

createQuickBrickApp(options)

This function allows to quickly create a QuickBrick app by providing the required module. Options are:

• InteractionManager: Decorator to provide enriched Interaction Manager for the app.
• Layout: Layout Component to use
• navigations: Object with Navigation modules:
  • Router main Router component to use
  • withRouter Decorator to use to pass route info to a component in the app
• QuickBrickManager: QuickBrickManager module to inject

NavigationProvider

This module provides routing, navigation and navBar control to the QuickBrick applications. The Navigator provider is constructed using NavigationContext and navigator object, which are exposed to the user by withNavigator Decorator and useNavigation hook. For keeping routing history Navigation Provider is using 3rd party library react-router that is used internally by the navigator.

The app is already decorated with the Navigation Provider Context so the only thing, to use navigation in your screen/componentis to usewithNavigatordecorator oruseNavigationHook` directly

With decorator: The navigator object will be passed to your component as an navigator prop

import * as R from "ramda";
import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";

export const YourScreen = R.compose(
  // other decorators
  withNavigator
)(YourComponent);

With hook:

import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";

const navigator = useNavigation();

navigator object methods and properties:

currentRoute: string - Holds current pathname eg /river/<id>; previousAction: string - Hold previous navigation actions, eg. REPLACE; isNavBarVisible: boolean - Current status of navbar screenTitle: string - Current screen title screenSummary: string - Current screen summary activeRiver - Getter that returns information about active River with the following properties:

{
  advertising: {},
  data: {},
  general: {},
  home: boolean,
  home_offline: boolean,
  hooks: {},
  id: string,
  localizations: {},
  name: string,
  navigations: [{}],
  rules: {},
  styles: {},
  supports_offline: boolean,
  type: string,
  ui_components: []
}

showNavBar() => void - it sets isNavbarVisible to true hideNavBar() => void - it sets isNavBarVisible to false setScreenTitle(title: string) => void - sets screen title setScreenSummary(summary: string) => void - sets screen summary push(item) => void - it navigates to the item using push method replace(item) => void - it navigates to the item using replace method canGoBack() => boolean - Check if goBack action could be invoked successfully goBack() => void - goes to the previous no-hook screen in the navigation stack goHome() => void - goes to the home screen, using replace method screenData => - returns data associated with current route