Screen lifecycle API

Any plugin can leverage the standard React useEffect and useLayoutEffect hook to trigger custom functionality when a screen mounts or unmounts. This is a non-blocking execution - the loading & presentation of the screen will not be stopped when using this API.

How to use this API

simply export a useScreenHook function in your plugin's main export

// plugin/src/index.ts
import { customScreenHook } from "./customScreenHook";
export default {
useScreenHook: customScreenHook,
};

This will register your plugin to use this new API

Custom Screen hook syntax

the custom screen hook function behaves as a standard React hook, but in order to be properly tied to the screen lifecycle, you shouldn't use directly the useEffect and useLayoutEffect hooks from the React library. you will be provided with an object to use these hooks directly, and use them as you would with the standard hooks. You can still use other React hooks, or the hooks provided as part of the QuickBrick framework

// plugin/src/customScreenHook.ts
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
export function customScreenHook({ useEffect, useLayoutEffect }) {
//this is a standard hook function, so you can leverage any React or custom hook you need
// like pulling data from the app's redux store
const { plugins, rivers, appData } = usePickFromState([
"plugins",
"rivers",
"appData",
]);
// or accessing the app's navigator, to access the screen data
const navigator = useNavigation();
const { screenData } = navigator;
// then you can register your hooks. - Standard rules of hooks apply (no conditional call, etc...)
useLayoutEffect(() => {
// this will run when the screen mounts, before render
return () => {
// (Optional) this will run when the screen unmounts
};
});
useEffect(() => {
// this will run when the screen mounts, after render;
return () => {
// (Optional) this will run when the screen unmounts
};
});
}