NativeBase: Invalid prop tabStyle

I think I found the problem.

at src/basic/Tabs/DefaultTabBar.js:25, tabStyle’s type is set like

    tabStyle: PropTypes.shape({
      style: PropTypes.any,
    }),

but actually its always passed as arrays, (src/basic/Tabs/index.js:298)

and index-accessed in DefaultTabBar too (src/basic/Tabs/DefaultTabBar.js)

so I think DefaultTabBar.propTypes is wrong, but I couldn’t just monkey-patch DefaultTabBar.propTypes (it still gave errors), so I worked around it by defining a custom renderTabBar function that hooks and replaces tabStyle with an Array that doesn’t look like one and putting it in <Tabs>

import { Tab, Tabs, DefaultTabBar } from "native-base";

const renderTabBar = (props) => {
  props.tabStyle = Object.create(props.tabStyle);
  return <DefaultTabBar {...props} />;
};

const SomeFC = () => (
/* ... */
    <Tabs renderTabBar={renderTabBar}>
        <Tab tabStyle={{ /* ... */ }}>
            /* ... */
        </Tab>
        <Tab tabStyle={{ /* ... */ }}>
            /* ... */
        </Tab>        
    </Tabs>
/* ... */
)

for typescript users (like me)

declare module "native-base" {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  export class DefaultTabBar extends React.Component<any, any> {}
}

import { Tab, Tabs, DefaultTabBar } from "native-base";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const renderTabBar = (props: any) => {
  props.tabStyle = Object.create(props.tabStyle);
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  return <DefaultTabBar {...props} />;
};

const SomeFC = () => (
/* ... */
    <Tabs renderTabBar={renderTabBar}>
        <Tab tabStyle={{ /* ... */ }}>
            /* ... */
        </Tab>
        <Tab tabStyle={{ /* ... */ }}>
            /* ... */
        </Tab>        
    </Tabs>
/* ... */
)

any update for this issue?

I’m experiencing same issue after upgrading from 2.13.14 to 2.15.2(latest)

Same issue here – upgraded from 2.13.14 -> 2.15.2. I tried fixing the prop as follows:

-                        tabStyle={[
-                            tabStyles.tabStyle,
-                            tabStyles.leftBorderStyle,
-                            page !== 1 && tabStyles.rightBorderStyle
-                        ]}
+                        tabStyle={{
+                            ...tabStyles.tabStyle,
+                            ...tabStyles.leftBorderStyle,
+                            ...(page !== 1 && tabStyles.rightBorderStyle)
+                        }}

But still get the warning

I’m sorry @yu-ichiro, apologies. I have tried the answers in the link, it solve one of the issues but not the prop type warning. I will take your advice and post to SO.

@realtril I’m away from RN for a while so I can’t help you right out sorry… but I’m kind of interested in why this occurs and why’s this shape issue still here, so I might fork this repo and try to find a solution (if I got time)

@sammiepls

Hey Sammie,

Sorry for sudden mention. I am facing the same problem. Have you solved it and would you mind sharing if solved please?

version 2.15.2 still has this warning

@yu-ichiro it worked! But when I try to pass in a style prop, then I’ll get the same warning. I have to hard-code the style to remove the tabs’ border (https://stackoverflow.com/questions/51466904/how-to-remove-the-border-of-native-base-tabs) and doing that seems to negate the workaround.

const renderTabBar = (props) => {
      props.tabStyle = Object.create(props.tabStyle);
      props.style = Object.create({ borderBottomWidth: 0 });
  return <ScrollableTab {...props}  />
};

Will remove the bottom border, but gives the earlier tabStyle warning and this warning:

Warning: Failed prop type: Invalid prop style of type array supplied to ScrollableTabBar, expected object.

The culprit seems to be the fact that props are being spread onto the <DefaultTabBar {...props} /> in native-base/src/basic/Tabs/index.js:131.