I have a custom component that looks like this:
import Icon from 'react-native-vector-icons/FontAwesome';export const FieldInput: React.FunctionComponent<FieldInputProps> = ({ handleChange, handleBlur, fieldType, placeholderText, value, hidePassword, hidePasswordIcon, togglePassword, icon,}) => { return (<Item><Icon name={icon} /><Input autoFocus={true} autoCapitalize="none" placeholder={placeholderText} keyboardType="default" onChangeText={handleChange(fieldType)} onBlur={handleBlur(fieldType)} value={value} secureTextEntry={hidePassword} /> {togglePassword ? (<Icon name={hidePasswordIcon} onPress={togglePassword} style={commonStyles.iconStyle} size={moderateScale(20)} color="green" /> ) : null}</Item> );};
<FieldInput style={styles.fieldInput} handleChange={handleChange} handleBlur={handleBlur} value={values.phoneNumber} fieldType="phoneNumber" icon="phone" placeholderText="49152901820" />
Although it functions correctly, I keep getting overloading errors on name
from the Icon
.
No overload matches this call. Overload 1 of 2, '(props: Readonly<IconProps>): Icon', gave the following error. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Overload 2 of 2, '(props: IconProps, context?: any): Icon', gave the following error. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2769)Icon.d.ts(26, 3): The expected type comes from property 'name' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Icon> & Readonly<IconProps> & Readonly<{ children?: ReactNode; }>'
How can I fix this? I couldn't find a list/documentation to check the acceptable properties of font awesome icons.