Como Crear un Formulario en React Native y Validarlo del Lado Front-end – Parte 2 (Final)

React Native | | Comunidad: Crear un Post, Eventos Devs, Foro

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:

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.

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.

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.

Dentro del archivo App.js importamos las herramientas que acabamos de instalar, es decir formik y yup.

Paso seguido crearemos los mensajes de validación para los campos nombresyapellidos, email, telefono y mensaje.

Con esto ya esta validando nuestro formulario en React Native, hora volvemos a iniciar el servidor de React Native ejecutando el siguiente comando.

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. 

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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments