Integration with @expo/vector-icons

[ts-candide]

Expo has a large number of vector icons available for use: https://docs.expo.dev/guides/icons/#expovector-icons

Is there a way to integrate this with Gluestack UI? I'm thinking specifically of using the Gluestack Icon component with Expo vector icons.

[akash3gtm]

Hi @ts-candide ,
You can use expo/vector-icons like this with our Icon component

import { Icon } from '@gluestack-ui/themed';
import { MaterialIcons } from '@expo/vector-icons';

<Icon as={MaterialIcons} size="xl" name="delete" color='$blue800'/>

[ts-candide]

Thank you, this is working nicely.

One thing to note here, the types don't quite work correctly. TypeScript complains about the name prop:

Property 'name' does not exist on type 'IntrinsicAttributes & Omit<Omit<Omit<Omit<Omit<RNProps & { as?: any; }, never> & Partial<ComponentProps<false | ViewStyle | RegisteredStyle<ViewStyle> | ... 8 more ... | undefined, unknown, RNProps & { ...; }, "BaseIcon">> & Partial<...> & { ...; }, "animationComponentGluestack"> & RefAttributes<...>, never> & Parti...'.

Is there anything that can be done to fix this?