Update tsconfig to allow build and autoComplete

src/Frames.tsx

@@ -1,39 +1,40 @@
-import React, { useEffect } from "react";
-import { View, StyleSheet } from "react-native";
+import React, { useEffect, useReducer } from "react";
+import { View, StyleSheet, ImageSourcePropType } from "react-native";
 import { framesReducer } from "./utils/reducer";
 import {
   FramesContextType,
   FramesProps,
   FramesState,
-  FramesDispatch,
+  FrameCardTokenizationFailedEvent,
 } from "./types/types";
 import { log } from "./utils/logger";
 import { tokenize, formatDataForTokenization } from "./utils/http";
 
 export const FramesContext = React.createContext({} as FramesContextType);
 
+const initialState: FramesState = {
+  cardNumber: "",
+  cardBin: {
+    bin: "",
+    scheme: "",
+  },
+  cardType: "",
+  cardIcon: null as unknown as ImageSourcePropType,
+  expiryDate: "",
+  cvv: "",
+  cvvLength: 3,
+  validation: {
+    cardNumber: false,
+    expiryDate: false,
+    cvv: false,
+    card: false,
+  },
+};
+
 const Frames = (props: FramesProps) => {
-  // @ts-ignore
-  const [state, dispatch]: [FramesState, FramesDispatch] = React.useReducer(
+  const [state, dispatch] = useReducer<typeof framesReducer>(
     framesReducer,
-    {
-      cardNumber: null,
-      cardBin: {
-        bin: null,
-        scheme: null,
-      },
-      cardType: null,
-      cardIcon: undefined,
-      expiryDate: null,
-      cvv: null,
-      cvvLength: 3,
-      validation: {
-        cardNumber: false,
-        expiryDate: false,
-        cvv: false,
-        card: false,
-      },
-    }
+    initialState
   );
 
   const submitCard = async () => {
@@ -43,7 +44,7 @@ const Frames = (props: FramesProps) => {
         "com.checkout.frames-mobile-sdk.token_requested",
         props.config
       );
-      let response = await tokenize(
+      const response = await tokenize(
         formatDataForTokenization(state, props.config)
       );
       if (props.config.debug)
@@ -57,12 +58,14 @@ const Frames = (props: FramesProps) => {
     } catch (error) {
       if (props.config.debug)
         console.info(`Emitting "cardTokenizationFailed"`, error);
-      if (props.cardTokenizationFailed) props.cardTokenizationFailed(error);
+      if (props.cardTokenizationFailed && error instanceof Object) {
+        props.cardTokenizationFailed(error as FrameCardTokenizationFailedEvent);
+      }
       log(
         "error",
         "com.checkout.frames-mobile-sdk.exception",
         props.config,
-        error
+        error as object
       );
     }
   };

src/components/CardNumber.tsx

@@ -16,7 +16,7 @@ const CardNumber: React.FC<FramesCardFieldProps> = (props) => {
         return (
           <View style={styles.wrapper}>
             <TextInput
-              autoCompleteType="cc-number"
+              autoComplete="cc-number"
               keyboardType="number-pad"
               returnKeyType="done"
               placeholder={DEFAULT_CARD_NUMBER_PLACEHOLDER}

src/components/Cvv.tsx

@@ -6,7 +6,7 @@ import { DEFAULT_CVV_PLACEHOLDER } from "../utils/constants";
 import { CVV_CHANGE } from "../utils/actions";
 import { FramesFieldProps } from "../types/types";
 
-const Cvv: React.SFC<FramesFieldProps> = (props) => {
+const Cvv: React.FC<FramesFieldProps> = (props) => {
   return (
     <FramesConsumer>
       {({ state, dispatch }) => {
@@ -15,7 +15,7 @@ const Cvv: React.SFC<FramesFieldProps> = (props) => {
         }
         return (
           <TextInput
-            autoCompleteType="cc-csc"
+            autoComplete="cc-csc"
             keyboardType="number-pad"
             returnKeyType="done"
             secureTextEntry={true}

src/components/ExpiryDate.tsx

@@ -6,7 +6,7 @@ import { DEFAULT_CARD_EXPIRY_DATE_PLACEHOLDER } from "../utils/constants";
 import { DATE_CHANGE } from "../utils/actions";
 import { FramesFieldProps } from "../types/types";
 
-const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
+const ExpiryDate: React.FC<FramesFieldProps> = (props) => {
   return (
     <FramesConsumer>
       {({ state, dispatch }) => {
@@ -15,7 +15,7 @@ const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
         }
         return (
           <TextInput
-            autoCompleteType="cc-exp"
+            autoComplete="cc-exp"
             keyboardType="number-pad"
             maxLength={5}
             returnKeyType="done"

tsconfig.json

@@ -1,35 +1,30 @@
 {
-    "compilerOptions": {
-      "target": "es5",
-      "lib": [
-        "esnext"
-      ],
-      "jsx": "react-native",
-      "types": ["react", "jest"],
-      "allowJs": true,
-      "esModuleInterop": true,
-      "allowSyntheticDefaultImports": true,
-      "strict": true,
-      "forceConsistentCasingInFileNames": true,
-      "module": "esnext",
-      "moduleResolution": "node",
-      "resolveJsonModule": true,
-      "isolatedModules": true,
-      "noEmit": false,
-      "outDir": "./dist",
-      "sourceMap": true,
-      "noImplicitReturns": true,
-      "suppressImplicitAnyIndexErrors": true,
-      "noUnusedLocals": true,
-      "declaration": true,
-      "noFallthroughCasesInSwitch": true
-    },
-    "include": [
-      "src/*"
-    ],
-    "exclude": [
-      "node_modules",
-      "**/__tests__/*"
-    ]
-  }
-
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["esnext", "dom"],
+    "jsx": "react-native",
+    "types": ["react-native", "jest"],
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "outDir": "./dist",
+    "sourceMap": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "ignoreDeprecations": "5.0",
+    "noImplicitAny": false,
+    "strictNullChecks": false
+  },
+  "include": ["src/*"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}