DEV Community

Forms in React Native, The right way 😎

Elazizi Youssouf on March 27, 2020

Handling forms in react native is a crucial task in your journey as a react native developer, you can’t think about developing a new react native a...

Read full post

Martin Cerny • Jun 8 '20

I have also tried to unit test validations, but that doesn't work. The validation is skipped when I submit the whole form in tests.

Do you know if there is anyway how I can trigger the validations in form?

Elazizi Youssouf • Jun 15 '20

you can use triggerValidation function : react-hook-form.com/api#triggerVal...

Martin Cerny • May 5 '20

I have tried to implement it with the latest react-hook-form, but it doesn't work. Looks like the problem is with 5.5.2 release github.com/react-hook-form/react-h...

Elazizi Youssouf • May 6 '20

Hmm, Yeah look like we have an issue with version 5.5.2 and we need to to register inputs using useEffect.

thank you for your help, will try to fix it ASAP

Elazizi Youssouf • Jun 15 '20

Fixed

Riccardo • Jun 17 '20

First, thanks for the idea of a wrapper for forms with react native!

I tried your fixed version and came to the same resolution, that the validation isn't working well.

Example:
Enter the following values on your prototype (snack.expo.io/@yjose/form-in-react...
Name: asdf
Email: asdf -> then correct to aasdf@gmail.com
Password: anything you want

-> submit

Result: all fields are invalid :-( Hopefully you can help me out

Elazizi Youssouf • Jun 24 '20

please check Now, the demo example is working as expected ( look like the new react-hook-form have some breaking changes )

moedeveloper • Nov 9 '20 • Edited

dev-to-uploads.s3.amazonaws.com/i/...

I dont get it actually :(, any help ?

Also, I am getting this error :(

Warning: Each child in a list should have a unique "key" prop. See fb.me/react-warning-keys for more information.

node_modules/react-native/Libraries/LogBox/LogBox.js:173:8 in registerError
node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
node_modules/react/cjs/react.development.js:315:4 in printWarning
node_modules/react/cjs/react.development.js:287:16 in error
node_modules/react/cjs/react.development.js:1630:9 in validateExplicitKey
node_modules/react/cjs/react.development.js:1656:27 in validateChildKeys
node_modules/react/cjs/react.development.js:1806:23 in createElementWithValidation
src/components/Form.tsx:33:4 in
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:10073:26 in renderWithHooks
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12882:27 in mountIndeterminateComponent
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19181:22 in beginWork$1
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18085:22 in performUnitOfWork
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18013:38 in workLoopSync
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17977:18 in renderRootSync
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
[native code]:null in performSyncWorkOnRoot
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
node_modules/scheduler/cjs/scheduler.development.js:653:23 in unstable_runWithPriority
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17718:28 in batchedUpdates$1
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2713:25 in receiveEvent
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
[native code]:null in callFunctionReturnFlushedQueue