Is there a Ionicons: Icon props?

Question

So I am writing a functional component right, I written a props.
So I wanted it to able to auto suggest name attributes. Something like this

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

export interface ownWrittenProps {
  leftIcon?: ????????;
}

so when people start typing <FunctionalComponent leftIcon=" it can suggest the acceptable icon names from Ionicons the reason I want to use it because it pack into the ios/apk package anyway. What should I put in ???????? so that it can suggest the name?

Another question, if I have a textbox in my ChildComponent how do I retrieve the text/value from parent?

Answer 1

@expo-vector-icons exposes a glyphMap for each icon type. You can use this to generate the name suggestions.

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

export interface ownWrittenProps {
  leftIcon?: keyof typeof Ionicons.glyphMap;
}

This will create a type from the map, then make sure that only keys of that type can be used when setting leftIcon.

Answer 2

If suggestions didn't work you can directly find icon name from Ionicons official website and use it like a component.

Example:

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

<Ionicons name="add-outline" size={24} color="black" />

or

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

export interface ownWrittenProps {
  leftIcon?: "add-outline";
}