Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

react native vector icon name property

$
0
0

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.


Viewing all articles
Browse latest Browse all 6212

Trending Articles