formik-yup-react-native
Skill4 starsChanged 5 months agoMITView on GitHub
Formik + Yup for React Native. TextInput integration, mobile validation UX, error timing. Use when building mobile forms with validation, handling keyboard/focus UX, or wiring Yup schemas to Formik in RN.
In this repository101 other files it gives its agents.
- ai-video-understandingSkill
- apple-foundation-modelsSkill
- arch-dddSkill
- arch-decision-recordsSkill
- arch-diagramsSkill
- arch-eventsSkill
- arch-mvp-roadmapSkill
- arch-python-modernSkill
- aws-app-runnerSkill
- aws-cicd-patternsSkill
- aws-security-hardeningSkill
- azure-functions-python-v2Skill
- azure-identity-m2m-authSkill
- azure-service-bus-messagingSkill
- azure-workflow-execution-modelsSkill
- caddy-tls-proxySkill
- compliance-frameworksSkill
- design-system-workflowSkill
- dev-debugging-strategiesSkill
- dev-standardsSkill
- docker-python-poetrySkill
- docker-pythonSkill
- fastapi-patternsSkill
- ffmpeg-laravel-videoSkill
- frontend-accessibilitySkill
- frontend-angular-aiSkill
- frontend-angularSkill
- frontend-angular-toolingSkill
- frontend-design-systemsSkill
- frontend-material-chatSkill
- frontend-material-design-3Skill
- frontend-svelteSkill
- gcp-cicd-patternsSkill
- gcp-cloud-runSkill
- gcp-cloudsql-infrastructureSkill
- gcp-finopsSkill
- gcp-observabilitySkill
- gcp-security-hardeningSkill
- github-actions-cicdSkill
- healthkit-biofeedbackSkill
- infra-terraformSkill
- ios-app-qualitySkill
- ios-audio-hapticsSkill
- jest-nestjs-testingSkill
- langchain-azure-openai-patternsSkill
- laravel-auth-hardeningSkill
- laravel-ci-mysqlSkill
- laravel-mix-webpackSkill
- laravel-modern-patternsSkill
- laravel-pint-patternsSkill
- laravel-s3-storageSkill
- laravel-sail-dockerSkill
- mobile-app-deploymentSkill
- mobile-e2e-testingSkill
- mobile-offline-syncSkill
- mobile-push-notificationsSkill
- mobile-video-uploadSkill
- mongodb-asyncmongoclient-patternsSkill
- mongodb-atlas-patternsSkill
- nestjs-patternsSkill
- The first 60 shown.
The file
Files
Formik + Yup for React Native
Form validation for React Native.
When to Use
- Forms with 3+ fields
- Email/password validation
- Mobile error UX
- Keyboard field navigation
Foundation: react-redux-spa-patterns (Formik/Yup basics)
TextInput vs HTML
Critical: TextInput uses onChangeText={handleChange('field')}, not onChange={handleChange}.
| Web | React Native |
onChange + name attribute | onChangeText + explicit field arg |
| Auto-submit on Enter | Manual keyboard handling |
Error UX Timing
| Show When | Why |
| On Blur | Time to complete input |
| On Change (after touch) | Immediate correction feedback |
| On Submit | Catch incomplete |
Pattern: {errors.field && touched.field && <Text>{errors.field}</Text>}
Anti-Patterns
| Anti-Pattern | Pattern |
| Manual validation | Use Yup schemas |
| Errors before touch | Check touched.field first |
| Duplicate submits | disabled={isSubmitting} |
| Hidden keyboard inputs | Wrap in KeyboardAvoidingView |
reference.md: Field components, keyboard dismissal, async validation, KeyboardAvoidingView setup examples.md: Complete forms, TextInput patterns, Yup schemas, field navigation, real-world code
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.