#1039·nativewind

Nativewind 4.1 and Material Top Tabs - Tab alignment issues

Author: shovel-kunCreated Sep 4, 2024Updated Jul 8, 2026
Labelsbugneeds reproductionv4needs investigation

Describe the bug Original pre 4.1 issue by @bhyoo99: #921

With Nativewind 4.1, the Material Top Tabs component from react-navigation fails to align itself properly. The tab bar containers do not take up the remaining space, but the tab bar container indicator does.

Removing the nativewind presets from babel.config.js confirms that it is an Nativewind issue.

Bug

Reproduction https://github.com/shovel-kun/nativewind-material-top-tabs

Expected behavior It should be aligned like below. Hack Note that the workaround below will help the tab bar containers to properly align, however the pressable area does not take up the same space.

javascript
screenOptions={{
  // Uncommenting the following lines will fix the tab bar alignment,
  // but the pressable area is still off
  tabBarContentContainerStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
}}>