Demo Github
En la Parte anterior llamada Como Crear un Formulario en React Native y Validarlo del Lado Front-end – Parte 1, creamos un nuevo proyecto en React Native para el formulario, luego creamos el formulario con sus campos respectivos y también agregamos los estilos CSS para mejorar el aspecto del formulario, en esta 2da y última parte vamos a realizar la validación de los campos de formulario, vamos con ello.
Partes
- Parte 1
- Parte 2 (Final – Código Fuente GitHub)
Antes de continuar con este Post, te invito a leer los siguientes artículos:
- Que es React Native y tu primer Hola Mundo
- 5 Populares Aplicaciones que usan tecnología React (React Native, React JS)
- Como Crear una Aplicación Básica “Hola Mundo” con React Native 0.63.2
- Que es Android y tu Primera aplicación Hola Mundo
- Que es y Como instalar Node JS
- Puedes leer más en la categoría React Native
Asimismo te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación”:
| Spotify | SoundCloud | Apple Podcasts |
 |
 |
 |
Bien ahora continuemos con el Post: Como Crear un Formulario en React Native y Validarlo del Lado Front-end – Parte 2 (Final).
Ya que React Native esta desarrollado sobre el lenguaje de Programación TypeScript, pues podría usar esta tecnología para validar el formulario, pero cuando se requiera hacer una validación más avanzando o de varios campos, al ser una aplicación móvil esto podría resultar un poco complejo, así que usaré una librería llamada Formik, asimismo usar herramientas adicionales para avanzar un proyecto forma parte del Desarrollo de Software Ágil y nos facilita la creación del proyecto.
Validación del Formulario
Comenzaremos instalando la librería Formik, esta librería nos permite validar formularios en React Native o en React, bien para instalar esta librería ejecutamos el siguiente comando en nuestra consola de comandos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
npm install formik --save up to date, audited 1292 packages in 6s 59 packages are looking for funding run `npm fund` for details 7 low severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. |
También instalaré el paquete yup, este paquete es un constructor de esquemas JavaScript que hace análisis y valida los valores del formulario del lado Front-End, yup minimiza las validaciones complejas y hace que están sean mas sencillas, escribiendo poco código para las mismas.
Para instalar yup, ejecuto el siguiente comando en mi consola de comandos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
npm install yup --save up to date, audited 1292 packages in 4s 59 packages are looking for funding run `npm fund` for details 7 low severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. |
Paso seguido abro el archivo App.js que se encuentra en el directorio principal del proyecto y en donde creamos el formulario en la Parte 1 de este tutorial.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/appholamundo ├── _tests_ ├── /android ├── /ios ├── /node_modules ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.js // Abro este Archivo ├── app.json ├── babel.config.js ├── index.js ├── metro.config.js ├── package.json ├── yarn.lock |
Dentro del archivo App.js importamos las herramientas que acabamos de instalar, es decir formik y yup.
|
1 2 3 4 5 |
// Importamos Formik y Yup import { Formik } from 'formik'; import * as yup from 'yup'; |
Paso seguido crearemos los mensajes de validación para los campos nombresyapellidos, email, telefono y mensaje.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// Mensajes de Validación del Formulario const loginValidationSchema = yup.object().shape({ nombresyapellidos: yup .string("Ingresa tus Nombres y Apellidos") .required("*Campo requerido"), email: yup .string("Ingresa tu Email") .required("*Campo requerido") .email("Ingresa un Email válido"), telefono: yup .number("Ingresa tu Teléfono") .required("*Campo requerido"), mensaje: yup .string("Ingresa tu Mensaje") .required("*Campo requerido"), }); |
Con esto ya esta validando nuestro formulario en React Native, hora volvemos a iniciar el servidor de React Native ejecutando el siguiente comando.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
npx react-native start ###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere |
Igualmente y sin cerrar la consola anterior, ahora ejecutaré el siguiente comando en una nueva consola de comandos, con este comando iniciaré el emulador Android y compilaré la aplicación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
npx react-native run-android info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. Jetifier found 967 file(s) to forward-jetify. Using 8 workers... info JS server already running. info Installing the app... > Task :app:stripDebugDebugSymbols UP-TO-DATE Compatible side by side NDK version was not found. > Task :app:installDebug 10:56:29 V/ddms: execute: running am get-config 10:56:29 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1 10:56:29 V/ddms: execute: returning Installing APK 'app-debug.apk' on 'Pixel_4_XL_API_29(AVD) - 10' for app:debug 10:56:29 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554' 10:56:29 D/Device: Uploading file onto device 'emulator-5554' 10:56:29 D/ddms: Reading file permision of G:\xampp\htdocs\xampp\nc\tutoriales\appformulario\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------ 10:56:30 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk" 10:56:30 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1 10:56:30 V/ddms: execute: returning 10:56:30 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk" 10:56:31 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1 10:56:31 V/ddms: execute: returning Installed on 1 device. BUILD SUCCESSFUL in 7s 27 actionable tasks: 2 executed, 25 up-to-date info Connecting to the development server... info Starting the app on "emulator-5554"... Starting: Intent { cmp=com.appformulario/.MainActivity } |
Me carga el emulador con el formulario y si presiono el botón de abajo que dice Aceptar, pues me valida los campos sin problema.
Y bueno con esto entonces hemos terminado este tutorial que consta de 2 partes y espero que te haya gustado y sobre todo que te sea muy útil.
Al inicio de este Post he colocado una Demo para que veas el proyecto en acción, así mismo he colocado un enlace a un repositorio de GitHub en donde he colocado el código fuente del proyecto.
Conclusión
En este tutorial hemos aprendido a crear un formulario con React Native y validar sus campos.
Nota (s)
- Los pasos mencionadas en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a React Native y TypeScript.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.