feat: add tabBarBadge and tabBarIndicator options for material top tabs

react-navigation · Jul 28, 2021 · fdb3ede · fdb3ede
1 parent 504b26f
commit fdb3ede
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 13 deletions.
diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx
@@ -8,8 +8,13 @@ import type {
   TabActionHelpers,
   TabNavigationState,
 } from '@react-navigation/native';
+import type React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { SceneRendererProps, TabViewProps } from 'react-native-tab-view';
+import type {
+  SceneRendererProps,
+  TabBar,
+  TabViewProps,
+} from 'react-native-tab-view';
 
 export type MaterialTopTabNavigationEventMap = {
   /**
@@ -92,6 +97,31 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
 
+  /**
+   * Function that returns a React element to use as a badge for the tab.
+   */
+  tabBarBadge?: () => React.ReactNode;
+
+  /**
+   * Function that returns a React element as the tab bar indicator.
+   */
+  tabBarIndicator?: (
+    props: Omit<
+      Parameters<React.ComponentProps<typeof TabBar>['renderIndicator']>[0],
+      'navigationState'
+    > & { state: TabNavigationState<ParamListBase> }
+  ) => React.ReactNode;
+
+  /**
+   * Style object for the tab bar indicator.
+   */
+  tabBarIndicatorStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the view containing the tab bar indicator.
+   */
+  tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;
+
   /**
    * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
    * It's recommended to set this if you don't have a label for the tab.
@@ -165,16 +195,6 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarItemStyle?: StyleProp<ViewStyle>;
 
-  /**
-   * Style object for the tab bar indicator.
-   */
-  tabBarIndicatorStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style object for the view containing the tab bar indicator.
-   */
-  tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;
-
   /**
    * Style object for the view containing the tab items.
    */

diff --git a/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx b/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx
@@ -1,8 +1,13 @@
-import { Route, useTheme } from '@react-navigation/native';
+import {
+  ParamListBase,
+  Route,
+  TabNavigationState,
+  useTheme,
+} from '@react-navigation/native';
 import Color from 'color';
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { TabBar } from 'react-native-tab-view';
+import { TabBar, TabBarIndicator } from 'react-native-tab-view';
 
 import type { MaterialTopTabBarProps } from '../types';
 
@@ -104,6 +109,21 @@ export default function TabBarTop({
 
         return label({ focused, color });
       }}
+      renderBadge={({ route }) => {
+        const { tabBarBadge } = descriptors[route.key].options;
+
+        return tabBarBadge?.() ?? null;
+      }}
+      renderIndicator={({ navigationState: state, ...rest }) => {
+        return focusedOptions.tabBarIndicator ? (
+          focusedOptions.tabBarIndicator({
+            state: state as TabNavigationState<ParamListBase>,
+            ...rest,
+          })
+        ) : (
+          <TabBarIndicator navigationState={state} {...rest} />
+        );
+      }}
     />
   );
 }