Formik and Apollo Client

import React, { Component } from "react";
import { Image, View } from "react-native";
import { styles } from "./Styles";
import { TextInput, Button, Formik, Form, Field, Appbar, Title, Paragraph, Text } from "react-native-paper";
import * as Yup from "yup";
import gql from "graphql-tag";
import { useMutation } from "@apollo/react-hooks";

const LOGIN_MUTATION = gql`
  mutation($email: String!, $password: String!) {
    tokenAuth(email: $email, password: $password) {
      token
    }
  }
`;

function AddLogin() {
  let input;
  const [addTodo, { data }] = useMutation(LOGIN_MUTATION);
  const printhello = () => {
    console.log("hello");
  };

  return (
    <View>
      <Appbar.Header style={styles.headerbackground}>
        <Appbar.Content title="Sign In" />
      </Appbar.Header>
      <View style={styles.signinfields}>
        <TextInput style={styles.signinfield} label="Email" />
        <TextInput style={styles.signinfield} label="Password" secureTextEntry={true} />
        // Button containing onPress
        <Button style={styles.signinfield} mode="contained" onPress={printhello}>
          Sign In
        </Button>
      </View>
    </View>
  );
}

export class SignIn extends Component {
  render() {
    return <AddLogin />;
  }
}

export default SignIn;

// Formik x React Native example
import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { Formik } from 'formik';

export const MyReactNativeForm = props => (
  <Formik
    initialValues={{ email: '' }}
    onSubmit={values => console.log(values)}
  >
    {({ handleChange, handleBlur, handleSubmit, values }) => (
      <View>
        <TextInput
          onChangeText={handleChange('email')}
          onBlur={handleBlur('email')}
          value={values.email}
        />
        <Button onPress={handleSubmit} title="Submit" />
      </View>
    )}
  </Formik>
);

function AddTodo() {
  let input;
  const [addTodo, { data }] = useMutation(ADD_TODO);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addTodo({ variables: { type: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
}

import React, { Component } from "react";
import { Image, View } from "react-native";
import { styles } from "./Styles";
import { TextInput, Button, Form, Field, Appbar, Title, Paragraph, Text } from "react-native-paper";
import * as Yup from "yup";
import gql from "graphql-tag";
import { useMutation } from "@apollo/react-hooks";
import { Formik } from "formik";
import { Mutation } from '@apollo/react-components';
import {apiUrl} from "../constants/config"

const LOGIN_MUTATION = gql`
  mutation($email: String!, $password: String!) {
    tokenAuth(email: $email, password: $password) {
      token
    }
  }
`;

function AddSignIn(props) {
  // console.log(props)
  const [addSignIn, { data }] = useMutation(LOGIN_MUTATION);
  return (
    <Formik
      initialValues={{
        email: "",
        password: ""
      }}
      validationSchema={Yup.object().shape({
        email: Yup.string().email("Email not valid").required("Email is required"),
        password: Yup.string().required("Password is required")
      })}
      onSubmit={(values, actions) => {
        // console.log(values)
        // console.log(apiUrl)
     
        const promise = addSignIn({ variables: values });

        promise.then(function(data) {
          actions.setSubmitting(false);
          console.log(data);
           props.navigation.navigate("home")
        });
      }}
    >
      {({ handleSubmit, handleBlur, handleChange, errors, touched, isValid, isSubmitting, values }) => (
        <View>
          <Appbar.Header style={styles.headerbackground}>
            <Appbar.Content title="Sign In" />
          </Appbar.Header>
          <View style={styles.signinfields}>
            <TextInput
              style={styles.signinfield}
              label="Email"
              value={values.email}
              onChangeText={handleChange("email")}
              onBlur={handleBlur("email")}
            />
            {touched.email && errors.email && <Text>{errors.email}</Text>}
            <TextInput
              style={styles.signinfield}
              label="Password"
              value={values.password}
              secureTextEntry={true}
              onBlur={handleBlur("password")}
              onChangeText={handleChange("password")}
            />
            {touched.password && errors.password && <Text>{errors.password}</Text>}
            <Button style={styles.signinfield} mode="contained" onPress={handleSubmit}>
              Sign In
            </Button>
          </View>
        </View>
      )}
    </Formik>
  );
}

export class SignIn extends Component {
  render() {
    const {navigation} = this.props;
    // console.log(navigation)
    return (
     
      <AddSignIn navigation={navigation} />
    
    );
  }
}

export default SignIn;