feat: added prop withMark to tabView

assets/icons/mark-to-up.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1.7074L4.29293 5.00033C4.68182 5.38921 5.31818 5.38921 5.70707 5.00033L9 1.7074" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/HorizontalTabView/index.tsx

@@ -1,30 +1,39 @@
 import React from 'react';
-import { View, Text } from 'react-native';
-import { TabView, TabBar, Route } from 'react-native-tab-view';
+import { Text, View } from 'react-native';
+import { Route, TabBar, TabView } from 'react-native-tab-view';
 
 import { styles } from './styles';
 import { Colors } from 'src/theme';
 
+import MarkToUpIcon from '../../../assets/icons/mark-to-up.svg';
+
 export const HorizontalTabView = ({
   index,
   setIndex,
   routes,
-  renderScene
+  renderScene,
+  withMark
 }: {
   index: number;
   setIndex: React.Dispatch<React.SetStateAction<number>>;
   routes: Route[];
   renderScene: (props: any) => React.ReactNode;
+  withMark?: boolean;
 }) => {
-
   const renderTabBar = (props: any) => (
     <TabBar
       {...props}
       renderLabel={({ route, focused }) => (
         <View style={[styles.tabLabelContainer, focused ? styles.tabLabelFocused : null]}>
-          <Text style={[styles.label, focused ? styles.labelFocused : null]}>
-            {route.title}
-          </Text>
+          <Text style={[styles.label, focused ? styles.labelFocused : null]}>{route.title}</Text>
+          {withMark ? (
+            <MarkToUpIcon
+              height={16}
+              width={16}
+              style={styles.icon}
+              stroke={focused ? Colors.WHITE : Colors.DARK_BLUE}
+            />
+          ) : null}
         </View>
       )}
       scrollEnabled={true}

src/components/HorizontalTabView/styles.tsx

@@ -23,7 +23,10 @@ export const styles = StyleSheet.create({
     paddingVertical: 10,
     backgroundColor: 'transparent',
     borderColor: 'rgba(15, 63, 79, 0.3)',
-    borderWidth: 1
+    borderWidth: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 5
   },
   tabLabelFocused: {
     backgroundColor: Colors.ORANGE,
@@ -40,5 +43,9 @@ export const styles = StyleSheet.create({
   },
   indicator: {
     height: 0
+  },
+  icon: {
+    display: 'flex',
+    alignSelf: 'center'
   }
 });

src/screens/InAppScreens/TravellersScreen/UNMasters/styles.ts

@@ -32,12 +32,5 @@ export const UNMastersListStyles = StyleSheet.create({
     borderRadius: 20 / 2,
     borderWidth: 0.5,
     borderColor: 'gray'
-  },
-  sortButton: {
-    paddingTop: 20,
-    paddingBottom: 20,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center'
   }
 });