Merge pull request #1185 from smart-village-solutions/fix/SVASD-6-fix…

…-tabler-icon-problem-on-android

fix(tabler): icon problem on android

package.json

@@ -131,7 +131,8 @@
     "react-native-web": "~0.19.10",
     "react-native-webview": "13.8.6",
     "react-query": "^3.34.14",
-    "styled-components": "~4.4.1"
+    "styled-components": "~4.4.1",
+    "tabler-icons-react-native": "^3.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/config/icons/Icon.tsx → src/config/Icon.tsx

@@ -1,6 +1,9 @@
+import _camelCase from 'lodash/camelCase';
+import _upperFirst from 'lodash/upperFirst';
 import React, { ComponentProps } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 import { SvgXml } from 'react-native-svg';
+import * as Tabler from 'tabler-icons-react-native';
 
 import {
   addImage,
@@ -42,6 +45,7 @@ import {
   send,
   service,
   share,
+  sueBroom,
   sueCheckSmall,
   sueClock,
   sueClockSmall,
@@ -55,13 +59,11 @@ import {
   verifiedBadge,
   visible,
   voucher
-} from '../../icons';
-import { sueBroom } from '../../icons/SUE/broom';
+} from '../icons';
 
-import { colors } from './../colors';
-import { device } from './../device';
-import { normalize } from './../normalize';
-import { Tabler } from './Tabler';
+import { colors } from './colors';
+import { device } from './device';
+import { normalize } from './normalize';
 
 export type IconProps = {
   accessibilityLabel?: string;
@@ -110,17 +112,32 @@ const SvgIcon = ({
   );
 };
 
+type TablerIconName = keyof typeof Tabler;
+
 const NamedIcon = ({
   accessibilityLabel,
   color = colors.primary,
   iconStyle,
   name,
+  stroke = 1,
   size = normalize(26),
   style
-}: IconProps & { name?: ComponentProps<typeof IconSet>['name'] }) => {
+}: IconProps & {
+  name: ComponentProps<typeof IconSet>['name'];
+  stroke?: number;
+}) => {
+  let IconComponent: any;
+
+  if (IconSet === Tabler) {
+    const TablerName = ('Icon' + _upperFirst(_camelCase(name))) as TablerIconName;
+    IconComponent = Tabler?.[TablerName] || Tabler['IconQuestionMark'];
+  } else {
+    IconComponent = IconSet;
+  }
+
   return (
     <View accessibilityLabel={accessibilityLabel} style={style} hitSlop={getHitSlops(size)}>
-      <IconSet name={name} size={size} color={color} style={iconStyle} />
+      <IconComponent name={name} size={size} color={color} style={iconStyle} stroke={stroke} />
     </View>
   );
 };

src/config/fonts.ts

@@ -4,6 +4,5 @@ export const fontConfig = {
   regular: require('../../assets/fonts/TitilliumWeb-Regular.ttf'),
   italic: require('../../assets/fonts/TitilliumWeb-Italic.ttf'),
   light: require('../../assets/fonts/TitilliumWeb-Light.ttf'),
-  'light-italic': require('../../assets/fonts/TitilliumWeb-LightItalic.ttf'),
-  'tabler-icons': require('../../assets/tabler-icons/2.47.0/tabler-icons.ttf')
+  'light-italic': require('../../assets/fonts/TitilliumWeb-LightItalic.ttf')
 };

src/config/index.js

@@ -1,11 +1,11 @@
 export * from './appDesignSystem';
-export * from './icons';
 export * from './sue';
 
 export * from './colors';
 export * from './consts';
 export * from './device';
 export * from './fonts';
+export * from './Icon';
 export * from './namespace';
 export * from './normalize';
 export * from './secrets';

src/config/navigation/tabConfig.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { OrientationAwareIcon } from '../../components';
 import { ScreenName, TabConfig, TabNavigatorConfig } from '../../types';
 import { colors } from '../colors';
-import { Icon } from '../icons';
+import { Icon } from '../Icon';
 import { normalize } from '../normalize';
 import { texts } from '../texts';
 

src/icons/SUE/index.js

@@ -1,3 +1,4 @@
+export * from './broom';
 export * from './checkSmall';
 export * from './clock';
 export * from './clockSmall';

yarn.lock

@@ -11582,6 +11582,11 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+tabler-icons-react-native@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tabler-icons-react-native/-/tabler-icons-react-native-3.1.0.tgz#f3e42052a7509c6a6729ba8b6bbdc8a5c52a8dea"
+  integrity sha512-HHepAnE31cc1b3jEVIE37BBhL+wF78hqegwIpMgwzvjBuTrzQkHIyf0UTllG9iSpgSqNwbF/9KGmg4sHgS/16g==
+
 tar@^6.0.5:
   version "6.1.15"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.15.tgz#c9738b0b98845a3b344d334b8fa3041aaba53a69"