PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
834 stars 162 forks source link

Conditionally rendered <Tabs.Tab> component showing null is not an object #102

Closed dan-fein closed 3 years ago

dan-fein commented 3 years ago

Current behavior

Hi I'm using RC 0 and found that conditionally rendering tabs almost works. The below code is the closest I'm getting to rendering something conditionally.

Basically, I believe Container is expecting that 100% of the components children are Tabs.Tab. In reality, when conditionally rendering something, it still seems to be trying to use that child. For instance, I simplified some code for a sample of when it does not render:

                  {[].length > 0 && <Tabs.Tab name="Items">
                    <Posts posts={items} render={'items'} currentThing={thing} {...props} key="items" tabView={Tabs} />
                  </Tabs.Tab>}    

This returns null is not an object which is presumably because there's nothing there. So I tried this:

                  {[].length > 0 ? <Tabs.Tab name="Items">
                    <Posts posts={items} render={'items'} currentThing={thing} {...props} key="items" tabView={Tabs} />
                  </Tabs.Tab> : null}    

Same thing, so I tried this:

                  {[].length > 0 ? <Tabs.Tab name="Items">
                    <Posts posts={items} render={'items'} currentThing={thing} {...props} key="items" tabView={Tabs} />
                  </Tabs.Tab> : <Tabs.Tab />}    

And this doesn't spit out an error, so it seems as though Container can't handle null children right now. If it's not a Tabs.Tab component, it doesn't like it.

Expected behaviour

Instead of rejecting the missing component, it should gracefully ignore any unrendered components.

For what it's worth, spits out a Tab, just with the name UNDEFINED. I don't think that's relevant here, but at least it gracefully survives.

nica0012 commented 11 months ago

Is there a fix to a null tab that does not break the tab memory?