Package Exports

@applicaster/zapp-react-native-ui-components
@applicaster/zapp-react-native-ui-components/Components/AppContainer
@applicaster/zapp-react-native-ui-components/Components/ContentScreen
@applicaster/zapp-react-native-ui-components/Components/DisplayError
@applicaster/zapp-react-native-ui-components/Components/Focusable
@applicaster/zapp-react-native-ui-components/Components/FocusableGroup
@applicaster/zapp-react-native-ui-components/Components/MasterCell
@applicaster/zapp-react-native-ui-components/Components/NavBar
@applicaster/zapp-react-native-ui-components/Components/ZappUIComponent
@applicaster/zapp-react-native-ui-components/Context/MenuTitleContext
@applicaster/zapp-react-native-ui-components/Decorators/Navigator
@applicaster/zapp-react-native-ui-components/Decorators/RiverResolver

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@applicaster/zapp-react-native-ui-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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