This package contains the React Native UI components for the quick brick app
- 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
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-nativeDimensions
object and renders the children to load inside the AppContainer
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 inlayout.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 thescreenId
and the providedrivers
map
These components render UI Builder grid
, list
and hero
components inside a River
.
props:
-
styles
: styles data from Zapp -
component
: theui_component
data fromlayout.json
for this component -
zappPipesData
: object representing the data for that component, from the data source defined in thecomponent
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 entireitem
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 entireitem
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 (theitem
provided when callingpush
orreplace
)
-
- 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> {
/* ... */
}
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();
}
}