Negligible Participation Metric

    @applicaster/zapp-react-native-ui-components
    TypeScript icon, indicating that this package has built-in type declarations

    6.1.6 • Public • Published

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

    Install

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

    DownloadsWeekly Downloads

    4,265

    Version

    6.1.6

    License

    MIT

    Unpacked Size

    739 kB

    Total Files

    583

    Last publish

    Collaborators

    • f-roland-applicaster
    • zapp-ci
    • meirmanr
    • applicaster-devs
    • applicaster-external-devs