chore: use TS generics for BottomTab types (#3741)

Author: tjaniczek

example/src/Examples/BottomNavigationBarExample.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { CommonActions } from '@react-navigation/native';
 import { Text, BottomNavigation } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
@@ -43,7 +44,10 @@ export default function BottomNavigationBarExample() {
             if (event.defaultPrevented) {
               preventDefault();
             } else {
-              navigation.navigate(route);
+              navigation.dispatch({
+                ...CommonActions.navigate(route.name, route.params),
+                target: state.key,
+              });
             }
           }}
           renderIcon={({ route, focused, color }) =>

src/components/BottomNavigation/BottomNavigation.tsx

@@ -19,7 +19,7 @@ import type { IconSource } from '../Icon';
 import BottomNavigationBar from './BottomNavigationBar';
 import BottomNavigationRouteScreen from './BottomNavigationRouteScreen';
 
-type Route = {
+type BaseRoute = {
   key: string;
   title?: string;
   focusedIcon?: IconSource;
@@ -31,7 +31,7 @@ type Route = {
   lazy?: boolean;
 };
 
-type NavigationState = {
+type NavigationState<Route extends BaseRoute> = {
   index: number;
   routes: Route[];
 };
@@ -41,7 +41,7 @@ type TabPressEvent = {
   preventDefault(): void;
 };
 
-type TouchableProps = TouchableWithoutFeedbackProps & {
+type TouchableProps<Route extends BaseRoute> = TouchableWithoutFeedbackProps & {
   key: string;
   route: Route;
   children: React.ReactNode;
@@ -50,7 +50,7 @@ type TouchableProps = TouchableWithoutFeedbackProps & {
   rippleColor?: string;
 };
 
-export type Props = {
+export type Props<Route extends BaseRoute> = {
   /**
    * Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.
    *
@@ -100,7 +100,7 @@ export type Props = {
    *
    * `BottomNavigation` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback.
    */
-  navigationState: NavigationState;
+  navigationState: NavigationState<Route>;
   /**
    * Callback which is called on tab change, receives the index of the new tab as argument.
    * The navigation state needs to be updated when it's called, otherwise the change is dropped.
@@ -165,7 +165,7 @@ export type Props = {
    * Callback which returns a React element to be used as the touchable for the tab item.
    * Renders a `TouchableRipple` on Android and `TouchableWithoutFeedback` with `View` on iOS.
    */
-  renderTouchable?: (props: TouchableProps) => React.ReactNode;
+  renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
    * Uses `route.accessibilityLabel` by default.
@@ -267,10 +267,10 @@ const SceneComponent = React.memo(({ component, ...rest }: any) =>
 );
 
 /**
- * Bottom navigation provides quick navigation between top-level views of an app with a bottom navigation bar.
+ * BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.
  * It is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).
  *
- * By default Bottom navigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
+ * By default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
  * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
  *
  * <div class="screenshots">
@@ -318,7 +318,7 @@ const SceneComponent = React.memo(({ component, ...rest }: any) =>
  * export default MyComponent;
  * ```
  */
-const BottomNavigation = ({
+const BottomNavigation = <Route extends BaseRoute>({
   navigationState,
   renderScene,
   renderIcon,
@@ -348,7 +348,7 @@ const BottomNavigation = ({
   testID = 'bottom-navigation',
   theme: themeOverrides,
   getLazy = ({ route }: { route: Route }) => route.lazy,
-}: Props) => {
+}: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
   const { scale } = theme.animation;
   const compact = compactProp ?? !theme.isV3;
@@ -439,7 +439,7 @@ const BottomNavigation = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const prevNavigationState = React.useRef<NavigationState>();
+  const prevNavigationState = React.useRef<NavigationState<Route>>();
 
   React.useEffect(() => {
     // Reset offsets of previous and current tabs before animation
@@ -602,7 +602,7 @@ const BottomNavigation = ({
  * Pure components are used to minimize re-rendering of the pages.
  * This drastically improves the animation performance.
  */
-BottomNavigation.SceneMap = (scenes: {
+BottomNavigation.SceneMap = <Route extends BaseRoute>(scenes: {
   [key: string]: React.ComponentType<{
     route: Route;
     jumpTo: (key: string) => void;

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -34,7 +34,7 @@ import {
   getLabelColor,
 } from './utils';
 
-type Route = {
+type BaseRoute = {
   key: string;
   title?: string;
   focusedIcon?: IconSource;
@@ -46,7 +46,7 @@ type Route = {
   lazy?: boolean;
 };
 
-type NavigationState = {
+type NavigationState<Route extends BaseRoute> = {
   index: number;
   routes: Route[];
 };
@@ -56,7 +56,7 @@ type TabPressEvent = {
   preventDefault(): void;
 };
 
-type TouchableProps = TouchableWithoutFeedbackProps & {
+type TouchableProps<Route extends BaseRoute> = TouchableWithoutFeedbackProps & {
   key: string;
   route: Route;
   children: React.ReactNode;
@@ -65,7 +65,7 @@ type TouchableProps = TouchableWithoutFeedbackProps & {
   rippleColor?: string;
 };
 
-export type Props = {
+export type Props<Route extends BaseRoute> = {
   /**
    * Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.
    *
@@ -115,7 +115,7 @@ export type Props = {
    *
    * `BottomNavigation.Bar` is a controlled component, which means the `index` needs to be updated via the `onTabPress` callback.
    */
-  navigationState: NavigationState;
+  navigationState: NavigationState<Route>;
   /**
    * Callback which returns a React Element to be used as tab icon.
    */
@@ -136,7 +136,7 @@ export type Props = {
    * Callback which returns a React element to be used as the touchable for the tab item.
    * Renders a `TouchableRipple` on Android and `TouchableWithoutFeedback` with `View` on iOS.
    */
-  renderTouchable?: (props: TouchableProps) => React.ReactNode;
+  renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
   /**
    * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
    * Uses `route.accessibilityLabel` by default.
@@ -214,15 +214,15 @@ const MAX_TAB_WIDTH = 168;
 const BAR_HEIGHT = 56;
 const OUTLINE_WIDTH = 64;
 
-const Touchable = ({
+const Touchable = <Route extends BaseRoute>({
   route: _0,
   style,
   children,
   borderless,
   centered,
   rippleColor,
   ...rest
-}: TouchableProps) =>
+}: TouchableProps<Route>) =>
   TouchableRipple.supported ? (
     <TouchableRipple
       {...rest}
@@ -278,7 +278,10 @@ const Touchable = ({
  *             if (event.defaultPrevented) {
  *               preventDefault();
  *             } else {
- *               navigation.navigate(route);
+ *              navigation.dispatch({
+ *                 ...CommonActions.navigate(route.name, route.params),
+ *                 target: state.key,
+ *               });
  *             }
  *           }}
  *           renderIcon={({ route, focused, color }) => {
@@ -352,11 +355,11 @@ const Touchable = ({
  * });
  * ```
  */
-const BottomNavigationBar = ({
+const BottomNavigationBar = <Route extends BaseRoute>({
   navigationState,
   renderIcon,
   renderLabel,
-  renderTouchable = (props: TouchableProps) => <Touchable {...props} />,
+  renderTouchable = (props: TouchableProps<Route>) => <Touchable {...props} />,
   getLabelText = ({ route }: { route: Route }) => route.title,
   getBadge = ({ route }: { route: Route }) => route.badge,
   getColor = ({ route }: { route: Route }) => route.color,
@@ -377,7 +380,7 @@ const BottomNavigationBar = ({
   compact: compactProp,
   testID = 'bottom-navigation-bar',
   theme: themeOverrides,
-}: Props) => {
+}: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
   const { bottom, left, right } = useSafeAreaInsets();
   const { scale } = theme.animation;

src/components/__tests__/BottomNavigation.test.tsx

@@ -79,6 +79,7 @@ const createState = (index: number, length: number) => ({
   routes: Array.from({ length }, (_, i) => ({
     key: `key-${i}`,
     focusedIcon: icons[i],
+    unfocusedIcon: undefined,
     title: `Route: ${i}`,
   })),
 });
@@ -623,3 +624,36 @@ it('barStyle animated value changes correctly', () => {
     transform: [{ scale: 1.5 }],
   });
 });
+
+it("allows customizing Route's type via generics", () => {
+  type CustomRoute = {
+    key: string;
+    customPropertyName: string;
+  };
+
+  type CustomState = {
+    index: number;
+    routes: CustomRoute[];
+  };
+
+  const state: CustomState = {
+    index: 0,
+    routes: [
+      { key: 'a', customPropertyName: 'First' },
+      { key: 'b', customPropertyName: 'Second' },
+    ],
+  };
+
+  const tree = renderer
+    .create(
+      <BottomNavigation
+        navigationState={state}
+        onIndexChange={jest.fn()}
+        getLabelText={({ route }) => route.customPropertyName}
+        renderScene={({ route }) => route.customPropertyName}
+      />
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});