Missing types typescript

[RonJonesTalitrix]

Hello,
I am working in an existing React Native project and trying to implement 'react-native-credit-card-input-plus".
I have followed every step in the readme however I am getting the following error on the import statement

Could not find a declaration file for module 'react-native-credit-card-input-plus'. '/Users/ronjones/talitrix-cms/node_modules/react-native-credit-card-input-plus/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react-native-credit-card-input-plus if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-credit-card-input-plus';

I have tried creating an index.d.ts file and placing the declare module there which removes the error but then fails on run with the following error

Unable to resolve module AccessibilityInfo from /Users/ronjones/talitrix-cms/node_modules/react-native-credit-card-input-plus/node_modules/react-native/Libraries/react-native/react-native-implementation.js: AccessibilityInfo could not be found within the project or in these directories:
node_modules/react-native-credit-card-input-plus/node_modules
node_modules

Any help would be greatly appreciated as I am new to react native

[RonJonesTalitrix]

Is there any timeline on this? Just seeing when I may be able to release with this feature

[juandl]

@RonJonesTalitrix hopefully this week

[RonJonesTalitrix]

@juandl ok awesome, thank you so much

[thedentor]

Hey @juandl Any update regarding what was commented by @RonJonesTalitrix

[CommanderAlchemy]

I have played a bit just by looking at the docs and outputs bit quick, seems to work but I havent fully tested it so don't take this as complete.

declare module 'react-native-credit-card-input-plus' {
    import { StyleProp, ViewStyle, TextStyle } from 'react-native';

    enum Status {
        Incomplete = "incomplete",
        Valid = "valid",
        Invalid = "invalid",
    }
    
    interface CreditCard {
        number:string,
        cvc: number,
        expiry:string,
        type:string
    }
    
    interface CreditCardFormData {
        status: {
            cvc: Status;
            expiry: Status;
            number: Status;
        };
        valid: boolean;
        values: CreditCard
    }
    
    interface Labels {
        number: string;
        expiry: string;
        cvc: string;
    }

    interface Placeholders {
        number: string;
        expiry: string;
        cvc: string;
    }
    
    interface CustomIcons {
        [key: string]: any; // Replace any with the type of your image import e.g. ImageSourcePropType
    }
    
    interface CardViewProps {
        focused?: string;
        clickable?: boolean;
        brand?: string;
        name?: string;
        number?: string;
        expiry?: string;
        cvc?: string;
        placeholder?: Placeholders;
        scale?: number;
        fontFamily?: string;
        imageFront?: number;
        imageBack?: number;
        customIcons?: CustomIcons;
    }

    interface CreditCardInputProps {
        autoFocus?: boolean;
        onChange?: (data: CreditCardFormData) => void;
        onFocus?: (name: string) => void;
        labels?: Labels;
        placeholders?: Placeholders;
        cardScale?: number;
        cardFontFamily?: string;
        cardImageFront?: number;
        cardImageBack?: number;
        labelStyle?: StyleProp<TextStyle>;
        inputStyle?: StyleProp<TextStyle>;
        inputContainerStyle?: StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
        validColor?: string;
        invalidColor?: string;
        placeholderColor?: string;
        requiresName?: boolean;
        requiresCVC?: boolean;
        requiresPostalCode?: boolean;
        validatePostalCode?: (value: string) => Status;
        allowScroll?: boolean;
        horizontalScroll?: boolean;
        cardBrandIcons?: CustomIcons;
        additionalInputsProps?: { [key: string]: StyleProp<TextStyle> };
    }
    
    interface LiteCardInputProps {
        autoFocus?: boolean;
        onChange?: (data: CreditCardFormData) => void;
        onFocus?: (name: string) => void;
        placeholders?: Placeholders;
        inputStyle?: StyleProp<TextStyle>;
        validColor?: string;
        invalidColor?: string;
        placeholderColor?: string;
        additionalInputsProps?: { [key: string]: StyleProp<TextStyle> };
    }

    export const CreditCardInput: React.FC<CreditCardInputProps>;
    export const CardView: React.FC<CardViewProps>;
    export const LiteCreditCardInput: React.FC<LiteCardInputProps>;
}`

[juandl]

Issues solved , open a separated issue for types