Quick Brick React Hooks

Redux store & app data

usePickFromState

Extracts sections of the redux store to use in functional components.

signature

  • stateProps ([string]): array of state properties to extract from the redux store
  • equalityFn (?(prev, next) => boolean): optional equality function to use for knowing when to trigger a refresh of the props.

Example

import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
export function MyComponent(props) {
const { plugins, rivers, appData } = usePickFromState([
"plugins",
"rivers",
"appData",
]);
return /* ... */;
}

App State

useNavigation

Returns the app's navigator object

import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
export function MyComponent(props) {
const navigator = useNavigation();
return; /* ... */
}

useConnectionInfo

Tells when the devices is online or not

signature

  • justOnlineStatus (?boolean): optional flag to only return a boolean indicating whether or not the device is connected. If skipped or set to false, will return the connection info object from the NetInfo module

Example

import { useConnectionInfo } from "@applicaster/zapp-react-native-utils/reactHooks/connection";
export function MyComponent(props) {
const isOnline = useConnectionInfo(true);
const connectionStatus = useConnectionInfo();
return /* ... */;
}

Analytics

useAnalytics

returns analytics functions to send analytic events

signature

  • props ({}): props from the component

Example

import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
export function MyComponent(props) {
const {
sendOnClickEvent,
sendMenuClickEvent,
sendMenuToggleEvent,
sendBackButtonClickEvent,
sendOnNavItemClickEvent,
sendHeaderClickEvent,
sendHardwareBackButtonClickEvent,
sendScreenEvent,
sendVideoItemPlayStartTimedEvent,
sendVideoItemPlayStopTimedEvent,
sendVideoItemPlayEvent,
} = useAnalytics(props);
return; /* ... */
}

Localization

useLocalizedStrings

returns the proper localized strings given the language set for the app & the device, from the localizations configured in Zapp for the plugin.

signature

  • localizations (ZappLocalizationsConfig): localizations config provided by zapp

example

import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
export function MyComponent(props) {
const { localizationConfigFromZapp } = props;
const localizedStrings = useLocalizedStrings(localizationConfigFromZapp);
return; /* ... */
}

useIsRTL

tells wether the app should use a RTL layout or not

import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
export function MyComponent(props) {
const isRTL = useIsRTL();
return; /* ... */
}

Layout & style

useDimensions

Provides the screen or window dimension, as well as some device info. Data return will update based on the device's rotation.

signature

  • context ("screen" | "window"): optional context to pull RN dimensions from. defaults to window
  • options.fullDimensions (?boolean): optional flag which will return the full dimensions object, and not just width & height
  • options.excludeStatusBar (?boolean): optional flag to exclude the status bar height from the height returned
  • options.deviceInfo (?boolean): optional flag to return device info (scale, isTablet, orientation)

example

import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
export function MyComponent(props) {
const { width, height } = useDimensions("screen");
return; /* ... */
}

useTheme

Returns the values set in the app's theme plugin

import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
export function MyComponent(props) {
const themeProps = useTheme();
return /* ... */;
}

Feeds

useFeedLoader

loads a zapp pipes feed and returns the data.

signature

  • feedUrl (string): url of the feed to load
  • options.clearCache (?boolean): optional flag to force feed to ignore locale cache
  • options.loadLocalFavorites (?boolean): optional flag to return the feed of local favourited items
  • options.silentRefresh (?boolean): optional flag to silently refresh the feed, without reseting the data. this prevents the UI from jumping when new data is fetched

On top of the feed, it returns two functions: reloadData: () => void: use this function to reload the data, ignoring cache loadNext: () => void: use this function to fetch the next data, if it exists in the original feed (see zapp pipes pagination)

Example

import { useFeedLoader } from "@applicaster/zapp-react-native-utils/reactHooks";
export function MyComponent(props) {
const feed = useFeedLoader(props?.feedUrl);
useEffect(() => {
setInterval(() => {
// will reload the data every 30 seconds
feed.reloadData();
}, 30 * 1000);
}, []);
return; /* ... */
}

useFeedRefresh

Uses the feed refresh feature available in components configuration. This hook doesn't fetch the feed data, it only requests the data to be reloaded.

signature

  • props.reloadData (() => void): reloadData function returned by the useFeedLoader hook
  • props.component (ZappUIComponent): component data from Zapp

Example

import { useFeedRefresh } from "@applicaster/zapp-react-native-utils/reactHooks";
export function MyComponent(props) {
const { feedUrl, component } = props;
const feed = useFeedLoader(feedUrl);
const { reloadData } = feed;
useFeedRefresh({ reloadData, component });
return /* ... */;
}

useBuildPipesUrl

This hook allows to leverage the zapp-pipes client request builder to build urls with all the features available in pipes v2 (parameter mapping, endpoints, context keys...).

signature

options.url: url to load. it can be a url containing parameters like http://api.com/show/{{showId}} options.mapping: mapping object providing the source and property name of the data to be injected in url parameters

returns: result.url: inflated url with the parameters pulled from the entry or screen context result.requestParams: request parameters, structured as AxiosRequestConfig. Contains a headers property with custom headers, and a params property which is either sent as body (POST / PUT requests) or as a query string (GET request);

Because context keys are retrieved through session storage which is async, the request params will be null on the first render cycle of the hook. Then it will re-render with the proper request params.

Example

import { useBuildPipesUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
function MyComponent(props) {
const screenData = useCurrentScreenData();
const [data, setData] = useState(null);
const { url, requestParams } = useBuildPipesUrl({
url: screenData.data.source,
mapping: screenData.data.mapping
});
useEffect(() => {
if (url && requestParams) {
const result = await axios.get(url, requestParams);
if (result.code === 200) {
setData(result.data);
}
}
},[url, requestParams]);
return ...
}

Components, Cells & actions

useActions

This hook allows you to retrieve a context assigned to a plugin who implements the cell action API.

signature

  • pluginIdentifier (string): identifier of the cell action plugin to retrieve
  • returns the context of that plugin

Example

import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
export function MyComponent(props) {
const { state, invokeAction, ...otherContextProps } = useActions(
props.pluginIdentifier
);
return; /* ... */
}

useCellClick

This hooks allows you to use the current action programmed to happen when a user clicks on a cell. By default, it will trigger the navigation to the item that populates the cell, but this default behaviour can be overriden from any screen, plugin or component.

import { useCellClick } from "@applicaster/zapp-react-native-utils/reactHooks/cell-click";
export function MyComponent(props) {
const onPress = useCellClick(props);
return <Touchable onPress={onPress}>{/* ... */}</Touchable>;
}

in order to override that default behaviour for cells in your component or your screen, you can wrap your screen or component in a provider of the CellTapContext

import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
export function MyPlugin(props) {
const onCellTap = (entry: ZappEntry) => {
// custom logic
};
return (
<CellTapContext.Provider value={onCellTap}>
{/* ... components or cells */}
</CellTapContext.Provider>
);
}