fix: add event emit for long press (callstack#3769)

Co-authored-by: Tomasz Janiczek <[email protected]>

src/react-navigation/types.tsx

@@ -14,6 +14,10 @@ export type MaterialBottomTabNavigationEventMap = {
  * Event which fires on tapping on the tab in the tab bar.
  */
  tabPress: { data: undefined; canPreventDefault: true };
+ /**
+ * Event which fires on long pressing on the tab in the tab bar.
+ */
+ onTabLongPress: { data: undefined; canPreventDefault: true };
 };
 
 export type MaterialBottomTabNavigationHelpers = NavigationHelpers<

src/react-navigation/views/MaterialBottomTabView.tsx

@@ -16,6 +16,7 @@ import type {
  MaterialBottomTabDescriptorMap,
  MaterialBottomTabNavigationConfig,
  MaterialBottomTabNavigationHelpers,
+ MaterialBottomTabNavigationEventMap,
 } from '../types';
 
 type Props = MaterialBottomTabNavigationConfig & {
@@ -24,6 +25,19 @@ type Props = MaterialBottomTabNavigationConfig & {
  descriptors: MaterialBottomTabDescriptorMap;
 };
 
+type EventHandler = React.ComponentProps<typeof BottomNavigation>[
+ | 'onTabPress'
+ | 'onTabLongPress'];
+
+type EventHandlerArgument = Parameters<NonNullable<EventHandler>>[0];
+
+type EventHandlerCallback = EventHandlerArgument & {
+ route: EventHandlerArgument['route'] & {
+ name: string;
+ params?: object;
+ };
+};
+
 export default function MaterialBottomTabView({
  state,
  navigation,
@@ -32,6 +46,25 @@ export default function MaterialBottomTabView({
 }: Props) {
  const buildLink = useNavigationLink();
 
+ const eventHandlerCallback = (
+ type: keyof MaterialBottomTabNavigationEventMap,
+ callback?: (route: EventHandlerCallback['route']) => void
+ ) => {
+ return ({ route, preventDefault }: EventHandlerCallback) => {
+ const event = navigation.emit({
+ type,
+ target: route.key,
+ canPreventDefault: true,
+ });
+
+ if (event.defaultPrevented) {
+ return preventDefault();
+ }
+
+ callback?.(route);
+ };
+ };
+
  return (
  <BottomNavigation
  {...rest}
@@ -108,22 +141,13 @@ export default function MaterialBottomTabView({
  getTestID={({ route }) =>
  descriptors[route.key].options.tabBarButtonTestID
  }
- onTabPress={({ route, preventDefault }) => {
-  const event = navigation.emit({
-  type: 'tabPress',
- target: route.key,
- canPreventDefault: true,
+ onTabLongPress={eventHandlerCallback('onTabLongPress')}
+ onTabPress={eventHandlerCallback('tabPress', (route) => {
+ navigation.dispatch({
+ ...CommonActions.navigate(route.name, route.params),
+ target: state.key,
  });
-
- if (event.defaultPrevented) {
- preventDefault();
- } else {
- navigation.dispatch({
- ...CommonActions.navigate(route.name, route.params),
- target: state.key,
- });
- }
- }}
+ })}
  />
  );
 }