fix: prevent typescript error for conditional tabs

example/src/App.tsx

@@ -15,6 +15,7 @@ import {
 import AndroidSharedPullToRefresh from './AndroidSharedPullToRefresh'
 import AnimatedHeader from './AnimatedHeader'
 import CenteredEmptyList from './CenteredEmptyList'
+import ConditionalTabs from './ConditionalTabs'
 import Default from './Default'
 import DefaultCustomLabels from './DefaultCustomLabels'
 import DynamicTabs from './DynamicTabs'
@@ -49,6 +50,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   Ref,
   OnTabChange,
   DynamicTabs,
+  ConditionalTabs,
   MinHeaderHeight,
   AnimatedHeader,
   AndroidSharedPullToRefresh,

example/src/ConditionalTabs.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { TouchableOpacity } from 'react-native-gesture-handler'
+
+import { TabBarProps } from '../../src/types'
+import ExampleComponent from './Shared/ExampleComponent'
+import { ExampleComponentType } from './types'
+
+const title = 'Conditional Tabs'
+
+const HEADER_HEIGHT = 200
+
+const NewHeader: React.FC<
+  TabBarProps & {
+    setHideArticleTab: React.Dispatch<React.SetStateAction<boolean>>
+  }
+> = (props) => {
+  return (
+    <View pointerEvents="box-none" style={styles.headerView}>
+      <TouchableOpacity
+        onPress={() => props.setHideArticleTab((prev) => !prev)}
+      >
+        <Text>Toggle articles tab</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const DefaultExample: ExampleComponentType = () => {
+  const [hideArticleTab, setHideArticleTab] = useState(false)
+  return (
+    <ExampleComponent
+      renderHeader={(props) => (
+        <NewHeader setHideArticleTab={setHideArticleTab} {...props} />
+      )}
+      headerHeight={HEADER_HEIGHT}
+      hideArticleTab={hideArticleTab}
+    />
+  )
+}
+
+DefaultExample.title = title
+
+export default DefaultExample
+
+const styles = StyleSheet.create({
+  headerView: {
+    height: HEADER_HEIGHT,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

example/src/Shared/ExampleComponent.tsx

@@ -13,15 +13,18 @@ import SectionContacts from './SectionContacts'
 
 type Props = {
   emptyContacts?: boolean
+  hideArticleTab?: boolean
 } & Partial<CollapsibleProps>
 
 const Example = React.forwardRef<CollapsibleRef, Props>(
   ({ emptyContacts, ...props }, ref) => {
     return (
       <Tabs.Container ref={ref} headerHeight={HEADER_HEIGHT} {...props}>
-        <Tabs.Tab name="article" label="Article">
-          <Article />
-        </Tabs.Tab>
+        {props.hideArticleTab ? (
+          <Tabs.Tab name="article" label="Article">
+            <Article />
+          </Tabs.Tab>
+        ) : null}
         <Tabs.Tab name="albums" label="Albums">
           <Albums />
         </Tabs.Tab>

src/hooks.tsx

@@ -69,7 +69,7 @@ export function useTabProps<T extends TabName>(
     const tabOptions: TabsWithProps<T> = new Map()
     if (children) {
       Children.forEach(children, (element, index) => {
-        if (!element || !element.props) return
+        if (!element) return
 
         if (element.type !== tabType)
           throw new Error(

src/types.ts

@@ -58,9 +58,9 @@ export type OnTabChangeCallback<T extends TabName = TabName> = (
   data: IndexChangeEventData<T>
 ) => void
 
-export type TabReactElement<
-  T extends TabName = TabName
-> = React.ReactElement<TabProps<T> | null>
+export type TabReactElement<T extends TabName = TabName> = React.ReactElement<
+  TabProps<T>
+> | null
 
 export type CollapsibleProps = {
   initialTabName?: TabName