@applicaster/zapp-react-native-ui-components

Applicaster Zapp React Native ui components for the Quick Brick App

Usage no npm install needed!

<script type="module">
  import applicasterZappReactNativeUiComponents from 'https://cdn.skypack.dev/@applicaster/zapp-react-native-ui-components';
</script>

README

Zapp React Native UI Components

CircleCI npm version

logo

This package contains the React Native UI components for the quick brick app

Contributing

  • Follow the steps in the main README to set up the Zapp-React-Native repo, and run the app.
  • add your component as explained below
  • in order to see the component in the App, you may need to manually edit the rivers_configuration.json file so that one screen includes your new component

Available Components

AppContainer

The AppContainer components wraps the content of the app in a canvas, and passes the screen's dimensions to its children. It also applies the background color of the app if any

props:

  • styles: style data - expects at least a { app: { backgroundColor: "" } } property
  • children: function which takes the react-native Dimensions object and renders the children to load inside the AppContainer

River

The River component renders an entry in layout.json by assembling a screen made of the ui_components inside the corresponding general_content screen in the UI builder. It will pass the component data to each ui_component, which allows components to access the datasource, and other configuration from the UI Builder. When rendering the ui_components, the River component automatically applies decorators which provide the component with the zapp-pipes data loader and a navigator object which can be used to call a new route for the app to show.

props:

  • rivers: map of entries in layout.json, where the key is the river id, and the value is the river data
  • screenId: id of the river to display. This component is wrapped by a decorator which will resolve the river based on the screenId and the provided rivers map

Grid, List, Hero

These components render UI Builder grid, list and hero components inside a River.

props:

  • styles: styles data from Zapp
  • component: the ui_component data from layout.json for this component
  • zappPipesData: object representing the data for that component, from the data source defined in the component prop.
    • loading: boolean which indicates if the zapp pipes data is being loading or not
    • url: datasource url resolved for this component
    • data: result of the fetched datasource. this property will be populated when the zapp pipes data has been successfuly loaded.
  • navigator: navigator object, useful for navigating in the app
    • push: (item: any) => void: will push a new nested route to navigate to the item. the entire item data will be stored in the route's state
    • replace: (item: any) => void: will replace the current root route with the provided one. used mainly for main level navigation. the entire item data will be stored in the route's state
    • canGoBack: () => boolean: tells wether the navigation is at the main root level or not
    • goBack: () => void: returns to the previous route
    • screenData: any: returns the current route's state (the item provided when calling push or replace)

Adding a component

  • create a folder in ./Components
  • make sure your component uses the standard export, and not the default syntax
// Good
export class MyAwesomeComponent extends React.Component {
  /* ... */
}

// Not good
class MyAwesomeComponent extends React.Component {
  /* ... */
}
export default MyAwesomeComponent;
  • in Components/index.js add the export for your component
export { MyAwesomeComponent } from "./MyAwesomeComponent";

We provide flow types for component props - please use it to make sure your component will be compliant

import * as React from "react";
import type { ZappComponentProps } from "../../flow-types"; // in the root of the project

export class MyComponent extends React.Component<ZappComponentProps> {
  /* ... */
}

Connecting my component to Zapp Pipes

Zapp App components rely on Zapp-Pipes to load data.

Components are automatically loaded from the rivers configuration json. This configuration includes the props required for zapp pipes to fetch & return the data. In order to connect your component to ZappPipes, you simply need to use the ZappPipesDataConnector decorator. This requires to use a specific babel plugin babel-preset-react-native-stage-0.

import * as React from "react";
import { View, Text } from "react-native";
import { zappPipesDataConnector } from "../ZappPipesDataConnector";
import type { ZappComponentProps } from "../../flow-types";

@zappPipesDataConnector
export class MyComponent extends React.Component<ZappComponentProps> {
  renderComponent = (data) => {
    return (
      <View>
        <Text>{data.title}</Text>
        <Text>{data.summary}</Text>
      </View>
    );
  };

  renderPlaceholder = () => {
    return;
    <View>
      <Text>loading data...</Text>
    </View>;
  };

  render() {
    const { zappPipesData } = this.props; // this is injected by the decorator

    if (zappPipesData && !zappPipesData.loading) {
      // data has finished loaded and is available
      return this.renderComponent(zappPipesData.data);
    }

    // data is not loaded - we should return a placeholder until data lands
    return this.renderPlaceholder();
  }
}