Zapp React Native UI Components

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();
  }
}