Using Hooks in the app

In this tutorial, you will learn how to use Hooks in BuddyBoss App. Conceptually, app hooks work similarly to WordPress hooks, allowing you to insert content into specific areas of existing app screens.

After setting up your Git repo, using hooks is fairly simple. The custom code template already contains an index.js file where writing code should start.

Calling API methods that can change the app should happen where the “call custom code API here” comment is. The externalCodeSetup object contains many class instances where methods are ready to be called. We call these methods “hooks”.

import {NativeModules} from "react-native";

const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
   // call custom code api here
};

If you check the App Codex where all hooks are listed, you can see that with each class we provide the instance name and the method for how you can access it.

Here is an example, which you can see here.

externalCodeSetup.cssApi.METHOD_NAME

Finally, when you have found the correct method/hook you need to call it like this:

import {NativeModules} from "react-native";

const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
    externalCodeSetup.cssApi.addGlobalStyle("container", {
        backgroundColor: "white"
    });
};

Note that index.js can import as many other files as you want.