[v3][iOS] Tabs jump over each other on tap

[chybisov]

Current behaviour

tabs jump over each other, If you tap not on adjacent ones

Expected behaviour

tabs should not jump over each other

Code sample

const tabBarOptions: MaterialTopTabBarOptions = {
  labelStyle: {
    textTransform: 'none',
    fontSize: 12
  },
  tabStyle: {
    paddingVertical: 4,
  },
  activeTintColor: Colors.light.main,
  inactiveTintColor: Colors.grey[900],
  style: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: Colors.grey[200],
    elevation: 0,
  },
  indicatorStyle: {
    backgroundColor: Colors.light.main,
  },
  pressColor: Colors.grey[100],
};

export const TopTab = createMaterialTopTabNavigator();

export function Test({ navigation, route }: NativeStackScreenProps<'Test'>) {
  return (
    <TopTab.Navigator tabBarOptions={tabBarOptions} backBehavior="none" initialLayout={styles.initialLayout} initialRouteName={route.params?.currentTab}>
      <TopTab.Screen name="Test 1" component={TestScreen} />
      <TopTab.Screen name="Test 2" component={TestScreen} />
      <TopTab.Screen name="Test 3" component={TestScreen} />
      <TopTab.Screen name="Test 4" component={TestScreen} />
    </TopTab.Navigator>
  );
}

What have you tried

Android works fine.

Your Environment

software	version
ios	14.4.1
expo	40.0.1
react-native	0.63.4
react-native-tab-view	3.0.0
react-native-pager-view	5.1.0
@react-navigation/material-top-tabs	5.3.14
node	15.11
yarn	1.22.4

[Aaqib925]

I checked and found something weird , that when we are transiting from lower index to higher it's working fine but when when we are moving from higher to lower index this issue still replicated in IOS , any thing you can suggest?

[jp928]

Same problem here.

[Aaqib925]

For those who are still facing this issue, can switch to package react-native-tab-view-fixed for iOS, just use renderFooter or renderHeader functions for tab container. I work great with great animations in iOS only.

[zlenkod]

Still present 😞

[XTKKKKK]

Still Present QAQ

[simonlee9504]

If anyone is looking for a very temporary workaround, I managed to resolve it by simply deleting /src/Pager.native.tsx. Not sure what the file was really used for along with /src/Pager.tsx but tab animation switching is fine now for me.

[KrisLau]

Commenting for more exposure to the issue. I'm also experiencing this and it seems to be doing the same thing: lower to higher index works but higher to lower doesn't work.

[kimkong88]

I am experiencing same issue here. In case I this does not get fixed in time, I will have to fork the repo and try above method :(

[phamtu24]

Same problem here :|