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 namefrom 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.