Container children must be wrapped in a <Tabs.Tab ... /> component

[kurucaner]

I'm encountering an issue when trying to create a reusable component that contains Tabs.Tab as a wrapper and displays all the children. The Tabs.Container component is expecting its children to be directly wrapped in Tabs.Tab components, but this requirement seems to cause an error when using a reusable component.

export const ReviewsTab = ({ children }) => {
  return (
    <Tabs.Tab name="Reviews" label="Reviews">
      {children}
    </Tabs.Tab>
  );
};

const Foo = () => {
  <Tabs.Container>
    <ReviewsTab>
      <Text>Foo</Text>
    </ReviewsTab>
  </Tabs.Container>
};

Feature request

• Create a reusable component that contains Tabs.Tab as a wrapper and renders all the children.
• Use this reusable component in a parent component where Tabs.Container is used.

Current behavior

It throws an error: "Container children must be wrapped in a <Tabs.Tab ... /> component"

[lorenzogonnelli]

same problem here :(

[mhmdiqbal]

You can create a reusable component like this:

<Tabs.Tab label={t`Collections`} name="collections">
  <TabCollections />
</Tabs.Tab>

const TabCollections = () => {
  return (
    <Tabs.FlatList />
  );
};