Skip to main content

Bottom Nav

Overview​

The Bottom Navigation Bar displays navigational links to the app's key sections and serves as the primary method for moving between app screens. Each item in the navigation bar includes both an icon and a label to indicate the destination screen to the user. These items feature brand-specific static icons, ensuring consistency across different parts of the app. By default, the 'More Menu' item displays a static icon but can dynamically change to show the social profile avatar selected by the user (this feature is exclusive to users logged into the Ladbrokes, Neds and Betcha brands). The 'More' item also has the capability to display a notification badge indicating the number of unread messages.

Branding​

Besides theming and color differences, the bottom navigation bar presents a very similar layout across all brands (Ladbrokes, Neds, TabNZ, and Betcha). For Ladbrokes and Neds, both bottom navigation bars share the same labels (with their own brand-specific icons) and navigations, while TabNZ and Betcha share the same labels and navigations. All brands have the capability to display a notification badge for unread messages on the top right part of the More Menu item. We will discuss the key differences across these brands, allowing us to understand the changes and requirements to consider when adding a new brand to implement the bottom navigation.

Brand-specific variations:​

Brand-specific variations are most notably observed between TabNZ and Betcha brands compared to Ladbrokes and Neds, which maintain an almost identical layout for navigation items. Ladbrokes and Neds feature the navigation items: "Home", "Next Up", "Racing", "Sports", and "More". As for TabNZ and Betcha, they omit the "Next Up" item, advancing "Racing" and "Sports" in the item sequence. In the fourth position they have "In Play", resulting in the TabNZ and Betcha layout of "Home", "Racing", "Sports", "In Play", and "More".

In terms of functionality, Ladbrokes and Neds share identical navigation and 'More Menu' behaviors, while TabNZ and Betcha share theirs. The display of the user's social profile avatar for logged-in users is shared between Ladbrokes, Neds and Betcha. This personalized feature is not present in TabNZ, which instead presents the standard 'More' icon.

Android​

The shared logic for the bottom-nav is centralized in src/main, meaning that any changes to these files will affect all other brands. Here, we can also find shared resources such as strings and reusable drawables. Additionally, each brand has its own brand-specific drawables located in res/drawables.

The MenuItems.kt file is located within the /presentation/common directory for each brand. This file contains the menuItems function, which returns the BottomMenuItem list used for each brand. Modifications to the layout and items used in the bottom nav should be made in this file.

Steps and considerations when adding a new brand​
  • 1) Duplicate MenuItems.kt: Create a copy of MenuItems.kt and place it in the /presentation/common directory. This will allow us to show the navigation items specific to the new brand.
  • 2) Add Brand-Specific Drawables: Any drawable required for the new brand should be stored in the res/drawable directory.
  • 3) Update Resource String: Any new labels that are necessary for the brand should be added to the resources strings.xml located in the src/main directory.
  • 4) Implement Social Profile Avatar: If you wish to replicate the behavior observed in Ladbrokes, Neds and Betcha, where the Social Profile Avatar is displayed in the "More" item, then the AvatarItem must be configured for the BottomMenuItem within the MenuItems.kt file.

iOS​

The code for Bottom Navigation is found in the BottomTabBarUI within the Presentation Layer and in the NativeTabBarController on Mobile. String localization resources are sourced from Entain.strings, and image assets are housed in Icons.xcassets located under EntainComponentLibrary/Resources/ for each respective brand.

The NativeTabBarController is responsible for creating tab bar items specific to each platform using the NavigationTabTransformer. It utilizes the SocialAvatarTabOptionPresenter to monitor the authenticated state and retrieve the user's social avatar, represented by a string emoji. The SocialAvatarTabOptionPresenter updates the social avatar, which triggers a handleSocialProfileModelUpdate event in the NativeTabBarController. This event refreshes the tabBar items. The NavigationTabTransformer is responsible to convert the emoji into the appropriate UIImage for display on the 'more' navigation bar item, while other tab items display with a title and images for both selected and unselected states.

The NavigationTabTransformer configures the bottom tab options for each platform (Ladbrokes, Neds, and Tabnz). The transformer assigns the color theming for selected and unselected states specific to each platform as well as the badge count appearance. It also compiles a list of TabOptionStyles, each comprising a title, selected and unselected images, and a TabOption that represents a unique tab, such as Home. These options are important for determining navigation routing. Each tab can independently set its badge count through the use of the updateTabBadgeCount method.

iOS platform specific behaviour​

  • iOS only supports 5 bottom tabs.
  • Selecting an already active tab will automatically scroll to the top of the associated screen if it's already at its root, or will return to root if that tab is currently on a deeper screen.
  • Selecting a tab triggers haptic feedback (small vibration).
Steps and considerations when adding a new brand​
  • 1) Add TabOption: Introduce a new enum value into TabOption.
  • 2) Add Route.TabName: Insert a tab route name into Route.TabName, adhering to the naming convention 'XyzTab'.
  • 3) Add Brand-Specific Image Assets: Incorporate any necessary image assets for the new brand into Icons.xcassets.
  • 4) Update Localization: Add any required labels for the brand to Entain.strings and update the title mapping in NavigationTabTransformer for the corresponding enum case.
  • 5) Add/Update TabOptionStyle: Include or modify a TabOptionStyle in TabOptionsModel to align with the styles of existing brands in NavigationTabTransformer.
  • 6) Update AccessibilityIdentifier: Modify the TabOptionStyle to include the correct accessibilityIdentifier this is important for maestro testing.
  • 7) Implement Social Profile Avatar: To mirror the functionality seen in Ladbrokes and Neds, where the Social Profile Avatar is featured in the "More" item, use emojiImageForMoreState for the image state, rather than EntainIcon.

Integrations​

This section provides an overview of the integrations related to the bottom nav. These integrations close in to internal configurations, external services, third-party SDK and data management systems.

Feature Flags​

  • more-native - determines whether the native rebuild More menu is used. If false then the RN More menu will be shown.

Inputs​

RN: GraphQLModule​

  • Used to get the Social Profile Avatar selected by the user from the GraphQL ClientDetailsStartupQuery

RN: UserInfoModule​

  • Updates the unread messages for group/mates mode

Outputs​

Third-Party Dependencies​

Call out any third-party dependencies specific to this feature.

Troubleshooting​

Identify any points of failure or dead-ends with logs to look out for. It is expected that these details will be platform specific.

Android & iOS​

Static Resources from the "static-ui" Project​

When managing static resources across different brands, the preferred approach is to use resources from the "static-ui" project. This repository has a comprehensive collection of static images, files, and assets used in all of the brands under Entain.

To access these resources, clone the repository and follow the setup instructions provided. For more details, visit the following link: https://git.neds.sh/technology/code/ui/static

Resources​

RoleContact
PMTBC
Android LeadAnthony Librio
iOS LeadNicholas Vella