Wsrtjtyk

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={!isValid || isSubmitting}

                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);