Home
While the real documentation no there yet, here are some basics to get you started.
Every view receives a config as its argument. The config is used by the framework to calculate the layout and style of the created view. The id passed to the config should be unique in the page scope as it's used to keep track of views between updates. Most views have a specific config associated with it, i.e. Stack accepts StackConfig. If there is no specific config, then basic Config should be used.
The core package provides only a SimpleScreen which on watches is a screen without scrolling or pagination. If you wish to have scrolling enabled, you should use ScrollableScreen from the watch package, and if you wish to have a paginated screen, you should use ScreenPager alongside PagerEntry from watch package.
When using ScrollableScreen one may use rememberScrollPosition to keep track and modify the scroll position. Similarly, when using ScreenPager, rememberCurrentPage may be used to keep track and update current page.
Zapp provides three basic layout types: Row, Column, and Stack. You can customize how their children are positioned by setting alignment and arrangement properties in the layout config, or setting weight on children.
These examples from Jetpack Compose docs show nicely how different arrangements look:
Zapp will automatically update your UI when the state of your app changes. In order to store a value, you need to call remember, which returns an object containing the value passed as a parameter. If you want to update or read the stored value, you can do so using the value property.
If you need persistent storage, you can use rememberSaveable provided by the watch package. It accepts a key and a default value. When you assign something to that value it's associated with that key so multiple rememberSaveable with the same key will have the same value.
To react to changes in specific values, you can use sideEffect. The syntax is as follows:
sideEffect((restoring) => {
// some stuff
return () => {
// cleanup
}
}, ...keys)The function passed to the sideEffect will be called when any of the keys change and if the previous call to the effect returned a function, it will be called before. In other words, you can do cleanup in the returned function, but it's not necessary. The restoring parameter is related to restoring state when navigating back, it will be true only when coming back to the screen so you may not need to fetch the data again as it will be restored by Zapp.
The ui package provides following components:
ActivityIndicatorButtonCheckBoxDividerPageIndicator-
RadioGroup,RadioButton Switch
It also provides Theme object which holds colors in line with Material 3 color system. You can set your own theme using the setTheme method. If you don't pass your theme to it, a default one will be used.