Indicator not moving when selectedIndex changes

[jarredwitt]

The indicator does not change when the selectedIndex is changed. The onChange event is fired with the correct tab index, but the indicator does not move. I've chased it down to this hook not re-running since selectedIndex isn't in the dependencies list.

  useEffect(() => {
    bar.current &&
      bar.current.measure((_, b, width) => {
        getTabWidth(width);
      });

    selectTab();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [items, barWidth]);

https://github.com/iRoachie/react-native-material-tabs/blob/7684195c95fbdc444310dc8e51dd52f368d5c79f/src/components/MaterialTabs.tsx#L60

Adding selectedIndex to the dependencies list fixes the issue. Might be better to just turn the selectTab function into an effect with selectedIndex as a dependency and remove it from the above hook so that the bar measurement doesn't have to re-run when the index changes. Happy to make a PR if needed.

[iRoachie]

How are you replicating this though? https://snack.expo.io/@roach_iam/shallow-pretzels

[iRoachie]

Nevermind. It's when scrollable is true

[iRoachie]

Fixed in v4.1.1

[pochwerbs]

I'm having this exact same issue using version 4.1.2.