App Codex Version: 1.0.0

Class

NavigationApi

NavigationApi()

Navigation Hooks. Instance name: navigationApi

You can use this hook to customize app navigation aspects such as adding a new route to the app react-navigation tree, adding new HOC (Higher-Order Components) and more.

Constructor
Example
externalCodeSetup.navigationApi.METHOD_NAME

Members

# AddComposeHooks

Deprecated:
  • Yes

# composeHooks

Deprecated:
  • Yes

# customIcons

Deprecated:
  • We don't use default icons anymore. All icons are provided by plugin.

# filterInitialAfterAuthRoute

Deprecated:
  • Yes

# filterMultisiteDrawerSettings

Deprecated:
  • Yes

# iosBottomTabsIconRenderer

Deprecated:
  • We use a custom TabBar component now.

# isBlurViewInIOSTabBar

Display BlurView in IOS TabBar

# setShowIosBottomTabsLabels

Deprecated:
  • Yes

Methods

# addComposeHocs(composeHocs)

Use this hook to register new HOCs (Higher-Order Components) which will be applied to the AppNavigator component. For more info on how to use HOCs, refer to: https://reactjs.org/docs/higher-order-components.html

Parameters:
Name Type Description
composeHocs HOCsFilter
Example

Add new HOC 

 externalCodeSetup.navigationApi.addComposeHocs(hocs => {
  return [
   ...hocs,
   withMyCustomHoc
  ];
})

# addNavigationRoute(id, routeName, component, parentNavigator)

Add a new route to react-navigation tree. NOTE: The route will be added to the root navigator if the parentNavigator value is missing. More information can be found at: https://www.buddyboss.com/resources/dev-docs/app-development/extending-the-buddyboss-app/creating-new-screens/

Parameters:
Name Type Description
id String

Key of route in route map
routeName String

Route name in react-navigation tree
component React.ComponentType.<any>

Route component
parentNavigator NavigatorNames

Parent navigator name; can be one of the NavigatorNames values.
Example

Register a new route and navigate to that route 

//After adding BookScreen as a new navigation route, you can now navigate to this screen using NavigationService
externalCodeSetup.navigationApi.addNavigationRoute(
 "book",
 "BookScreen",
 () => <Text>Custom Book Screen</Text>,
 "All"
);

//Example on how to navigate to BookScreen
//Since "book" is now registered, app can now navigate to that route
const MyCustomLoginScreen = (props) => (
 <View>
   <Text> This is a custom login screen</Text>
   <Button title="Go To Book Screen" onPress={() => props.navigation.navigate("book")}/>
 </View>
)
externalCodeSetup.navigationApi.replaceScreenComponent(
 "LoginScreen",
 MyCustomLoginScreen
);

# addNavigatorCreatedCallback(onNavigatorCreated) → {UnsubscribeFunction}

Use to subscribe to root navigator created event. This will return the navigator object. Useful for dispatching navigation events outside of navigation tree components or getting state of navigator

Parameters:
Name Type Description
onNavigatorCreated NavigatorEventListenerCallback

Unsubscribe function

UnsubscribeFunction
Example
externalCodeSetup.navigationApi.addNavigatorCreatedCallback(props => {
   Alert.alert("Navigator created!")
 })

# replaceScreenComponent(componentName, replaceWith)

Replaces a certain screen in the app. More information at https://www.buddyboss.com/resources/dev-docs/app-development/extending-the-buddyboss-app/creating-new-screens/

Parameters:
Name Type Description
componentName ScreenName

The name of the screen registered in the core BuddyBoss App navigation.
replaceWith React.ComponentType.<any>

Your custom screen component.
Example

Replace LoginScreen with MyScreen 

const MyScreen = (props) => (
		<View style={{flex: 1}}>
			<Text>This is my screen</Text>
		</View>
	);


 externalCodeSetup.navigationApi.replaceScreenComponent("LoginScreen", MyScreen);

# setAnimatedSwitchNavigator(animatedSwitchNavigator) → {animatedSwitchNavigatorReturn}

This hook allows you to create your own animated switch navigator. For example, you can add a new route and use it as your initial switch route instead of the default "Auth" route which will show you the login screen.

Parameters:
Name Type Description
animatedSwitchNavigator animatedSwitchNavigatorProps
animatedSwitchNavigatorReturn
Example

Add a custom screen to be used as initial switch route 

//In custom_code/MyCustomScreen.js...

import React from 'react';
import { View, Text, Button } from 'react-native';

const MyCustomScreen = props => {

 return <View style={{ flex: 1, justifyContent: "center", alignSelf: "center" }}>
   <Text> Welcome to our App! New adventure awaits!</Text>
   <Button title="Go to App" onPress={() => props.navigation.navigate("Auth")} />
 </View>
}

export default MyCustomScreen;


//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";
export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.navigationApi.setAnimatedSwitchNavigator((routes, options, routeProps) => {

   const feature = routeProps.settings.features.multisite_network;
   const hasMultiSite = Platform.select({
     ios: feature.is_enabled_ios,
     android: feature.is_enabled_android
   })

    // Get the initial switch route based on state data.
    // getInitialSwitchRoute() is based on BB App's AppNavigator.js
    // Feel free to copy and paste this to your own code

   const getInitialSwitchRoute = () => {

     const defaultInitialRoute = "Auth";

     const myCustomRoute = "MyCustomScreen"

     if (!routeProps.hasValidSigning) {
       return "InvalidSigningScreen";
     }

     if (routeProps.shouldEnforceVersionControl) {
       return "VersionControlScreen";
     } else if (routeProps.isLoggedIn) {
       if (
         routeProps.isFeatureEnabled(hasMultiSite) &&
         routeProps.sites.selectedSite === null
       ) {
         return "AuthSiteSelectionScreen";
       } else {
         return routeProps.shouldLockApp ? "AppLockScreen" : "noAuth";
       }
     }
     else {
       return myCustomRoute; //Use my own custom route instead of the default "Auth" route
       // return defaultInitialRoute;
     }

   };

   const newRoutes = {
    ...routes,
    MyCustomScreen: {
     screen: MyCustomScreen
    }
   }

   const newOptions = {
    ...options,
    initialRouteName: getInitialSwitchRoute()
   }

   return {
    routes: newRoutes,
    options: newOptions,
   }

 })
}

# setBottomTabBar(BottomTabBarProps)

You can use this to replace the bottom tab bar component according to your preference. For more information regarding the BottomTabBar, you can use the following link: https://reactnavigation.org

Parameters:
Name Type Description
BottomTabBarProps React.ComponentType.<BottomTabBarProps>
Example

Create your own bottom tab bar 

import React from "react";
import {Text, View, TouchableOpacity} from "react-native";

import {isTabletOrIPad} from "@src/utils";
import {
    FontWeights,
    textRTLStyleFix,
    correctBottomSafeArea
} from "@src/styles/global";
import {useSafeAreaInsets} from "react-native-safe-area-context";

import Icon from "@src/components/Icon";
import BadgeIcon from "@src/components/BadgeIcon";
import {getMenuFontIconVariant} from "@src/navigators/util";
import {glyphMap as bbIconGlyphMap} from "@src/components/BBIcon";
import withGlobalStyles from "@src/components/hocs/withGlobalStyles";
import {useScreenProps} from "@src/navigators/v5/ScreenPropsProvider";

export const applyCustomCode = externalCodeSetup => {
    const renderIcon = props => {
        const {calcFontSize} = useScreenProps(["calcFontSize"]);

        const {focused, item, tabBarOptions, colors} = props;
        const {tabBarActiveTintColor} = tabBarOptions;

        if (!item) return null;

        let color;
        let menuIcon;
        if (item.icon.type === "buddyboss") {
            if (bbIconGlyphMap[item.icon.id]) {
                menuIcon = {
                    fontIconName: item.icon.id,
                    fontIconVariant: getMenuFontIconVariant(item.icon, focused)
                };
            } else {
                menuIcon = {
                    uri: focused ? item.icon.uri_active || item.icon.uri : item.icon.uri
                };
            }
            color = focused ? tabBarActiveTintColor : item.icon.color;
        } else {
            menuIcon = {
                uri: focused ? item.icon.uri_active || item.icon.uri : item.icon.uri
            };
            if (item.icon.type !== "custom") {
                color = focused ? tabBarActiveTintColor : item.icon.color;
            } else if (item.icon.fill_color) {
                color = focused ? tabBarActiveTintColor : item.icon.color;
            }
        }

        if (item.object === "notifications" || item.object === "messages") {
            return (
                <BadgeIcon
                    calcFontSize={calcFontSize}
                    tintColor={color}
                    bottomTabsBg={colors.bottomTabsBg}
                    warningColor={colors.warningColor}
                    foregroundColor={item.icon.fg_color}
                    platform="ios"
                    inMore={false}
                    app={"learnerapp"}
                    type={item.object}
                    icon={menuIcon}
                    styles={{height: 25, width: 25}}
                />
            );
        }

        return (
            <Icon
                icon={menuIcon}
                foregroundColor={item.icon.fg_color}
                tintColor={color}
                styles={{height: 25, width: 25}}
            />
        );
    };

    const MyTabBar = withGlobalStyles(props => {
        const {state, descriptors, navigation, global, colors} = props;

        const insets = useSafeAreaInsets();
        const bottomSafeArea = correctBottomSafeArea(insets.bottom);

        const textStyle = [
            global.menuLabelStyle,
            {
                marginHorizontal: 5,
                marginTop: isTabletOrIPad() ? -(bottomSafeArea / 5) : 2,
                fontWeight: FontWeights["medium"],
                ...textRTLStyleFix(),
                opacity: 1,
                textAlign: "center"
            }
        ];

        return (
            <View style={{flexDirection: "row"}}>
                {state.routes.map((route, index) => {
                    const {options} = descriptors[route.key];

                    const item = route.params.item;

                    const isFocused = state.index === index;

                    const onPress = () => {
                        const event = navigation.emit({
                            type: "tabPress",
                            target: route.key,
                            canPreventDefault: true
                        });

                        if (!isFocused && !event.defaultPrevented) {
                            navigation.navigate({name: route.name, merge: true});
                        }
                    };

                    return (
                        <TouchableOpacity
                            onPress={onPress}
                            style={{
                                flex: 1,
                                height: 40,
                                alignItems: "center",
                                alignSelf: "center",
                                marginBottom: 33
                            }}
                            activeOpacity={1}
                        >
                            <View
                                style={{
                                    height: 30,
                                    alignItems: "center",
                                    justifyContent: "center"
                                }}
                            >
                                {renderIcon({
                                    focused: isFocused,
                                    item,
                                    colors,
                                    tabBarOptions: options
                                })}
                            </View>

                            <Text
                                style={[
                                    textStyle,
                                    {color: isFocused ? colors.linkColor : colors.textColor}
                                ]}
                                numberOfLines={1}
                                ellipsizeMode="tail"
                                allowFontScaling={false}
                            >
                                {item.label}
                            </Text>
                        </TouchableOpacity>
                    );
                })}
            </View>
        );
    });

    externalCodeSetup.navigationApi.setBottomTabBar(props => (
        <MyTabBar {...props} />
    ));
}

# setBottomTabBarIcon(Icon, props)

You can use this to replace the bottom tab bar icons to display your preferred icons.

Parameters:
Name Type Description
Icon React.ComponentType.<Icon>

Tab icon component
props IconProps
Example
import React from "react";
import Icon from "@src/components/Icon";
import BadgeIcon from "@src/components/BadgeIcon";
import {getIcon} from "@src/navigators/util";
import {glyphMap as bbIconGlyphMap} from "@src/components/BBIcon";
export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.navigationApi.setBottomTabBarIcon(
        (icon, props) => {
            const {tintColor, focused, calcFontSize, colors, item} = props;

            if (!item) return null;

            const {color, menuIcon} = getIcon(
                item,
                bbIconGlyphMap,
                focused,
                tintColor
            );

            if (item.object === "notifications" || item.object === "messages") {
                return (
                    <BadgeIcon
                        calcFontSize={calcFontSize}
                        tintColor={color}
                        bottomTabsBg={colors.bottomTabsBg}
                        warningColor={colors.warningColor}
                        foregroundColor={item.icon.fg_color}
                        platform="ios"
                        inMore={false}
                        app={"learnerapp"}
                        type={item.object}
                        icon={menuIcon}
                        styles={{height: 25, width: 25}}
                    />
                );
            }

            return (
                <Icon
                    icon={menuIcon}
                    foregroundColor={item.icon.fg_color}
                    tintColor={color}
                    styles={{height: 25, width: 25}}
                />
            );
        }
    );
}

# setBottomTabBarLabel(Label, labelProps)

You can use this to replace the bottom tab bar label to display your preferred labels.

Parameters:
Name Type Description
Label React.ComponentType.<Text>

Tab label component
labelProps LabelProps

externalCodeSetup.navigationApi.setBottomTabBarLabel((label, labelProps) => ( <Text style={labelProps.textStyle} numberOfLines={1} ellipsizeMode={"tail"} allowFontScaling={false} > {labelProps.props.item.label} ));

# setFilterAfterAuthRoutes(filterAfterAuthRoutes)

You can use this hook to filter possible changes after authentication routes. filterAfterAuthRoutes takes current routes object and returns a new one. For more info, see https://www.buddyboss.com/resources/dev-docs/app-development/extending-the-buddyboss-app/creating-new-screens/

Parameters:
Name Type Description
filterAfterAuthRoutes AfterAuthRoutesFilter
Example

Add custom screen to auth route then navigate to custom screen

...

import {withNavigation} from "@src/components/hocs/withNavigation";

export const applyCustomCode = externalCodeSetup => {
    const MyWelcomeScreen = withNavigation(props => {
        return (
            <View style={{flex: 1, justifyContent: "center", alignSelf: "center"}}>
                <Text> Welcome to our App! New adventure awaits!</Text>
                <Button
                    title="Go to App"
                    onPress={() => props.navigation.navigate("Main")}
                />
            </View>
        );
    });


    externalCodeSetup.navigationApi.setFilterAfterAuthRoutes(afterAuthRoutes => {
        return {
            ...afterAuthRoutes,
            MyWelcomeScreen: {
                screen: MyWelcomeScreen
            }
        };
    });

    externalCodeSetup.navigationApi.setInitialAfterAuthRoute(props => {
        return "MyWelcomeScreen";
    });
};

# setFilterBottomTabsRoutes(filterBottomTabsRoutes)

You can use this hook to configure createBottomTabNavigator from react-navigation. routes object is provided which you can use to return a new routes object.

Parameters:
Name Type Description
filterBottomTabsRoutes BottomTabsRoutesFilterCallback
Example

Create a custom More Screen 

import React from "react";
import {Platform} from "react-native";
import MoreScreen from "@src/containers/Custom/MoreScreen";
import FontManager from "@src/FontManager";
import {NAV_HEIGHT, BARHEIGHT, isHaveDynamicIsland} from "@src/styles/global";
import {SEARCH_HEIGHT} from "@src/components/Search";
import {useSearchTransition} from "@src/components/listUtils";

export const applyCustomCode = externalCodeSetup => {

    const MyCustomScreen = props => {
        const showSearch = true;
        const SPACING_TOP = FontManager.applyFontHeightAdjustment(NAV_HEIGHT + 17);
        const INITIAL_SCROLL = -SPACING_TOP + SEARCH_HEIGHT;
        const {listTopMargin} = useSearchTransition(
            showSearch,
            false,
            Platform.select({
                ios: NAV_HEIGHT - BARHEIGHT - (isHaveDynamicIsland() ? 20 : 16),
                android: NAV_HEIGHT - 26 - BARHEIGHT
            })
        );

        const searchContainerPaddingTop = listTopMargin.value + (NAV_HEIGHT + 17);

        return (
            <MoreScreen
                screenTitle="More Menus"
                containerPaddingTop={NAV_HEIGHT}
                contentInsetTop={SPACING_TOP}
                contentOffsetY={INITIAL_SCROLL}
                searchContainerPaddingTop={searchContainerPaddingTop}
                showSearch={showSearch}
            />
        );
    };

    externalCodeSetup.navigationApi.setFilterBottomTabsRoutes(routes => {
        return {
            ...routes,
            MoreScreen: {
                ...routes.MoreScreen.options,
                screen: {
                    ...routes.MoreScreen.screen,
                    component: MyCustomScreen
                }
            }
        };
    });
};

# setFilterBottomTabsSettings(filterBottomTabsSettings)

You can use this hook to configure createBottomTabNavigator from react-navigation. tabsOptions and colors objects are provided which you can use to return a new settings object.

Parameters:
Name Type Description
filterBottomTabsSettings BottomTabsSettingsFilterCallback
Example

Change bottom tab bar's active tint color 

  externalCodeSetup.navigationApi.setFilterBottomTabsSettings((tabsOptions, colors) => {
    return {
     ...tabsOptions,
     tabBarOptions: {
       ...tabsOptions.tabBarOptions,
       tabBarActiveTintColor: colors.headerBg
      }
    }
  })

# setInitialAfterAuthRoute(func) → {ScreenName}

By default we navigate to the "Main" stack after navigation. This hook is used to provide a different route after login. It uses the callback function func that will receive AppNavigator props and return a route name as a string. More examples at: https://www.buddyboss.com/resources/dev-docs/app-development/extending-the-buddyboss-app/creating-new-screens/

Parameters:
Name Type Description
func InitialAfterAuthRouteCallback

Return string screen name

ScreenName
Example

Show products screen after user authentication 

externalCodeSetup.navigationApi.setInitialAfterAuthRoute( props => {
  if (props.auth.isLoggedIn){
    return "ProductsScreen";
  }
})

# setMapStateToProps(mapStateFunc)

Used to provide AppNavigator component custom redux props. It uses the mapStateFunc callback function that should receive redux state as an argument and return state props as an object.

Parameters:
Name Type Description
mapStateFunc MapStateToProps
Example

Add `blog` redux state and a localDate field to AppNavigator component props 

externalCodeSetup.navigationApi.setMapStateToProps( props => {
  return {...props, blog: props.blog, localDate: new Date()}
})

//These new props can now be used in AppNavigator functions. For example:
externalCodeSetup.navigationApi.setInitialAfterAuthRoute( props => {
   if (props.localDate < foo)
     return "CustomScreen"
})

# setScreensWithoutTabBar(screensWithoutTabBar)

This hook allows you to customise which screens will not have a tab bar even when the "Show on All Screens" option is selected. Therefore you can use this hook to specifically select the pages where you don’t want to display tab bars.

Parameters:
Name Type Description
screensWithoutTabBar Array

Screen names: https://www.buddyboss.com/resources/app-codex/global.html#MainStackScreenNames
Example
externalCodeSetup.navigationApi.setScreensWithoutTabBar(["BlogSingleScreen", "CoursesSingleScreen"])

# setShouldComponentUpdate(updateFunc)

Used to provide custom update logic to AppNavigator. This function is called in shouldComponentUpdate. If this hook returns a boolean, the component will use this to determine if it should update. For more info about shouldComponentUpdate function, refer to https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Parameters:
Name Type Description
updateFunc ShouldUpdateCallback
Example
externalCodeSetup.navigationApi.setShouldComponentUpdate((thisProps, nextProps, thisState, nextState) => {
 //If condition...
 return true;
})