@applicaster/quick-brick-core
Version:
Core package for Applicaster's Quick Brick App
137 lines (106 loc) • 6.3 kB
Markdown
# QuickBrick Core
[](https://github.com/applicaster/QuickBrick/tree/main)
This package contains the Core code of the QuickBrick App
Use the available methods to create and start a quick-brick app
```javascript
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
- `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.
The app is already decorated with the Navigation Provider Context so the only thing, to use navigation in your screen/component`is to use`withNavigator`decorator or`useNavigationHook` directly
**With decorator:**
The navigator object will be passed to your component as an `navigator` prop
```javascript
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:**
```javascript
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:
```javascript
{
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