From 4ada7bbdf2ca308c5078619ca233f0108b28a651 Mon Sep 17 00:00:00 2001
From: Richard Lindhout <richardlindhout96@gmail.com>
Date: Tue, 1 Aug 2023 23:57:45 +0200
Subject: [PATCH] fix: fix #49

---
 example/src/App.tsx   | 22 ++++++++++++++++------
 src/Swiper.native.tsx |  2 +-
 src/TabsHeader.tsx    |  6 ++++--
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 285a6a1..d87f9ab 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -41,6 +41,7 @@ function App({
   const [backgroundColor, setBackgroundColor] = React.useState<
     string | undefined
   >(undefined);
+  const [showFlightTab, setShowFlightTab] = React.useState<boolean>(true);
   const [uppercase, setUppercase] = React.useState<boolean>(true);
   const [showIcons, setShowIcons] = React.useState<boolean>(true);
   const [showText, setShowText] = React.useState<boolean>(true);
@@ -140,12 +141,14 @@ function App({
                 >
                   <ExploreWitHookExamples />
                 </TabScreen>
-                <TabScreen
-                  label="Flights"
-                  icon={showIcons ? 'airplane' : undefined}
-                >
-                  <ScreenWithText text={'Flights'} />
-                </TabScreen>
+                {showFlightTab && (
+                  <TabScreen
+                    label="Flights"
+                    icon={showIcons ? 'airplane' : undefined}
+                  >
+                    <ScreenWithText text={'Flights'} />
+                  </TabScreen>
+                )}
                 <TabScreen
                   label="Trips"
                   icon={showIcons ? 'bag-personal' : undefined}
@@ -247,6 +250,13 @@ function App({
               onValueChange={(v) => setShowBadges(v)}
             />
           </Row>
+          <Row>
+            <Label>Show flights tabs</Label>
+            <Switch
+              value={showFlightTab}
+              onValueChange={(v) => setShowFlightTab(v)}
+            />
+          </Row>
           <Row>
             <Title>Icon position</Title>
           </Row>
diff --git a/src/Swiper.native.tsx b/src/Swiper.native.tsx
index 9be19af..207eb96 100644
--- a/src/Swiper.native.tsx
+++ b/src/Swiper.native.tsx
@@ -100,7 +100,7 @@ function SwiperNative(props: SwiperProps) {
           }
         )}
       >
-        {React.Children.map(children, (tab, tabIndex) => (
+        {React.Children.map(children.filter(Boolean), (tab, tabIndex) => (
           <View style={styles.viewPager} key={tab.props.label || tabIndex}>
             {tab}
           </View>
diff --git a/src/TabsHeader.tsx b/src/TabsHeader.tsx
index bd86373..4b826ec 100644
--- a/src/TabsHeader.tsx
+++ b/src/TabsHeader.tsx
@@ -60,7 +60,9 @@ export default function TabsHeader({
   }
 
   const textColorV2 = isDark ? '#fff' : '#000';
-  const activeColorV2 = hasPrimaryBackground ? textColor : theme.colors.primary;
+  const activeColorV2 = hasPrimaryBackground
+    ? textColorV2
+    : theme.colors.primary;
 
   // Color (active)	On surface	md.sys.color.on-surface
   // Color (inactive)	On surface variant	md.sys.color.on-surface-variant
@@ -192,7 +194,7 @@ export default function TabsHeader({
             <View style={styles.scrollablePadding} />
           ) : null}
 
-          {React.Children.map(children, (tab, tabIndex) => (
+          {React.Children.map(children.filter(Boolean), (tab, tabIndex) => (
             <TabsHeaderItem
               theme={theme}
               tabIndex={tabIndex}