Enhance SearchBar and SegmentedTopBar components with conditional rendering and count display

src/components/SearchBar.jsx

@@ -137,7 +137,7 @@ export const SearchBar = ({
             }}
             {...searchbarProps}
           />
-          {showCancelButton && (
+          {showCancelButton && searchText.length > 0 && (
             <Container>
               <Touchable
                 flexGrow={1}

src/components/SegmentedTopBar/Tab.jsx

@@ -2,30 +2,51 @@ import React, { forwardRef, useCallback } from "react";
 import { View } from "react-native";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 
 import { Typography, Touchable } from "@components";
 
-export const Tab = forwardRef(({ label, value, navigation, flex }, ref) => {
-  const handleOnPress = useCallback(
-    () => navigation.navigate(value),
-    [navigation, value]
-  );
+export const Tab = forwardRef(
+  ({ label, value, navigation, flex, count }, ref) => {
+    const handleOnPress = useCallback(
+      () => navigation.navigate(value),
+      [navigation, value]
+    );
 
-  return (
-    <View ref={ref} style={{ flex }}>
-      <Touchable flex={1} justifyContent="center" onPress={handleOnPress}>
-        <Typography
-          fontFamily="sf500"
-          fontSize="xs"
-          numberOfLines={1}
-          textAlign="center"
+    return (
+      <View
+        ref={ref}
+        style={{ flex, minWidth: count !== undefined && moderateScale(56) }}
+      >
+        <Touchable
+          alignItems="center"
+          flex={1}
+          justifyContent="center"
+          onPress={handleOnPress}
         >
-          {label}
-        </Typography>
-      </Touchable>
-    </View>
-  );
-});
+          <Typography
+            fontFamily="sf600"
+            fontSize="xs"
+            numberOfLines={1}
+            textAlign="center"
+          >
+            {label}
+          </Typography>
+          {count !== undefined && (
+            <Typography
+              fontFamily="sf500"
+              fontSize="xs"
+              numberOfLines={1}
+              textAlign="center"
+            >
+              ({count})
+            </Typography>
+          )}
+        </Touchable>
+      </View>
+    );
+  }
+);
 
 Tab.displayName = "Tab";
 
@@ -34,4 +55,5 @@ Tab.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   navigation: PropTypes.object,
+  count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };

src/components/SegmentedTopBar/index.jsx

@@ -42,11 +42,13 @@ import { Tab } from "./Tab";
  *        <Tab.Screen
  *          name="Home"
  *          component={HomeScreen}
+ *          options={{ count: 8 }}
  *        />
  *
  *        <Tab.Screen
  *          name="Settings"
  *          component={SettingsScreen}
+ *          options={{ count: 10 }}
  *        />
  *      </Tab.Navigator>
  *    </NavigationContainer>
@@ -70,10 +72,11 @@ export const SegmentedTopBar = ({
       routes.map(({ key, name }) => {
         const { options } = descriptors[key];
         const label = options.tabBarLabel ?? options.title ?? name;
+        const count = options.count;
 
-        return { label, value: name, ref: createRef() };
+        return { label, value: name, ref: createRef(), count };
       }),
-    []
+    [descriptors, routes]
   );
 
   useLayoutEffect(() => {
@@ -93,8 +96,9 @@ export const SegmentedTopBar = ({
   return (
     <View height={height} ref={containerRef} style={styles.container}>
       {measures.length > 0 && <Indicator measure={measures[index]} />}
-      {tabsData.map(({ label, value, ref }) => (
+      {tabsData.map(({ label, value, ref, count }) => (
         <Tab
+          count={count}
           flex={tabsData.length > 3 ? label.length : 1}
           key={value}
           label={label}
@@ -124,5 +128,5 @@ SegmentedTopBar.propTypes = {
 
 SegmentedTopBar.defaultProps = {
   tabs: [],
-  height: moderateScale(36),
+  height: moderateScale(48),
 };