Building and Validating Forms with Formik & Yup
Learn to build and manage high-quality forms for your React Native app with Formik and Yup.
I'm going to go out on a limb here and say that your app has at least one form in it, likely more than one.
So, how do you manage those forms? Throw the data into component state or redux (yuck) and then submit it when you're done?
Where does validation fit in?
Error handling?
You get the point - there's more to a "simple form" than meets the eye. And when you've done it once you've got to do it again for another form.
It's repetitive and ad-hoc APIs rarely end up easy to understand.
These challenges are amplified when you're building larger forms.
That's why I use Formik + Yup to build all of my forms now. It:
- Manages form state
- Has easy per-field validation
- Has an easy to understand API
It does everything I need it to. I've worked with numerous consulting clients to convert their forms over to Formik + Yup and we saw
- less code
- less bugs
- better everything
Your Instructor
I’m Spencer Carli. I'm a developer, cat dad, and devout pizza lover.
I’ve been using React Native full-time since it was first open sourced by Facebook in 2015. I’ve built multiple apps, reached over 1.1 million developers through my React Native tutorials, taught thousands through my online courses, and trained teams of developers to effectively use React Native.
React Native School
Wait! Do you use React Native often? Maybe you're building a product on it. If so, you're going to be looking things up often - so why not get access to the best React Native resources on the web?
React Native School gives you access to multiple courses (including this one), a weekly tutorial, access to a private Slack community full of other React Native developers to learn from.
Sound interesting? Check it out!
Course Curriculum
-
StartIntroduction
-
StartFormik Basics (6:25)
-
StartYup Validation Basics (4:33)
-
StartBuilding a Sign In Form (7:29)
-
StartRefactor: Styled TextInput (7:48)
-
StartHandling Different Field Types (4:36)
-
StartRefactor: Field Wrapper (4:27)
-
StartChecking Field Equality (Confirm Password) (3:55)
-
StartHandling Server Errors (5:47)
Get started now!
Don't believe me? Here's what others have to say.
"woot woot, just got an app approved on the app store with my first submission! wouldn't have happened without all the good insights from @spencercarli. thanks man!"
- Rob Carter
"THANK YOU, THANK YOU, THANK YOU. I just built and pushed my first react native app to the App Store. You have NO idea how much time, stress and anxiety you've saved me with this video series. I learned so much from these. New tools, and methods of building for production. I'm not even done yet, I just had to stop and thank you before I continued. YOU. ROCK. simple as that."
- Jonathan Wheat
"Spencer Carli's courses and tutorials have been an immense help to me on my journey to become an Android and iOS mobile app programmer. I've learned not only how to create dynamically functional React Native + Meteor apps, but how to write cleaner, more concise code as well. He has taught me to better utilize the React Native component model--which, along with its cross-platform nature is really its core strength and saves one from redundancy--and to employ Meteor's amazing responsiveness in my apps. All this, and he has always been there with an answer when I've run up against one of those frustrating coding problems as well! I recommend his courses highly."
- Ken Wishart