Fix ensure array children

[PedroBern]

an alternative to #69

@alexpchin what you think?

Close #72
Close #68

documentation

// add unique key to each child
React.Children.toArray(children)

[github-actions]

The Expo app for the example from this branch is ready!

expo.io/@pedrobern/react-native-collapsible-tab-view-demos?release-channel=pr-74

[alexpchin]

@PedroBern

I'm liking this. However, this is still saying that there has to be more than one element in children?

Another example where there might only be one child is. potentially, is if someone wanted to use this package to render a header with the snap, or diffClamp but without a TabBar - perhaps a Searchbox ontop of results? If we allow one child, then they can re-use the same page structure in the app as a page with more than one tab?

I personally have a use-case in my app (which I know is unusual) where there are multiple user types but the most basic only has one tab as they don't have enough content. However, because of the way the profile page is structured (like Instagram), the user's profile image and details are rendered above the tabs?

[PedroBern]

I'm liking this. However, this is still saying that there has to be more than one element in children?

No, it accepts 1 or more 👍

if (React.Children.count(children) === 0) {
  throw new Error('CollapsibleTabs must have at least one child.')
}

The problem would be with 0 children, but that's not the use case you are saying

[alexpchin]

Have you run the Default example and commented out the everything apart from Articles? (Or just leave any other one).

…

On 30 Jan 2021, at 20:45, pedrobern ***@***.***> wrote:  I'm liking this. However, this is still saying that there has to be more than one element in children? No, it accepts 1 or more 👍 if (React.Children.count(children) === 0) { throw new Error('CollapsibleTabs must have at least one child.') } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[PedroBern]

yes you are right, it throws an error with only 1 child! I will investigate now

[PedroBern]

@alexpchin now it's working the problem was with the indicator component. Works with 1 child, but I would recommend using "scrollable tabs" otherwise it will be one big tab.

[alexpchin]

I've just pulled the latest version. However, I currrently see:

With the type error being:

(property) Container: React.FC<CollapsibleProps<TabNames, MaterialTabBarProps<TabNames>>>
This JSX tag's 'children' prop expects type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>[] | ... 6 more ... | (ReactElement<...>[] & ReactPortal)' which requires multiple children, but only a single child was provided.ts(2745)

And:

Is it working for you?

[PedroBern]

here is working, but there is this typescript error, I will fix now

[PedroBern]

I was having this error before, maybe you are not with the latest version, I rebased and forced push

[PedroBern]

@alexpchin just rebased and forced push again with the typescript fixes, can you test it?

[PedroBern]

I merged, if you see any errors, let me know