I have incorporated Formik into my project to validate a native base input field using Yup schema. However, I am facing issues as the validation does not seem to be working correctly. Even when I enter alphabets, no errors are displayed.
The code functions properly (without Formik) as follows:
type EmailRegistrationProps = {};
interface FormValues {
friendEmail: string;
}
type AddFriendEmailPageProps = {
toggleShowPage: () => void;
showAddFriendEmailPage: boolean;
};
export const AddFriendEmailPage: React.FunctionComponent<AddFriendEmailPageProps> = ({
toggleShowPage,
showAddFriendEmailPage,
}) => {
// Existing code without Formik
};
Now, I am attempting to integrate Formik:
EDIT:
export const AddFriendEmailPage: React.FunctionComponent<AddFriendEmailPageProps> = ({
toggleShowPage,
showAddFriendEmailPage,
}) => {
const initialValues: FormValues = {
friendEmail: '',
};
// Code with Formik implementation
};
Although I want to continue using the existing handleSubmit function triggered by the button onPress event, I am encountering challenges in passing values and helpers for use within this function:
onPress={() => handleSubmit()}
An error message of Expected 2 arguments, but got 0 is displayed. On trying to pass values and helpers as arguments, I face "names not found" errors.
A similar issue arises at the end of the getFriendId function where I used [friendEmail, addFriend]. While this worked previously without Formik, it now fails due to unresolved references. I am struggling to seamlessly merge Formik functionality to reset values as was possible with useState.