feat(hv-navigator): Option for custom tab bar component (#950)

Add new prop `navigationComponents` to Hyperview root component, that
for now allows passing a key `TabBar` set to a React component that will
be used to render the tab bar of a bottom tab navigator. In the future,
we'll add more keys to configure other elements of the Navigation UI
such as the header of stack components, or top tab bar when we support
equivalent navigator.

src/contexts/navigation.ts

@@ -9,6 +9,7 @@ import type {
 import React, { ComponentType, ReactNode } from 'react';
 import type { Props as ErrorProps } from 'hyperview/src/core/components/load-error';
 import type { Props as LoadingProps } from 'hyperview/src/core/components/loading';
+import type { NavigationComponents } from 'hyperview/src/services/navigator';
 
 export type NavigationContextProps = {
   entrypointUrl: string;
@@ -27,6 +28,7 @@ export type NavigationContextProps = {
   errorScreen?: ComponentType<ErrorProps>;
   loadingScreen?: ComponentType<LoadingProps>;
   handleBack?: ComponentType<{ children: ReactNode }>;
+  navigationComponents?: NavigationComponents;
 };
 
 /**

src/core/components/hv-navigator/index.tsx

@@ -27,9 +27,16 @@ import { createCustomTabNavigator } from 'hyperview/src/core/components/navigato
 import { getFirstChildTag } from 'hyperview/src/services/dom/helpers';
 
 /**
- * Flag to show the navigator UIs
+ * Flag to show the default navigator UIs
+ * Example: tab bar
+ * NOTE: This will only be used if no footer element is provided for a tabbar
  */
-const SHOW_NAVIGATION_UI = false;
+const SHOW_DEFAULT_FOOTER_UI = false;
+
+/**
+ * Flag to show the header UIs
+ */
+const SHOW_DEFAULT_HEADER_UI = false;
 
 const Stack = createCustomStackNavigator<ParamTypes>();
 const BottomTab = createCustomTabNavigator<ParamTypes>();
@@ -143,16 +150,18 @@ export default class HvNavigator extends PureComponent<Props> {
    */
   stackScreenOptions = (route: ScreenParams): StackScreenOptions => ({
     headerMode: 'screen',
-    headerShown: SHOW_NAVIGATION_UI,
+    headerShown: SHOW_DEFAULT_HEADER_UI,
     title: this.getId(route.params),
   });
 
   /**
    * Encapsulated options for the tab screenOptions
    */
   tabScreenOptions = (route: ScreenParams): TabScreenOptions => ({
-    headerShown: SHOW_NAVIGATION_UI,
-    tabBarStyle: { display: SHOW_NAVIGATION_UI ? 'flex' : 'none' },
+    headerShown: SHOW_DEFAULT_HEADER_UI,
+    tabBarStyle: {
+      display: SHOW_DEFAULT_FOOTER_UI ? 'flex' : 'none',
+    },
     title: this.getId(route.params),
   });
 
@@ -307,7 +316,7 @@ export default class HvNavigator extends PureComponent<Props> {
   /**
    * Build the required navigator from the xml element
    */
-  Navigator = (): React.ReactElement => {
+  Navigator = (props: NavigatorService.NavigatorProps): React.ReactElement => {
     if (!this.props.element) {
       throw new NavigatorService.HvNavigatorError(
         'No element found for navigator',
@@ -332,6 +341,8 @@ export default class HvNavigator extends PureComponent<Props> {
       ? selected.getAttribute('id')?.toString()
       : undefined;
 
+    const { BottomTabBar } = props;
+
     switch (type) {
       case NavigatorService.NAVIGATOR_TYPE.STACK:
         return (
@@ -349,6 +360,18 @@ export default class HvNavigator extends PureComponent<Props> {
             id={id}
             initialRouteName={selectedId}
             screenOptions={({ route }) => this.tabScreenOptions(route)}
+            tabBar={
+              BottomTabBar &&
+              (p => (
+                <BottomTabBar
+                  descriptors={p.descriptors}
+                  id={id}
+                  insets={p.insets}
+                  navigation={p.navigation}
+                  state={p.state}
+                />
+              ))
+            }
           >
             {this.buildScreens(type, this.props.element)}
           </BottomTab.Navigator>
@@ -363,9 +386,9 @@ export default class HvNavigator extends PureComponent<Props> {
   /**
    * Build a stack navigator for a modal
    */
-  ModalNavigator = (props: {
-    doc: Document | undefined;
-  }): React.ReactElement => {
+  ModalNavigator = (
+    props: NavigatorService.NavigatorProps,
+  ): React.ReactElement => {
     if (!this.props.params) {
       throw new NavigatorService.HvNavigatorError(
         'No params found for modal screen',
@@ -425,17 +448,19 @@ export default class HvNavigator extends PureComponent<Props> {
   };
 
   render() {
+    const Navigator = this.props.params?.isModal
+      ? this.ModalNavigator
+      : this.Navigator;
     return (
       <NavigationContext.Context.Consumer>
-        {() => (
+        {navContext => (
           <Contexts.DocContext.Consumer>
             {docProvider => (
               <NavigatorMapContext.NavigatorMapProvider>
-                {this.props.params && this.props.params.isModal ? (
-                  <this.ModalNavigator doc={docProvider?.getDoc()} />
-                ) : (
-                  <this.Navigator />
-                )}
+                <Navigator
+                  BottomTabBar={navContext?.navigationComponents?.BottomTabBar}
+                  doc={docProvider?.getDoc()}
+                />
               </NavigatorMapContext.NavigatorMapProvider>
             )}
           </Contexts.DocContext.Consumer>

src/core/components/hv-root/index.tsx

@@ -587,6 +587,7 @@ export default class Hyperview extends PureComponent<Types.Props> {
               fetch: this.props.fetch,
               handleBack: this.props.handleBack,
               loadingScreen: this.props.loadingScreen,
+              navigationComponents: this.props.navigationComponents,
               onError: this.props.onError,
               onParseAfter: this.props.onParseAfter,
               onParseBefore: this.props.onParseBefore,

src/core/components/hv-root/types.ts

@@ -10,6 +10,7 @@ import type {
 } from 'hyperview/src/types';
 import type { Props as ErrorProps } from 'hyperview/src/core/components/load-error';
 import type { Props as LoadingProps } from 'hyperview/src/core/components/loading';
+import type { NavigationComponents } from 'hyperview/src/services/navigator';
 import type { RefreshControlProps } from 'react-native';
 
 /**
@@ -21,6 +22,7 @@ export type Props = {
     format: string | undefined,
   ) => string | undefined;
   refreshControl?: ComponentType<RefreshControlProps>;
+  navigationComponents?: NavigationComponents;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   navigation?: any;
   route?: NavigatorService.Route<string, { url?: string }>;

src/services/navigator/index.ts

@@ -142,7 +142,12 @@ export class Navigator {
   };
 }
 
-export type { NavigationProp, Route } from './types';
+export type {
+  NavigationComponents,
+  NavigationProp,
+  NavigatorProps,
+  Route,
+} from './types';
 export {
   CardStyleInterpolators,
   createStackNavigator,

src/services/navigator/types.ts

@@ -1,4 +1,5 @@
 import type { NavigationRouteParams } from 'hyperview/src/types';
+import type { BottomTabBarProps as RNBottomTabBarProps } from '@react-navigation/bottom-tabs';
 
 export const ANCHOR_ID_SEPARATOR = '#';
 export const ID_CARD = 'card';
@@ -58,6 +59,23 @@ export type Route<
   state?: NavigationState;
 };
 
+export type BottomTabBarProps = RNBottomTabBarProps & {
+  id: string;
+};
+
+export type BottomTabBarComponent = (
+  props: BottomTabBarProps,
+) => JSX.Element | null;
+
+export type NavigationComponents = {
+  BottomTabBar?: BottomTabBarComponent;
+};
+
+/* List of props available to navigators */
+export type NavigatorProps = NavigationComponents & {
+  doc: Document | undefined;
+};
+
 /**
  * Minimal representation of the 'NavigationState' used by react-navigation
  */