{"id":57,"date":"2023-12-12T13:45:02","date_gmt":"2023-12-12T13:45:02","guid":{"rendered":"https:\/\/200oksolutionssandbox.co.uk\/blog\/?p=57"},"modified":"2024-07-30T08:55:49","modified_gmt":"2024-07-30T08:55:49","slug":"react-hook-form-basic-react-native","status":"publish","type":"post","link":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/","title":{"rendered":"React Hook Form Basic (React Native)"},"content":{"rendered":"\n<p><strong>Why to use React Hook Form?<\/strong>&nbsp;<\/p>\n\n\n\n<p>React Hook form manages complex form states and provides better performance than other libraries like formik. It provides the facility to validate the form on onChange and onSubmit. Also, it is lightweight and has no dependencies.&nbsp;<\/p>\n\n\n\n<p><strong>Installation&nbsp;<\/strong>&nbsp;<\/p>\n\n\n\n<p>To install the react-hook-form library, execute the following command from the terminal:&nbsp;<\/p>\n\n\n\n<p>command: npm install react-hook-form<\/p>\n\n\n\n<p><strong>React Hook Form Validation<\/strong>&nbsp;<\/p>\n\n\n\n<p>It provides multiple validations on each field. It supports a list of validation rules.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>required: input value is mandatory or not.&nbsp;<\/li>\n\n\n\n<li>pattern: a regex pattern to validate the input value.&nbsp;<\/li>\n\n\n\n<li>min: minimum value to be acceptable.&nbsp;<\/li>\n\n\n\n<li>max &#8211; maximum value to be acceptable.&nbsp;<\/li>\n\n\n\n<li>minLength: minimum length of input that can be acceptable.&nbsp;<\/li>\n\n\n\n<li>maxLength: maximum length of input that can be acceptable.&nbsp;<\/li>\n\n\n\n<li>validate: Any custom function to validate the input value.<\/li>\n<\/ul>\n\n\n\n<p><strong>When validations are applied to each field?<\/strong>&nbsp;<\/p>\n\n\n\n<p>It&#8217;s based on the mode set while creating the form state, the default mode set is &#8220;onSubmit&#8221; and it supports a list of validation rules.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>onBlur&nbsp;<\/li>\n\n\n\n<li>onChange&nbsp;<\/li>\n\n\n\n<li>onSubmit&nbsp;<\/li>\n\n\n\n<li>onTouched&nbsp;<\/li>\n\n\n\n<li>all&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong>How to create a form? Example of Login:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"629\" height=\"158\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-1.png\" alt=\"\" class=\"wp-image-58\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;Let\u2019s create email input&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"711\" height=\"171\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-2.png\" alt=\"\" class=\"wp-image-78\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"764\" height=\"226\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-3.png\" alt=\"\" class=\"wp-image-79\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"743\" height=\"184\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-4.png\" alt=\"\" class=\"wp-image-81\"\/><\/figure>\n\n\n\n<p>In the above input,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>label is the text that we want to display upon the input&nbsp;<\/li>\n\n\n\n<li>name is the key that is equivalent to&nbsp; defaultvalue for our email field&nbsp;<\/li>\n\n\n\n<li>control object is created by useForm() and it is must required to get the current state of the field&nbsp;<\/li>\n\n\n\n<li>isMandatory field is the validation which mentions required key which will be boolean value that field is required or not.&nbsp;<\/li>\n\n\n\n<li>IsEmail field is the validation which mentions pattern key which will be boolean value that field should be in email pattern or not.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>So, from above example isMandatory is related to required field rule and IsEmail is related to pattern rule. And as given below we can get values of fields by handle submit function.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"867\" height=\"101\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-5.png\" alt=\"\" class=\"wp-image-82\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"126\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-6.png\" alt=\"\" class=\"wp-image-83\"\/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"2345\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-7-1.png\" alt=\"\" class=\"wp-image-64\" style=\"width:261px;height:auto\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"2514\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-8-1.png\" alt=\"\" class=\"wp-image-65\" style=\"width:244px;height:auto\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"2514\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-9-1.png\" alt=\"\" class=\"wp-image-66\" style=\"width:244px;height:auto\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"2345\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-10-5.png\" alt=\"\" class=\"wp-image-72\" style=\"width:258px;height:auto\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"2345\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-11-2.png\" alt=\"\" class=\"wp-image-73\" style=\"width:244px;height:auto\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Mounting<\/strong>&nbsp;<\/p>\n\n\n\n<p>Component mounting is faster with react hook form compared to others. The following screenshots demonstrate the same.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1364\" height=\"990\" src=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-12.png\" alt=\"\" class=\"wp-image-74\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Why to use React Hook Form?&nbsp; React Hook form manages complex form states and provides&hellip;<\/p>\n","protected":false},"author":1,"featured_media":85,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,48,103],"class_list":["post-57","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-react-native","tag-react-native-development","tag-react-native-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Hook Form Basic (React Native)<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Hook Form Basic (React Native)\" \/>\n<meta property=\"og:description\" content=\"Why to use React Hook Form?&nbsp; React Hook form manages complex form states and provides&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61552217825863\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-12T13:45:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-30T08:55:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-Blog-Banner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"976\" \/>\n\t<meta property=\"og:image:height\" content=\"242\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"BlogAdmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BlogAdmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Hook Form Basic (React Native)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/","og_locale":"en_US","og_type":"article","og_title":"React Hook Form Basic (React Native)","og_description":"Why to use React Hook Form?&nbsp; React Hook form manages complex form states and provides&hellip;","og_url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61552217825863","article_published_time":"2023-12-12T13:45:02+00:00","article_modified_time":"2024-07-30T08:55:49+00:00","og_image":[{"width":976,"height":242,"url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-Blog-Banner.jpg","type":"image\/jpeg"}],"author":"BlogAdmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"BlogAdmin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/#article","isPartOf":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/"},"author":{"name":"BlogAdmin","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/ea0b72006227b3403f5ad825b82ced43"},"headline":"React Hook Form Basic (React Native)","datePublished":"2023-12-12T13:45:02+00:00","dateModified":"2024-07-30T08:55:49+00:00","mainEntityOfPage":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/"},"wordCount":361,"commentCount":0,"publisher":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-Blog-Banner.jpg","keywords":["react native","react native development","React-Native"],"articleSection":["FrontEnd"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/","name":"React Hook Form Basic (React Native)","isPartOf":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/#primaryimage"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-Blog-Banner.jpg","datePublished":"2023-12-12T13:45:02+00:00","dateModified":"2024-07-30T08:55:49+00:00","breadcrumb":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/#primaryimage","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-Blog-Banner.jpg","contentUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2023\/12\/RN-Blog-Banner.jpg","width":976,"height":242,"caption":"RN Blog Banner"},{"@type":"BreadcrumbList","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/react-hook-form-basic-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/200oksolutionssandbox.co.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"React Hook Form Basic (React Native)"}]},{"@type":"WebSite","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#website","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/","name":"","description":"","publisher":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/200oksolutionssandbox.co.uk\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2026\/01\/200ok_logo.png","contentUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2026\/01\/200ok_logo.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61552217825863"]},{"@type":"Person","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/ea0b72006227b3403f5ad825b82ced43","name":"BlogAdmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/53ecc99d859b4d3444ee1e076f3b5d9da9962836d1c20b3b44d73574f435740d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/53ecc99d859b4d3444ee1e076f3b5d9da9962836d1c20b3b44d73574f435740d?s=96&d=mm&r=g","caption":"BlogAdmin"},"sameAs":["http:\/\/blog.200oksolutions.com"],"url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/author\/blogadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":3,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions\/84"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/media\/85"}],"wp:attachment":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}