Tab text is not centered

[michelletaing]

Hello,

I copied and pasted the code from the quick start example, and the tab bar looks like this:

Why is the tab text not centered with the indicator? I've tried a million different styling things, but I can't seem to get it centered.

(I am using expo)

[devnaumov]

@michelletaing

You can render a custom tab bar by using MaterialTabBar as the base, then pass MaterialTabItem as the TabItemComponent. Inside MaterialTabItem, you can build your own label like this:

<MaterialTabItem
  {...tabItemProps}
  label={({ name }) => {
    const Icon = name === 'A' ? AnchorIcon : StarIcon;

    return (
      <TouchableOpacity
        style={{ width: window.width / props.tabNames.length }}
        onPress={() => tabItemProps.onPress(name)}>
        <Icon className="text-foreground" width={24} height={24} />
      </TouchableOpacity>
    );
  }}
/>

[mbrzuzy]

Not sure what's going on with MaterialTabBar, but I fixed this issue with the following:

<MaterialTabBar
    labelStyle={{
        margin: 0,
        textAlign: 'center',
        width: <screen_width> / <tab_count>
    }}
/>