Tabs Issue

[ismarosmanovic]

Hello, I just found out that Tabs.Bar throw an error when Tabs are placed conditionally. For example

<Tabs colorScheme={'orange'} size={'sm'} align="center" flexGrow={1}>
         <Tabs.Bar isFitted={true}>
             <Tabs.Tab _text={{ textAlign: 'center' }}>
                    General
              </Tabs.Tab>
               {(MainData && MainData.Customer && !ServiceRecord) &&
               <Tabs.Tab _text={{ textAlign: 'center' }}>
                     Customer
                </Tabs.Tab>
                }
                 {!ServiceRecord &&
                   <Tabs.Tab _text={{ textAlign: 'center' }} >
                       Shipping
                   </Tabs.Tab>
                   }
              <Tabs.Tab _text={{ textAlign: 'center' }}>
                  Delivery
             </Tabs.Tab>
         </Tabs.Bar>
</Tabs>

The error is thrown as: TypeError: null is not an object (evaluating 'bar.props')

So I look at the problem and found out that if I play with Tabs.tsx file and change

const convertToCollectionItems = (children: any) => {
  const { views, bars } = getTabsAndBars(children);
  return bars.map((bar: any, index: number) => {
      let textValue;
      if (bar.props.accessibilityLabel) {  //--- Here is  where error occurs
        textValue = bar.props.accessibilityLabel;
      } else if (typeof bar.props.children === 'string') {
        textValue = bar.props.children;
      } else if (__DEV__) {
        console.warn('Please pass accessibilityLabel into Tabs.Tab component');
      }
      return (
        <Item key={index} title={bar} textValue={textValue}>
          {views[index]}
        </Item>
      );
  });
};

with

const convertToCollectionItems = (children: any) => {
  const { views, bars } = getTabsAndBars(children);
  return bars.map((bar: any, index: number) => {
    if (bar && bar.props) {    ///--- Here is the line I added
      let textValue;
      if (bar.props.accessibilityLabel) {
        textValue = bar.props.accessibilityLabel;
      } else if (typeof bar.props.children === 'string') {
        textValue = bar.props.children;
      } else if (__DEV__) {
        console.warn('Please pass accessibilityLabel into Tabs.Tab component');
      }
      return (
        <Item key={index} title={bar} textValue={textValue}>
          {views[index]}
        </Item>
      );
    }
  });
};

Tabs would show as expected.

Thenk You, Ismar

[surajahmed]

@ismarosmanovic Tabs component is currently on hold. We're going to add full support for that soon. Thanks for reporting!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.