@applicaster/zapp-react-native-ui-components
This package is our ui component library. It contains the main UI Builder components, and some decorators which are wrapped on top of the components to pass in features like navigation tools, zapp-pipes data connector...
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: "" } }
propertychildren
: function which takes the react-nativeDimensions
object and renders the children to load inside the AppContainer
River
The River component renders an entry in rivers.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 inrivers.json
, where the key is the river id, and the value is the river datascreenId
: 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
Grid, List, Hero
These components render UI Builder grid
, list
and hero
components inside a River
.
props:
styles
: styles data from Zappcomponent
: theui_component
data fromrivers.json
for this componentzappPipesData
: 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 noturl
: datasource url resolved for this componentdata
: 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 apppush: (item: any) => void
: will push a new nested route to navigate to the item. the entireitem
data will be stored in the route's statereplace: (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 statecanGoBack: () => boolean
: tells wether the navigation is at the main root level or notgoBack: () => void
: returns to the previous routerouteData: () => any
: returns the current route's state (theitem
provided when callingpush
orreplace
)