fix: fix #49

web-ridge · Aug 1, 2023 · 4ada7bb · 4ada7bb
1 parent 4cc25eb
commit 4ada7bb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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}