React Native Validasi Form Menggunakan Formik dan Yup

Saya akan membuat formulir dasar dengan nama, nomor telepon, email, kata sandi, dan konfirmasi input, ini untuk menampilkan bagaimana cara pembuatan formulir dengan mudah dalam react native. State adalah jendela atau layar basis data yang memiliki banyak bidang atau ruang untuk entri data. Setiap bidang memiliki label, sehingga setiap pengguna yang melihat formulir dapat melihat isinya.

Formulir digunakan dalam pengembangan perangkat lunak untuk memperoleh nilai dari pengguna dan menyimpan informasi yang diberikan oleh pengguna dalam database melalui panggilan API. Sebaliknya, bekerja dengan kontrol input formulir dan validasi formulir di react native agak sulit. Di sinilah Formik dan Yup berperan; Formik memungkinkan Anda membuat formulir lebih cepat, sementara Yup menangani validasi.

Apa itu Formik?

Formik adalah pustaka sederhana namun efektif yang membantu Anda dengan tiga bidang yang paling menantang dalam pembuatan formulir react native. Ini juga membantu organisasi dengan membuat, menguji, dan memfaktorkan ulang formulir.

a. Manajemen pengiriman formulir

b. Pesan validasi dan peringatan

c. Mengelola nilai formulir status formulir

Apa itu Yup?

Yup adalah pembuat skema JavaScript yang mendukung parsing dan validasi nilai. Menetapkan skema, mengkonversi nilai agar cocok, memvalidasi bentuk nilai yang ada, atau keduanya. Skema adalah alat yang sangat efektif untuk memodelkan validasi atau transformasi nilai yang rumit dan saling berhubungan.

Mari Kita Mulai Dengan Implementasinya

Kita perlu mengembangkan status untuk mempertahankan nilai email dan metode perubahan pegangan untuk menangani perubahan teks dan memperbarui status email saat kita menambahkan TextInputs untuk hal-hal seperti alamat email.

Ini mungkin menakutkan, terutama saat bekerja dengan input dalam jumlah besar.

Di sinilah Formik datang untuk membantu semua pekerjaan yang monoton. Jadi, mari kita lihat bagaimana kita bisa menyelesaikan ini dengan Formik dengan memasukkan form input.

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TextInput,
  Button,
} from 'react-native';
import { Formik } from 'formik';
import * as yup from 'yup';

const loginValidationSchema = yup.object().shape({
  email: yup
    .string()
    .email('Please enter valid email')
    .required('Email Address is Required'),
  password: yup
    .string()
    .min(8, ({ min }) => `Password must be at least ${min} characters`)
    .required('Password is required'),
});

const App = () => {
  return (
    <>
      <SafeAreaView style={styles.container}>
        <Text style={styles.title}>
          React Native Example{'\n'}Login Screen using Formik And Yup{' '}
        </Text>
        <View style={styles.loginContainer}>
          <Formik
            validateOnMount={true}
            validationSchema={loginValidationSchema}
            initialValues={{ email: '', password: '' }}
            onSubmit={(values) => console.log(values)}>
            {({
              handleChange,
              handleBlur,
              handleSubmit,
              values,
              errors,
              touched,
              isValid,
            }) => (
              <>
                <TextInput
                  name="email"
                  placeholder="Email Address"
                  style={styles.textInput}
                  onChangeText={handleChange('email')}
                  onBlur={handleBlur('email')}
                  value={values.email}
                  keyboardType="email-address"
                />
                {errors.email && touched.email && (
                  <Text style={styles.errorText}>{errors.email}</Text>
                )}

                <TextInput
                  name="password"
                  placeholder="Password"
                  style={styles.textInput}
                  onChangeText={handleChange('password')}
                  onBlur={handleBlur('password')}
                  value={values.password}
                  secureTextEntry
                />
                {errors.password && touched.password && (
                  <Text style={styles.errorText}>{errors.password}</Text>
                )}

                <Button
                  onPress={handleSubmit}
                  title="LOGIN"
                  disabled={!isValid || values.email === ''}
                />
              </>
            )}
          </Formik>
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  loginContainer: {
    width: '80%',
    alignItems: 'center',
    padding: 10,
    elevation: 10,
  },
  textInput: {
    height: 40,
    width: '100%',
    margin: 10,
    backgroundColor: 'white',
    borderColor: 'gray',
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: 10,
  },
  title: {
    textAlign: 'center',
    fontSize: 18,
    margin: 24,
    fontWeight: 'bold',
  },
  errorText: {
    fontSize: 10,
    color: 'red',
  },
});

export default App;

Link : https://snack.expo.dev/@rudiahmad/react-native—formik-example