Added autocomplete for icon names

kanzitelli · May 5, 2023 · 4abbb6f · 4abbb6f
1 parent 11df297
commit 4abbb6f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
@@ -3,8 +3,10 @@ import {View, Colors, ViewProps} from 'react-native-ui-lib';
 import {Ionicons} from '@expo/vector-icons';
 import {Bounceable} from 'rn-bounceable';
 
+export type IconName = keyof typeof Ionicons.glyphMap;
+
 type IconProps = {
-  name: string;
+  name: IconName;
   size?: number;
   color?: string;
   viewProps?: ViewProps;
@@ -26,7 +28,7 @@ export const Icon: React.FC<IconProps> = ({
   const Icon = useMemo(
     () => (
       <View {...viewProps}>
-        <IconComponent name={name as any} size={size} color={color} />
+        <IconComponent name={name} size={size} color={color} />
       </View>
     ),
     [viewProps, name, size, color],

diff --git a/src/utils/designSystem.tsx b/src/utils/designSystem.tsx
@@ -7,7 +7,7 @@ import {Appearance as RNAppearance, Platform} from 'react-native';
 import {Colors, Typography} from 'react-native-ui-lib';
 
 import {stores} from '@app/stores';
-import {Icon} from '@app/components/icon';
+import {Icon, IconName} from '@app/components/icon';
 import {Appearance} from '@app/utils/types/enums';
 
 // =============
@@ -164,7 +164,7 @@ export const getTabBarIcon =
   ({focused, color, size}: {focused: boolean; color: string; size: number}) =>
     <Icon name={getTabIconName(tabName, focused)} size={size} color={color} />;
 
-const getTabIconName = (tabName: string, focused: boolean): string => {
+const getTabIconName = (tabName: string, focused: boolean): IconName => {
   if (tabName === 'MainTab') {
     return focused ? 'home' : 'home-outline';
   }