PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
894 stars 175 forks source link

TabBar delay when using `lazy` + custom `TabBarComponent` #147

Closed alexpchin closed 3 years ago

alexpchin commented 3 years ago

Current behavior

Since 4.0.1, I now see that if you use lazy with a custom TabBarComponent if you click the tab quickly after the page loads, the wrong TabBarIcon is selected.

If I don't use a custom TabBarComponent then I can't replicate it.

Video with custom TabComponent:

simulator3.mov.zip

The same setup without TabComponent:

simulator4.mov.zip

(Just FYI - My TabBarItem Component is almost exactly the same as the one in the library, except I render an Icon and a notification badge).

return (
    <Pressable
      // Removing Android Ripple
      android_ripple={{
        borderless: true,
        color: pressColor,
      }}
      onLayout={onLayout}
      onPress={() => onPress(name)}
      style={({ pressed }) => [
        { opacity: pressed ? pressOpacity : 1 },
        !scrollEnabled ? styles.grow : styles.fixed,
        styles.item,
        style,
      ]}
      {...rest}
    >
      {_hasIcon ? (
        <MaskedView
          maskElement={
            <FontAwesomeIcon color={C.FONT_COLOR} icon={icon} size={22} />
          }
        >
          <Animated.View style={[styles.icon, iconStylez, iconStyle]} />
        </MaskedView>
      ) : (
        <Animated.Text
          numberOfLines={1}
          style={[styles.label, stylez, labelStyle]}
        >
          {label}
        </Animated.Text>
      )}
      {badge > 0 && (
        <View style={styles.badge}>
          <Text
            allowFontScaling={true}
            numberOfLines={1}
            style={styles.badgeTxt}
          >
            {badge}
          </Text>
        </View>
      )}
    </Pressable>
  );
andreialecu commented 3 years ago

4.0.1 didn't really change anything that could break this 🤔

Based on your video it seems that the indicator renders correctly, it's just the highlight that is wrong. That could also be a bug in the custom tab bar though.

Would need a repro in order to investigate.

alexpchin commented 3 years ago

Sorry, @andreialecu I wasn't clear when I said that. I just noticed it since installing 4.0.1. It could have been present before. I will take a deeper dive to see if I can find the cause of the problem.

andreialecu commented 3 years ago

I think #186 should help with this.

andreialecu commented 3 years ago

4.2.1 should have some pretty huge performance improvements, which I think should resolve this.

Closing, feel free to ping me to reopen if this is still an issue.