Formik Patterns
Basic Form Setup
import { useFormik } from 'formik';
import * as yup from 'yup';
const validationSchema = yup.object({
email: yup.string().email('Invalid email').required('Email is required'),
password: yup.string().min(8, 'Min 8 characters').required('Password is required'),
});
const LoginForm = () => {
const formik = useFormik({
initialValues: {
email: '',
password: '',
},
validationSchema,
onSubmit: async (values) => {
await loginMutation({ variables: { input: values } });
},
});
return (
<VStack gap="$4">
<Input
label="Email"
value={formik.values.email}
onChangeText={formik.handleChange('email')}
onBlur={formik.handleBlur('email')}
error={formik.touched.email ? formik.errors.email : undefined}
keyboardType="email-address"
autoCapitalize="none"
/>
<Input
label="Password"
value={formik.values.password}
onChangeText={formik.handleChange('password')}
onBlur={formik.handleBlur('password')}
error={formik.touched.password ? formik.errors.password : undefined}
secureTextEntry
/>
<Button
onPress={formik.handleSubmit}
isDisabled={!formik.isValid || formik.isSubmitting}
isLoading={formik.isSubmitting}
>
Login
</Button>
</VStack>
);
};
Validation Schemas
Common Patterns
import * as yup from 'yup';
// Email
email: yup.string()
.email('Invalid email address')
.required('Email is required')
// Password with requirements
password: yup.string()
.min(8, 'Must be at least 8 characters')
.matches(/[a-z]/, 'Must contain lowercase letter')
.matches(/[A-Z]/, 'Must contain uppercase letter')
.matches(/[0-9]/, 'Must contain number')
.required('Password is required')
// Confirm password
confirmPassword: yup.string()
.oneOf([yup.ref('password')], 'Passwords must match')
.required('Please confirm password')
// Phone number
phone: yup.string()
.matches(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number')
.required('Phone is required')
// Optional field with validation when present
website: yup.string()
.url('Must be a valid URL')
.nullable()
// Number with range
quantity: yup.number()
.min(1, 'Minimum 1')
.max(100, 'Maximum 100')
.required('Quantity required')
// Array with minimum items
tags: yup.array()
.of(yup.string())
.min(1, 'Select at least one tag')
Conditional Validation
const schema = yup.object({
hasCompany: yup.boolean(),
companyName: yup.string().when('hasCompany', {
is: true,
then: (schema) => schema.required('Company name required'),
otherwise: (schema) => schema.nullable(),
}),
});
Form Field Helpers
Input Helper
const getFieldProps = (name: keyof typeof formik.values) => ({
value: formik.values[name],
onChangeText: formik.handleChange(name),
onBlur: formik.handleBlur(name),
error: formik.touched[name] ? formik.errors[name] : undefined,
});
// Usage
<Input label="Email" {...getFieldProps('email')} />
Select/Picker Helper
<Select
label="Country"
value={formik.values.country}
onValueChange={(value) => formik.setFieldValue('country', value)}
error={formik.touched.country ? formik.errors.country : undefined}
options={countryOptions}
/>
Form Submission with GraphQL
const CreateItemForm = () => {
const [createItem] = useCreateItemMutation({
onCompleted: () => {
toast.success({ title: 'Item created' });
navigation.goBack();
},
onError: (error) => {
console.error('createItem failed:', error);
toast.error({ title: 'Failed to create item' });
},
});
const formik = useFormik({
initialValues: { name: '', description: '' },
validationSchema,
onSubmit: async (values, { setSubmitting }) => {
try {
await createItem({ variables: { input: values } });
} finally {
setSubmitting(false);
}
},
});
return (
<VStack gap="$4">
{/* Form fields */}
<Button
onPress={formik.handleSubmit}
isDisabled={!formik.isValid || formik.isSubmitting}
isLoading={formik.isSubmitting}
>
Create
</Button>
</VStack>
);
};
Edit Form with Initial Values
const EditItemForm = ({ item }: { item: Item }) => {
const [updateItem] = useUpdateItemMutation({
onCompleted: () => toast.success({ title: 'Saved' }),
onError: (error) => {
console.error('updateItem failed:', error);
toast.error({ title: 'Save failed' });
},
});
const formik = useFormik({
initialValues: {
name: item.name,
description: item.description ?? '',
},
enableReinitialize: true, // Update when item prop changes
validationSchema,
onSubmit: async (values) => {
await updateItem({
variables: { id: item.id, input: values },
});
},
});
// Track if form has changes
const hasChanges = formik.dirty;
return (
<VStack gap="$4">
{/* Form fields */}
<Button
onPress={formik.handleSubmit}
isDisabled={!hasChanges || !formik.isValid || formik.isSubmitting}
isLoading={formik.isSubmitting}
>
Save Changes
</Button>
</VStack>
);
};
Form State Helpers
const {
values, // Current form values
errors, // Validation errors
touched, // Fields that have been touched
isValid, // Form passes validation
isSubmitting, // Submit in progress
dirty, // Values differ from initial
handleSubmit, // Submit handler
handleChange, // Change handler
handleBlur, // Blur handler
setFieldValue, // Set single field
setFieldTouched, // Mark field touched
resetForm, // Reset to initial values
setSubmitting, // Control submitting state
} = formik;
Multi-Step Forms
const MultiStepForm = () => {
const [step, setStep] = useState(0);
const formik = useFormik({
initialValues: {
// Step 1
name: '',
email: '',
// Step 2
address: '',
city: '',
// Step 3
cardNumber: '',
},
validationSchema: stepSchemas[step],
onSubmit: async (values) => {
if (step < steps.length - 1) {
setStep(step + 1);
} else {
await submitOrder(values);
}
},
});
return (
<VStack>
{step === 0 && <PersonalInfoStep formik={formik} />}
{step === 1 && <AddressStep formik={formik} />}
{step === 2 && <PaymentStep formik={formik} />}
<HStack gap="$4">
{step > 0 && (
<Button variant="outline" onPress={() => setStep(step - 1)}>
Back
</Button>
)}
<Button
onPress={formik.handleSubmit}
isDisabled={!formik.isValid}
isLoading={formik.isSubmitting}
>
{step < steps.length - 1 ? 'Next' : 'Submit'}
</Button>
</HStack>
</VStack>
);
};
Anti-Patterns
// WRONG - Not showing validation errors
<Input
value={formik.values.email}
onChangeText={formik.handleChange('email')}
/>
// CORRECT - Show errors when touched
<Input
value={formik.values.email}
onChangeText={formik.handleChange('email')}
onBlur={formik.handleBlur('email')}
error={formik.touched.email ? formik.errors.email : undefined}
/>
// WRONG - Submit button always enabled
<Button onPress={formik.handleSubmit}>Submit</Button>
// CORRECT - Disabled when invalid or submitting
<Button
onPress={formik.handleSubmit}
isDisabled={!formik.isValid || formik.isSubmitting}
isLoading={formik.isSubmitting}
>
Submit
</Button>
// WRONG - No error handling on mutation
onSubmit: async (values) => {
await createItem({ variables: { input: values } });
}
// CORRECT - Handle errors
onSubmit: async (values, { setSubmitting }) => {
try {
await createItem({ variables: { input: values } });
} catch (error) {
toast.error({ title: 'Failed to save' });
} finally {
setSubmitting(false);
}
}
Integration with Other Skills
- graphql-schema: Mutation submission patterns
- react-ui-patterns: Loading/error states
- testing-patterns: Test form validation and submission
