Issue with customRenderTabBar

[alexpchin]

Hi @PedroBern I hope you had a nice Christmas and New Year.

I'm just looking into an issue when you use a custom tab bar. Everything works when you don't render a custom tab bar, however, when using a custom tab bar it seems like the preventDefault does not prevent clicking on the tab when the user is scrolling. Is this perhaps because the isGliding.current is being passed instead of isGliding?

Basically it becomes gittery.

The code below:

/**
   *
   * Wraps the tab bar with `Animated.View` to
   * control the translateY property.
   *
   * Render the header with `renderHeader` prop.
   *
   * Render the default `<TabBar />` with additional
   * `tabBarProps`, or a custom tab bar from the
   * `renderTabBar` prop, inside the Animated wrapper.
   */
  const renderTabBar = (
    props: SceneRendererProps & {
      navigationState: NavigationState<T>;
    }
  ): React.ReactNode => {
    return (
      <Animated.View
        pointerEvents="box-none"
        style={[
          styles.headerContainer,
          { transform: [{ translateY }] },
          headerContainerStyle,
        ]}
        onLayout={getHeaderHeight}
      >
        {renderHeader()}
        {customRenderTabBar ? (
          customRenderTabBar({
            ...props,
            ...tabBarProps,
            isGliding: isGliding.current,
          })
        ) : (
          <TabBar
            {...props}
            {...tabBarProps}
            onTabPress={(event) => {
              if (isGliding.current && preventTabPressOnGliding) {
                event.preventDefault();
              }
              tabBarProps?.onTabPress && tabBarProps.onTabPress(event);
            }}
          />
        )}
      </Animated.View>
    );
  };

Within my custom TabBar, I'm using (shortened version):

import { TabBar as RNTVTabBar } from 'react-native-tab-view';

const TabBar = (
  { badges, isGliding, ...props },
) => {
  return (
    <RNTVTabBar
      {...props}
      .
      .
      onTabPress={(event) => {
          if (isGliding) {
            event.preventDefault();
          }
          props?.onTabPress && props.onTabPress(event);
        }}
      />
  );
};

This is a video showing it working with no custom tab bar:

This is a video showing it not working with a custom tab bar:

[PedroBern]

Hi @alexpchin thanks, I hope you had a nice time too :)

If you log the isGlidding, does it update from false to true and vice versa?

[alexpchin]

@PedroBern When first loading, without scrolling isGliding is false. Then when I scroll up and wait for the tabBar to reach the top, isGliding is false. However, if I click during the scroll, isGliding is true and then it doesn't switch back and it seemingly gets stuck.

[alexpchin]

What if we do:

customRenderTabBar({
    ...props,
    ...tabBarProps,
    isGliding,
    preventTabPressOnGliding
  })

Why do we pass the .current reference instead of the whole ref? Am I forgetting something?

[PedroBern]

If we pass the whole ref, then we will need to use the .current inside the custom tab bar. But if this fixes, ok then. I didn't test with a custom tab bar yet.

Can you test and send a PR? If you can't, I probably will see it only later this week

[alexpchin]

@PedroBern I'll take a look now

[alexpchin]

Hi @PedroBern I've made a PR #34 Please take a look!

[PedroBern]

@alexpchin thanks for the PR, v2 is out 🚀

[PedroBern]

@alexpchin I did some modifications to the example after updating the types 👍

[alexpchin]

@PedroBern Thanks for merging so quiickly. My Typescript is a bit rusty... I thought you might have to do that!

[PedroBern]

the problem was with the CollapsibleTabView types definition, now its good, but I still need to add the generics for the createMaterialCollapsibleTabView

[PedroBern]

Now it's possible to pass the custom tab bar props type into the CollapsibleTabView and tabBarProps and renderTabBar will recognize the props

<CollapsibleTabView<Route, CustomTabBarProps> ... tabBarProps={{... typedProps ...}} ...  />