For some websites it may be useful to dynamically modify the apps' navigation bar items. You can achieve this with these JavaScript functions.
Using the JavaScript Functions
You might want to check out the
executeWhenAppReady() function of
our app helper script. It ensures that your website doesn't try to interact with the app before it's ready or when your website is loaded using a regular browser (ReferenceError, function is not defined).getNavigationBarItems
Use this function to get a list of objects representing all the navigation bar items that are currently being displayed.
<script>
try {
// returns a list of objects representing the navigation bar items
let navigationBarItems = (await getNavigationBarItems())["navigationBarItems"];
}
catch (e) {
// Can occur if:
// - the app couldn't connect to the native code. Should be very unlikely.
console.log(e);
}
</script>
setNavigationBarItems
Use this function to modify the navigation bar items that should be displayed.
<script>
try {
// example for a navigation bar item object
let newNavigationBarItem = {
label: "Contact",
action: {
urlToRedirectTo: "https://webtoapp.design/contact",
javascriptToExecute: null,
elementToClickSelector: null,
isFavoriteAction: false,
isShareAction: false,
isOpenExternallyAction: false,
isSettingsAction: false,
isRateAction: false,
isPastNotificationsAction: false,
},
icon: {
name: "list"
},
};
// get the currently displayed navigation bar items
let allNavigationBarItems = (await getNavigationBarItems())["navigationBarItems"];
// add the new navigation bar item to the list of navigation bar items
allNavigationBarItems.push(newNavigationBarItem);
// display the list of navigation bar items, including the new navigation bar item
await setNavigationBarItems(allNavigationBarItems);
}
catch (e) {
// Can occur if:
// - the app couldn't connect to the native code. Should be very unlikely.
console.log(e);
}
</script>