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.

# 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)

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>
	);

 MyScreen.navigationOptions = {header: null};

 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
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(BottomTabBarPropsnullable)

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 Attributes Description
BottomTabBarProps React.ComponentType.<BottomTabBarProps> <nullable>
Example

Create own bottom tab bar

...

import { BottomTabBar } from "react-navigation-tabs";
export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.navigationApi.setBottomTabBar(props => {

   const { style, height, safeAreaInset } = props;

   const renderLabel = (props) => {
      //Render label by returning a text react component...
   }

   const renderIcon = (props) => {
      //Render icon by returning an image react component...
   }

   return <BottomTabBar
     {...props}
     style={[style, { height: height }]}
     safeAreaInset={{ bottom: safeAreaInset }}
     getLabelText={renderLabel}
     renderIcon={renderIcon}
   />

    //Alternatively, user can also create his own component without relying on react-navigation-tab BottomTabBar
 })
}

# setBottomTabBarIcon(Iconnullable, iconProps)

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

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

Tab icon component

iconProps IconProps
Example

Customize icon for courses

 externalCodeSetup.navigationApi.setBottomTabBarIcon((icon, iconProps) => {

   const routeLabel = iconProps.route.routes[0].params.item?.label;

   if (routeLabel === "Courses") {
     return <View
       style={{
         height: 30,
         width: 30,
         borderRadius: 58,
         backgroundColor: '#5a95ff',
         justifyContent: 'center',
         alignItems: 'center',
       }}>
       <Image
         source={require('@src/assets/img/apple-icon.png')}
         style={{
           width: 40,
           height: 40,
           tintColor: 'black',
           alignContent: 'center',
         }}
       />
     </View>
   }

   return icon;
 })

# 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 'react-navigation';

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>
 })

 MyWelcomeScreen.navigationOptions = {
   header: null
 }

 externalCodeSetup.navigationApi.setFilterAfterAuthRoutes(afterAuthRoutes => {
   return {
      ...afterAuthRoutes,
      "MyWelcomeScreen": 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. For more information, see https://reactnavigation.org/docs/4.x/bottom-tab-navigator

Parameters:
Name Type Description
filterBottomTabsRoutes BottomTabsRoutesFilterCallback
Examples

Override default navigation for MoreScreen

//Register a custom screen in navigation route
  externalCodeSetup.navigationApi.addNavigationRoute(
    "book",
    "BookScreen",
    () => <Text>Custom Book Screen</Text>,
    "All"
  );

 externalCodeSetup.navigationApi.setFilterBottomTabsRoutes(routes => {
    return {
      ...routes,
      MoreScreen: {
       ...routes?.MoreScreen,
       navigationOptions: {
         ...routes?.MoreScreen.navigationOptions,
         //Navigate to new "book" route when MoreScreen item in menu is pressed
         tabBarOnPress: ({navigation}) => {
           navigation.navigate("book")
         }
       }
      }
    }
  })

Create a custom More Screen

//In custom_code/components/MyCustomScreen.js...

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

const SPACING_TOP = FontManager.applyFontHeightAdjustment(NAV_HEIGHT + 17);
const INITIAL_SCROLL = -SPACING_TOP + SEARCH_HEIGHT;

const MyCustomScreen = (props) => {

 const showSearch = true;

  const {
    listTopMargin
  } = useSearchTransition(
    showSearch,
    false,
    Platform.select({
      ios: NAV_HEIGHT - 16 - BARHEIGHT,
      android: NAV_HEIGHT - 26 - BARHEIGHT
    })
  );

 const searchContainerPaddingTop = add(listTopMargin, NAV_HEIGHT + 17)

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

MyCustomScreen.navigationOptions = { header: null };

export default MyCustomScreen;

 //In custom_code/index.js...

...

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.navigationApi.setFilterBottomTabsRoutes((
    routes,
    metaMoreScreen,
    constructTabbarAllScreens,
    showTabBarOnAllScreens
  ) => {
    const NewMoreScreen = createStackNavigator(
      {
        "0": { screen: MyCustomScreen },
        ...constructTabbarAllScreens()
      },
      {
        initialRouteParams: {
          item: metaMoreScreen,
          isMainNavigator: true,
          isShowingTabBarOnAllScreens: showTabBarOnAllScreens,
        },
        headerLayoutPreset: "center",
      }
    );

    return {
      ...routes,
      MoreScreen: NewMoreScreen
    }
  })
}

# 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. For more information on how to set tabBarOptions, see https://reactnavigation.org/docs/4.x/bottom-tab-navigator

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,
       activeTintColor: 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;
})