Formik y Yup tambien sirven para react web normal, puede que sea un poco complicado a un inicio pero una vez que lo dominas te facilita las validaciones de los formularios
Es súper bueno utilizar librerías de tercerros para hacer este tipo de validaciones, pero recuerden que también pueden crear su propia lógica de obtención de datos y validación de estos.
Les comparto un custom hook para recibir los datos de los inputs y computarlos con sus correspondientes fields (sin Formik).
Screen de ejemplo que implementa el customHook.
const{onChange, form, isSuscribed}=useForm({//Este es el objeto que recibirá mi custom hookname:'',email:'',phone:'',isSuscribed:false,});<TextInput style={{...styles.textInput,color: colors.text}} placeholder="Type your name" placeholderTextColor='black' autoCapitalize='words' onChangeText={(value)=>onChange(value,'name')}/><TextInput style={{...styles.textInput,color: colors.text}} placeholder="Type your email" placeholderTextColor='black' keyboardType="email-address" autoCapitalize='none' onChangeText={(value)=>onChange(value,'email')}/>
Custom Hook (con TypeScript) que recibe el objeto y hace la lógica para almacenar el valor con su correspondiente field.
El field no es nada más que el referente a mi input, similar al name de un input en HTML.
Recomiendo mucho también React hook form, funciona tanto para web como para react native. Buenísimo, se puede aplicar las validaciones y muchas otras herramientas mas.
En vez de usar funciones que devuelve objetos, se pueden usar simplementes objetos y funciona exactamente.
const initialValues ={username:"",password:"",}
El problema de eso, en este caso, es que quedaría lo siguiente:
initialValues: initialValues,
No queda muy claro de donde vienen la información. Creo que por eso el profe lo hizo con una función, para que haya diferencia.
A mi personalmente me gusta usar más react-hook-form que se puede usar tanto en web como en mobile y siento la documentación más completa, te dejo el recurso por si te interesa :
React Hook Form - performant, flexible and extensible form library (react-hook-form.com)
¿Como obtengo datos de input anterior?, probé con formik.getFieldProps(), pero los valores lo tiene undefined
Una pequeña función que te ayuda a mostrar todos los errores sin necesidad de estarlos llamando cada uno en un <Text>
Lo que hacemos es tomar del objeto formik.errors cada uno de sus valores y los recorremos con map.
De esta forma si son 20 campos pues bueno, ya te puedes imaginar.
Es impresionante como esta saga de cursos me han hecho agarrarle mucho cariño a usar componentes de Clase de React. (SI, COMPONENTES DE CLASE). Como tambien evitar la instalación de paquetes como Lodash, Formik y Yup y hasta de usar Async/Await. Listeralmente todo se puede manejar con estados, promesas y lógica muy simple.
Me parece genial que le quieras a las clases, pero también me da la impresión de que te queres quedar con lo viejo.
Justamente para simplificar muchas cosas se crearon las "function components" y lo de las librerías es simplemente como reinventar la rueda. Para que reinventarla si ya existen librerías que lo hacen super bien!
Opino lo mismo que @Misael. O sea, todo bien con querer hacer las cosas de otra forma, pero la realidad es que eso ya no se hace así. Los "class components" ya fueron reemplazados. Y sobre las librerías, si hay algo que ya está creado y probado, ¿para qué volver a crearlo?
Cuando varias opciones de los elementos se repiten, estas pueden definirse como variables de objeto general. Por ejemplo, los inputs pueden definirse de la siguiente manera:
Otra alternativa mas light es react hook form es muy extensible si usas mucho los hooks en react, tambien sirve para react.
Les comparto mi repo, la diferencia es que en el uso react use form en lugar de formik y zod en lugar de yup:
Para las personas que estan iniciando, les recomiendo usar estados y crear sus propias validaciones, en el entorno profesional a veces no permiten el uso de estos paquetes sea por cuestiones de seguridad u otros, por lo que es mejor usar lo propio.
para los amantes de la optimizacion:
Lo más optimizado es React hook forms porque Formik se renderiza mucho.
