fix: add onTabLongPress for Bottom Navigation (#3758)

Author: josemak25

src/components/BottomNavigation/BottomNavigation.tsx

@@ -195,6 +195,10 @@ export type Props = {
    * Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top.
    */
   onTabPress?: (props: { route: Route } & TabPressEvent) => void;
+  /**
+   * Function to execute on tab long press. It receives the route for the pressed tab, useful for things like custom action when longed pressed.
+   */
+  onTabLongPress?: (props: { route: Route } & TabPressEvent) => void;
   /**
    * Custom color for icon and label in the active tab.
    */
@@ -335,6 +339,7 @@ const BottomNavigation = ({
   sceneAnimationType = 'opacity',
   sceneAnimationEasing,
   onTabPress,
+  onTabLongPress,
   onIndexChange,
   shifting: shiftingProp,
   safeAreaInsets,
@@ -580,6 +585,7 @@ const BottomNavigation = ({
         labeled={labeled}
         animationEasing={sceneAnimationEasing}
         onTabPress={handleTabPress}
+        onTabLongPress={onTabLongPress}
         shifting={shifting}
         safeAreaInsets={safeAreaInsets}
         labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -162,6 +162,10 @@ export type Props = {
    * Function to execute on tab press. It receives the route for the pressed tab. Use this to update the navigation state.
    */
   onTabPress: (props: { route: Route } & TabPressEvent) => void;
+  /**
+   * Function to execute on tab long press. It receives the route for the pressed tab
+   */
+  onTabLongPress?: (props: { route: Route } & TabPressEvent) => void;
   /**
    * Custom color for icon and label in the active tab.
    */
@@ -366,6 +370,7 @@ const BottomNavigationBar = ({
   labeled = true,
   animationEasing,
   onTabPress,
+  onTabLongPress,
   shifting: shiftingProp,
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
@@ -498,7 +503,7 @@ const BottomNavigationBar = ({
     animateToIndex(navigationState.index);
   }, [navigationState.index, animateToIndex]);
 
-  const handleTabPress = (index: number) => {
+  const eventForIndex = (index: number) => {
     const event = {
       route: navigationState.routes[index],
       defaultPrevented: false,
@@ -507,7 +512,7 @@ const BottomNavigationBar = ({
       },
     };
 
-    onTabPress(event);
+    return event;
   };
 
   const { routes } = navigationState;
@@ -745,7 +750,8 @@ const BottomNavigationBar = ({
               borderless: true,
               centered: true,
               rippleColor: isV3 ? 'transparent' : touchColor,
-              onPress: () => handleTabPress(index),
+              onPress: () => onTabPress(eventForIndex(index)),
+              onLongPress: () => onTabLongPress?.(eventForIndex(index)),
               testID: getTestID({ route }),
               accessibilityLabel: getAccessibilityLabel({ route }),
               accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',

src/components/__tests__/BottomNavigation.test.tsx

@@ -190,6 +190,60 @@ it('calls onIndexChange', () => {
   expect(onIndexChange).toHaveBeenCalledTimes(1);
 });
 
+it('calls onTabPress', () => {
+  const onTabPress = jest.fn();
+  const onIndexChange = jest.fn();
+
+  const tree = render(
+    <BottomNavigation
+      shifting
+      onTabPress={onTabPress}
+      onIndexChange={onIndexChange}
+      navigationState={createState(0, 5)}
+      renderScene={({ route }) => route.title}
+    />
+  );
+  fireEvent(tree.getByText('Route: 1'), 'onPress');
+  expect(onTabPress).toHaveBeenCalled();
+  expect(onTabPress).toHaveBeenCalledTimes(1);
+  expect(onTabPress).toHaveBeenLastCalledWith(
+    expect.objectContaining({
+      route: expect.objectContaining({
+        key: 'key-1',
+      }),
+      defaultPrevented: expect.any(Boolean),
+      preventDefault: expect.any(Function),
+    })
+  );
+});
+
+it('calls onTabLongPress', () => {
+  const onTabLongPress = jest.fn();
+  const onIndexChange = jest.fn();
+
+  const tree = render(
+    <BottomNavigation
+      shifting
+      onIndexChange={onIndexChange}
+      onTabLongPress={onTabLongPress}
+      navigationState={createState(0, 5)}
+      renderScene={({ route }) => route.title}
+    />
+  );
+  fireEvent(tree.getByText('Route: 2'), 'onLongPress');
+  expect(onTabLongPress).toHaveBeenCalled();
+  expect(onTabLongPress).toHaveBeenCalledTimes(1);
+  expect(onTabLongPress).toHaveBeenLastCalledWith(
+    expect.objectContaining({
+      route: expect.objectContaining({
+        key: 'key-2',
+      }),
+      defaultPrevented: expect.any(Boolean),
+      preventDefault: expect.any(Function),
+    })
+  );
+});
+
 it('renders non-shifting bottom navigation', () => {
   const tree = renderer
     .create(