Pfthb

I am trying to use typescript together with React Native, Graphql and Formik.

I get a red squiggly line under EmailSignupScreen ( export default graphql(SIGNUP_MUTATION)(EmailSignupScreen); with the following error message

Argument of type 'typeof EmailSignupScreen' is not assignable to parameter of type 'ComponentType<Partial<DataProps<, >> & Partial<MutateProps<, >>>'.
 Type 'typeof EmailSignupScreen' is not assignable to type 'ComponentClass<Partial<DataProps<, >> & Partial<MutateProps<, >>, any>'.
 Types of parameters 'props' and 'props' are incompatible.
 Type 'Partial<DataProps<, >> & Partial<MutateProps<, >>' is not assignable to type 'Readonly<FormikSharedConfig & FormikState<FormValues> & FormikActions<FormValues> & FormikHandlers & FormikComputedProps<FormValues> & FormikRegistration & MutateProps<, OperationVariables> & Props>'.
 Property 'values' is missing in type 'Partial<DataProps<, >> & Partial<MutateProps<, >>'.

I suspect the error lies in this line of code ...

class EmailSignupScreen extends Component<
 ChildMutateProps<FormikProps<FormValues>> & Props
>

How should I properly type in using typescript to get rid of the error

Thank you

import React, Component from "react";
import View, Text, StyleSheet, Alert, TouchableOpacity from "react-native";
import Button from "react-native-elements";
import Formik, FormikProps from "formik";
import NavigationScreenProp from "react-navigation";
import * as Yup from "yup";

import Input from "../components/Input";
import SIGNUP_MUTATION from "../graphql/mutations/signup";
import graphql, ChildMutateProps from "react-apollo";

interface Props 
 navigation: NavigationScreenProp<any, any>;


interface FormValues 
 email: string;
 password: string;
 confirmPassword: string;


const api = (user: any) =>
 new Promise((resolve, reject) => 
 setTimeout(() => 
 if (user.email === "hello@gmail.com") 
 reject( email: "Email already use" );
 else 
 resolve();
 
 , 2000);
 );

class EmailSignupScreen extends Component<
 ChildMutateProps<FormikProps<FormValues>> & Props
> 
 static navigationOptions = () => (
 title: "SIGN UP"
 );

 _handleSubmit = async (values: any, bag: any) => 
 try 
 await api(values);
 Alert.alert("Successful!");
 catch (error) 
 bag.setSubmitting(false);
 bag.setErrors(error);
 
 ;
 render() 
 const container, buttonStyle, linkStyle = styles;
 return (
 <View style=container>
 <Formik
 initialValues= email: "", password: "", confirmPassword: "" 
 onSubmit=this._handleSubmit
 validationSchema=Yup.object().shape(
 email: Yup.string()
 .email("Not valid email")
 .required("Email is required"),
 password: Yup.string()
 .min(6)
 .required("Password is required"),
 confirmPassword: Yup.string()
 .oneOf(
 [Yup.ref("password", undefined)],
 "Confirm Password must matched Password"
 )
 .required("Confirm Password is required")
 )
 render=(
 values,
 handleSubmit,
 errors,
 touched,
 setFieldValue,
 setFieldTouched,
 isValid,
 isSubmitting
 : any) => (
 <React.Fragment>
 <Input
 label="Email"
 autoCapitalize="none"
 autoComplete="none"
 value=values.email
 onChange=setFieldValue
 onTouch=setFieldTouched
 name="email"
 error=touched.email && errors.email
 />
 <Input
 label="Password"
 autoComplete=false
 autoCapitalize="none"
 secureTextEntry
 name="password"
 value=values.password
 onChange=setFieldValue
 onTouch=setFieldTouched
 error=touched.password && errors.password
 />
 <Input
 label="Confirm Password"
 autoComplete=false
 autoCapitalize="none"
 secureTextEntry
 name="confirmPassword"
 value=values.confirmPassword
 onChange=setFieldValue
 onTouch=setFieldTouched
 error=touched.confirmPassword && errors.confirmPassword
 />
 <Button
 backgroundColor="purple"
 buttonStyle=buttonStyle
 title="Submit"
 onPress=handleSubmit
 disabled=
 loading=isSubmitting
 />
 <TouchableOpacity
 style=linkStyle
 onPress=() => this.props.navigation.navigate("Signin")
 >
 <Text>Go to Sign in</Text>
 </TouchableOpacity>
 </React.Fragment>
 )
 />
 </View>
 );
 


export default graphql(SIGNUP_MUTATION)(EmailSignupScreen);