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.
Reproduction https://github.com/shovel-kun/nativewind-material-top-tabs
Expected behavior
It should be aligned like below.
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.
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',
},
}}>Source: nativewind/nativewind