@momo-kits/tab-view 0.89.4 → 0.89.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/tab-view",
-    "version": "0.89.4",
+    "version": "0.89.6",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/tabBar/CardTabBar.tsx

@@ -4,7 +4,7 @@ import {TabBarProps} from '../types';
 import styles from '../styles';
 import {
   ApplicationContext,
-  Image,
+  Icon,
   Radius,
   Shadow,
   Spacing,
@@ -62,8 +62,8 @@ const CardTabBar: FC<TabBarProps> = ({
             },
           ]}>
           {!!tabs[selectedIndex]?.icon && (
-            <Image
-              source={{uri: tabs[selectedIndex]?.icon}}
+            <Icon
+              source={tabs[selectedIndex]?.icon}
               style={[styles.icon, {marginRight: Spacing.XS}]}
             />
           )}

package/tabItem/CardTabItem.tsx

@@ -1,20 +1,29 @@
-import React, {FC} from 'react';
+import React, {FC, useContext} from 'react';
 import {TouchableOpacity} from 'react-native';
 import {TabItemProps} from '../types';
 import styles from '../styles';
-import {Image, Spacing, Text} from '@momo-kits/foundation';
+import {ApplicationContext, Icon, Spacing, Text} from '@momo-kits/foundation';
 
-const CardTabItem: FC<TabItemProps> = ({tab, onPressTabItem, width}) => {
+const CardTabItem: FC<TabItemProps> = ({
+  tab,
+  active,
+  onPressTabItem,
+  width,
+}) => {
   const {title, icon} = tab;
+  const {theme} = useContext(ApplicationContext);
+  const color = active ? theme.colors.primary : theme.colors.text.default;
+  const tintColor = icon?.includes('http') ? null : color;
 
   return (
     <TouchableOpacity
       onPress={onPressTabItem}
       style={[styles.cardTabItem, {width}]}>
       {!!icon && (
-        <Image
-          source={{uri: icon}}
+        <Icon
+          color={tintColor}
           style={[styles.icon, {marginRight: Spacing.XS}]}
+          source={icon}
         />
       )}
       <Text

package/tabItem/TabItem.tsx

@@ -5,7 +5,7 @@ import {TabItemProps} from '../types';
 import {
   ApplicationContext,
   BadgeDot,
-  Image,
+  Icon,
   Spacing,
   Text,
   Typography,
@@ -25,6 +25,7 @@ const TabItem: FC<TabItemProps> = ({tab, active, onPressTabItem, width}) => {
     ? 'header_s_semibold'
     : 'body_default_regular';
   const color = active ? theme.colors.primary : theme.colors.text.default;
+  const tintColor = icon?.includes('http') ? null : color;
   const dotStyle = dotSize === 'large' ? styles.dot : styles.dotSmall;
   const iconStyle: ViewStyle =
     direction === 'row'
@@ -38,9 +39,10 @@ const TabItem: FC<TabItemProps> = ({tab, active, onPressTabItem, width}) => {
       {!!icon && (
         <View>
           {showDot && <BadgeDot style={dotStyle} size={dotSize} />}
-          <Image
+          <Icon
+            color={tintColor}
             style={[styles.icon, iconStyle as ImageStyle]}
-            source={{uri: icon}}
+            source={icon}
           />
         </View>
       )}