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()
}
});
});
}# 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)
}
}
]
}
]
})
}