@applicaster/zapp-react-native-ui-components
Version:
Applicaster Zapp React Native ui components for the Quick Brick App
136 lines (99 loc) • 5.75 kB
Markdown
# Zapp React Native UI Components
[](https://github.com/applicaster/QuickBrick/tree/main)
This package contains the React Native UI components for the quick brick app
## Contributing
- Follow the steps in the [main README](../../README.md) 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
```javascript
// 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
```javascript
export { MyAwesomeComponent } from "./MyAwesomeComponent";
```
We provide flow types for component props - please use it to make sure your component will be compliant
```javascript
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](https://github.com/applicaster/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`.
```javascript
import * as React from "react";
import { View, Text } from "react-native";
import { zappPipesDataConnector } from "../ZappPipesDataConnector";
import type { ZappComponentProps } from "../../flow-types";
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();
}
}
```