React Native - expo/vector-icons typescript type definition for icon name

Question

I'm trying to find out the type definitions for the icon name of expo/vector-icons , since I am intending to use it for a component props.

I am import expo/vector-icons like and and defining interface props like this, I tried type icon name as string.

import Icon from "@expo/vector-icons/FontAwesome"

interface Props {
    icon: string
    value: string
    placeholder: string
    onChangeText: (text: string) => void
    secureTextEntry?: boolean
    style: StyleProp<ViewStyle>
}

This is how I am using the prop.

<Icon name={icon} size={20} style={styles.icon} />

But I get error from Typescript.

Answer 1

you have to change the type of your icon Props,

import { Ionicons } from '@expo/vector-icons';

and use glyphMap property from Ionicons, just like this

icon: keyof typeof Ionicons.glyphMap