Conditional Nested Navigator gives error "A navigator can only contain a 'Screen', 'Group' or 'React.Fragment' as its direct children (found '')

Question

I have a 'shows' screen which has a list of shows, clicking goes to a show detail page. On the detail page, it has 3 tabs, but one is hidden if feedurl is blank. This throws an error when navigating to various shows that have feedurl's and then don't have feedsurls:

Error: A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found ''). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.

I am guessing that you can't have conditional tab rendering?

     <ShowTab.Navigator
        screenOptions={{
          tabBarActiveTintColor: 'white',
          tabBarInactiveTintColor: '#4b7894',
          tabBarLabelStyle: {
            fontWeight: '600',
          },
          tabBarIndicatorStyle: {
            backgroundColor: 'white',
            height: 4,
          },
          tabBarStyle: {
            backgroundColor: '#021f2e',
          },
        }}>
        <ShowTab.Screen name="About">
          {() => <ShowInfo show={show} />}
        </ShowTab.Screen>
        <ShowTab.Screen name="Schedule">
          {() => <ShowSchedule show={show} />}
        </ShowTab.Screen>

        {show.feedurl && (
          <ShowTab.Screen name="Podcasts">
            {() => <ShowPodcasts show={show} />}
          </ShowTab.Screen>
        )}
        
      </ShowTab.Navigator>

Answer 1

I am not sure why it wasn't working, but I changed it to

{ show.feedurl != '' && (

and now it's working, I'd love to know why it doesn't work.