Cannot Navigate Away from Component - react-native

Question

I cannot seem to navigate away from my component despite trying both this.props.navigation.navigate and NavigationService
To test it out, i created a simple button to navigate away and it work but when i used it within my formik and react-native, it did not navigate away
Anyone encountered such situations before? How do you resolve? below is my code
thank you
import React, { Component } from "react";
import {
View,
StyleSheet,
AsyncStorage,
Text,
TouchableHighlight
} from "react-native";
import { Button } from "react-native-elements";
import { Formik } from "formik";
import * as Yup from "yup";
import { Mutation } from "react-apollo";
import Input from "../components/Input";
import NavigationService from "../../navigation/NavigationService";
import { SIGNIN } from "../../graphql/queries";
const FormValidationSchema = Yup.object().shape({
email: Yup.string()
.email("Not valid email")
.required("Email is required"),
password: Yup.string()
.min(3)
.required("Password is required")
});
class EmailSigninScreen extends Component {
_handleSubmit = async (values, bag, signin) => {
console.log(values, bag, signin);
try {
const data = await signin({
variables: {
email: values.email,
password: values.password
}
});
await AsyncStorage.setItem("token", data.signin.token);
this.props.navigation.navigate("Main");
// NavigationService.navigate("Main");
} catch (error) {
bag.setSubmitting(false);
bag.setErrors(error);
}
};
render() {
const { container, buttonStyle } = styles;
return (
<View style={container}>
<Mutation mutation={SIGNIN}>
{(signin, { error }) => {
console.log(error);
return (
<Formik
initialValues={{ email: "", password: "" }}
onSubmit={(values, bag) =>
this._handleSubmit(values, bag, signin)
}
validationSchema={FormValidationSchema}
render={({
values,
handleSubmit,
errors,
touched,
setFieldValue,
setFieldTouched,
isValid,
isSubmitting
}) => (
<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}
/>
<Button
backgroundColor="purple"
buttonStyle={buttonStyle}
title="Submit"
onPress={handleSubmit}
disabled={!isValid || isSubmitting}
loading={isSubmitting}
/>
<TouchableHighlight
onPress={() => this.props.navigation.navigate("Main")}
>
<Text>Jump</Text>
</TouchableHighlight>
</React.Fragment>
)}
/>
);
}}
</Mutation>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center"
// justifyContent: "center"
},
buttonStyle: {
marginTop: 20,
width: "100%"
}
});
export default EmailSigninScreen;

Answer 1

Try to use withNavigation like this:
import { withNavigation } from 'react-navigation';
export default withNavigation(EmailSigninScreen);
everything else can stay the same

Answer 2

The problem lies in my async - await syntax factoring
factoring my handleSubmit function to below format works...
i am still trying to see if i can convert the codes below to purely using async and await rather than a mixture of async and await & then and catch. if anyone has a solution, will appreciate advise here. Tq
//TODO refactor to async and await syntax
_handleSubmit = (values, bag, signin) => {
signin({
variables: {
email: values.email,
password: values.password
}
})
.then(async ({ data }) => {
if (data && data.signin.token) {
await AsyncStorage.setItem("token", data.signin.token);
this.props.navigation.navigate("Main");
}
})
.catch(err => {
bag.setSubmitting(false);
bag.setErrors(err);
});
};