Class

MoreScreenHooksApi

MoreScreenHooksApi()

More Screen (Screen with additional navigation links) Hooks. Instance name: moreScreenApi

You can use this hook to customize how the "More Screen" will behave when the user taps on it and override the default functionality based on your preferences.

Constructor

# new MoreScreenHooksApi()

Example
externalCodeSetup.moreScreenApi.METHOD_NAME

Methods

# enableUseOriginalRouteNames()

Menu items inside the More Screen are constructed such as: DocumentsScreenMoreMenu3, ActivityScreenMoreMenu3. Set this to true if you'd like to use the original route name such as: DocumentsScreen or ActivitiesScreen. This is especially useful if you'd like to remove the More Screen using setFilterBottomTabsRoutes while "Tab bar Visibility" is set to "Show on All Screens"

Example
...

export const applyCustomCode = externalCodeSetup => {
  //Remove the default MoreScreen from the bottom tab component
  externalCodeSetup.navigationApi.setFilterBottomTabsRoutes(routes => {
    delete routes["MoreScreen"]
    return routes;
  });

  //Add a button which navigates to a custom More Screen
  externalCodeSetup.indexScreenApiHooks.enableAlwaysShowHeaderRight();
  externalCodeSetup.indexScreenApiHooks.setRenderHeaderRight(<HomeHeaderRight />);

  //Since a bottom tab route might not have the More Screen's menu items, navigate to "DocumentsScreen" instead of the inaccessible "DocumentsScreenMoreMenu1"
  externalCodeSetup.moreScreenApi.enableUseOriginalRouteNames();
}

# setContainerPaddingTop(containerPaddingTop)

You can use this hook to adjust the amount of padding top used by the more screen container.

Parameters:
Name Type Description
containerPaddingTop TransformContainerPaddingTopCallback
Example
externalCodeSetup.moreScreenApi.setContainerPaddingTop(props => props.containerPaddingTop);

# setContentInsetTop(contentInsetTop)

You can use this hook amount by which the scroll view content is inset from the edges of the scroll view.

Parameters:
Name Type Description
contentInsetTop TransformContentInsetTopCallback
Example
externalCodeSetup.moreScreenApi.setContentInsetTop(props => props.contentInsetTop);

# setContentOffsetY(contentOffsetY)

You can use this hook to set the starting scroll offset.

Parameters:
Name Type Description
contentOffsetY TransformContentOffsetYCallback
Example
externalCodeSetup.moreScreenApi.setContentOffsetY(props => props.contentOffsetY);

# setNavigationHandler(navigationHandler)

Sets the function that overrides the default "More Screen" navigation functionality. This hook is called whenever a menu item in More Screen is clicked. For example, you can configure how a menu item will behave after a user taps on it.

Parameters:
Name Type Description
navigationHandler MoreScreenNavigationCallback
Example
...
import {Linking} from "react-native";
import {CommonActions} from "@react-navigation/native";

export const applyCustomCode = externalCodeSetup => {
   const defaultNavigateTo = (navigation, routeName, menuItem, userId) => {

   //Attempt to open using React Native's Linking function based on different conditions...
	  if (
		(menuItem.type === "page" ||
			menuItem.type === "custom" ||
			(menuItem.type === "post_type" && menuItem.object === "page")) &&
		menuItem.data &&
		menuItem.data.open_external
    ) {
		Linking.canOpenURL(menuItem.data.link)
			.then(canOpen => {
				if (canOpen) {
					Linking.openURL(menuItem.data.link);
				}
			})
			.catch(error => {
				Alert.alert("There was a problem", "This page cannot be opened.");
			});
	    }
     //Otherwise, navigate to appropriate screen
     else {
		 navigation.dispatch(
			CommonActions.navigate({
				name: menuItem.label === "Photos" ? "GlobalPhotos" : routeName,
				params: {
					item: menuItem,
					userId
				}
			})
		 );
	    }
   }
}

externalCodeSetup.moreScreenApi.setNavigationHandler(defaultNavigateTo);

# setReplaceMenuItemRoutes()

You can use this to substitute the default routeName of the menu item in the More Screen. For example, instead of redirecting to the DocumentsScreenMoreMenu3, you can redirect them to a custom screen such as ConfidentialDocsScreen. Note: More Screen items are composed as: [ScreenName] + "MoreMenu" + [index of the MoreScreen tab in the bottom bar component]. For example, if the MoreScreen tab is the 4th item in the bottom bar component, the routes names of the menu items would be: ActivitiesScreenMoreMenu3, SettingsScreenMoreMenu3

Example

Change route of menu item depending on the user

...

import { getNavigationService } from "@src/utils/NavigationService";

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.reduxApi.addOnStoreCreateListener((props) => {

   let shouldUnsubscribe = false;

   const unsubscribe = props.subscribe(() => {

     const currentRoute = getNavigationService().getCurrentRoute();

     //If navigating in the MoreScreen...
     if (currentRoute?.params?.item?.object === "more") {

       const state = props.getState();
       const userId = 1;

       //Show a different route depending on the logged-in user
       if (state.user?.userObject.id === userId){
         externalCodeSetup.moreScreenApi.setReplaceMenuItemRoutes([
           {
             "originalRoute": "DocumentsScreenMoreMenu3",
             "replaceWith": "SettingsScreenMoreMenu3"
           }
         ])
       }
       shouldUnsubscribe = true;
     }
     if (shouldUnsubscribe) {
       unsubscribe()
     }

   });

 });
}

# setSearchContainerPaddingTop(searchContainerPaddingTop)

You can use this hook to adjust the amount of padding top used by the container which the search and list components occupy. Note: aside from the result of add() which returns an animated value, you can also return a number as the new value.

Parameters:
Name Type Description
searchContainerPaddingTop TransformSearchContainerPaddingTopCallback
Example
...

import {add} from "react-native-reanimated";
export const applyCustomCode = (externalCodeSetup: any) => {
    externalCodeSetup.moreScreenApi.setSearchContainerPaddingTop(props => {
        return add(props.listTopMargin, props.navHeight + 17);
    })
}

# setTabsList(tabsList)

You can use this hook to add or modify existing tabs in the More screen.

Parameters:
Name Type Description
tabsList TransformMoreScreenListCallback
Examples

Add a new item in More Screen items that calls the logout action

...
import { logout } from "@src/actions/auth"

export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.moreScreenApi.setTabsList((section, dispatch) => {

   return [
     ...section,
     {
       label: "AUTH",
       screens: [
         {
           item: {
             label: "Logout",
             icon: {
               id: 'power-on',
               type: 'buddyboss',
               box_style: 'round', //"", "none", "round", "box"
               tint_color: `#000000`,
               monochrome: true,
               icon_style: `outlined`,
             },
             onPress: () => dispatch(logout()),
             hasNavArrow: false
           },
           routeName: "Logout"
         }
       ]
     }
   ]
 })
}

Create your own item component

import { logout } from "@src/actions/auth"

export const applyCustomCode = externalCodeSetup => {

 const CustomComponent = (dispatch) => {
   return <View style={{padding: 10, backgroundColor: "white", borderRadius: 5}}>
   <TouchableOpacity onPress={() => dispatch(logout())}>
     <Text>Logout</Text>
   </TouchableOpacity>
 </View>
 }

 externalCodeSetup.moreScreenApi.setTabsList((section, dispatch) => {

   return [
     ...section,
     {
       screens: [
         {
           item: {
             component: () => CustomComponent(dispatch)
           }
         }
       ]
     }
   ]
 })
}