Formik Kütüphanesi Diğer Özellikleri

Formik kütüphanesinin diğer özelliklerini inceleyecek olursak submit durumunda inputlara tıklayamama ve submit edildikten sonra submit butonunun disabled yapılması ve belirli bir süre beklemeyi (loading) inceleyebiliriz. Bunun için Formik içinde isSubmitting kullanılır. Submit yapıldığında bekleme için de aşağıdaki gibi bir kod kullanılabilir.

onSubmit: async (values) => {
      await new Promise((r) => setTimeout(r, 1000));
      console.log(values);
    },

Formu doldurduk ve input alanlarının resetlenmisini istiyorsak onSubmit içinde bag parametresi kullanılır. Bag parametresinin içinde form submit durumunda kullanılacak fonksiyonlar bulunmaktadır;

resetForm, setErrors, setFieldError, setFieldTouched, setFieldValue, setFormikState, setSubmitting, setTouched, setStatus, setValues, submitForm, validateField, validateForm şeklinde bir kaç örnek verebiliriz.

resetForm un yaptığı şey formu initial state e döndürmektir, formu resetleyecektir.

setErrors un yaptığı şey ise clientside bir validasyon yapıyoruz ama böyle bir email adresi kayıtlı olabilir bu durumu da ancak BackEnd bilebilir bu veri BackEnd e gider ve BackEnd bize geri yanıt döndürür bu email adresi zaten kayıtlı biz de o durumdan sonra ekranda bir uyarı gösterebiliriz. Yani burada da error ataması yapabiliyoruz.

setFieldError spesifik bir field üzerine atama yapmamızı sağlıyor.

setFieldTouched ile herhangi bir fieldi touch edilmiş, ona dokunulmuş, focus olunmuş şeklinde işaretleyebiliriz.

setFieldValue ile herhangi bir field a value ataması yapabiliriz. setFormikState ile FormikState ini değiştirebiliriz.

setSubmitting ile submitting durumunu değiştirebiliriz.

setTouched ile touched durumunu değiştirebiliriz.

setValues ile value ataması yapabiliriz.

submitForm ile formu submit ettirebiliriz.

validateField, validateForm; programatik olarak formu validate edebiliriz yani validasyonlar ne durumda onu kontrol edebiliriz, herhangi bir fieldi veya formun tamamını kontrol ettirebiliriz.

Formik kütüphanesi dışında alternatif olarak react Form kütüphanesi de kullanılabilir. Validasyonlar için yine yup kütüphanesi kullanılabilir. Validasyonlar için farklı bir kütüphane tercih ederseniz joi kullanılabilir.

//src/components/FormWithFormik
import { View, Text, TextInput, StyleSheet, Button } from "react-native";
import React from "react";
import { useFormik } from "formik";
import validationSchema from "./validations";

const FormWithFormik = () => {
  const {
    values,
    errors,
    touched,
    isSubmitting,
    handleSubmit,
    handleChange,
    handleBlur,
  } = useFormik({
    initialValues: {
      username: "",
      email: "",
      password: "",
      passwordConfirm: "",
    },
    onSubmit: async (values, bag) => {
      await new Promise((r) => setTimeout(r, 1000));

      if (values.email === "test@test.com") {
        // return bag.setErrors({ email: "Bu mail adresi zaten kullanılıyor." });
        return bag.setFieldError("email", "Bu mail adresi zaten kullanılıyor.");
      }

      bag.resetForm();

      console.log(values);
      console.log(bag);
    },
    validationSchema,
  });
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Formik Kütüphanesi Diğer Özellikleri</Text>
      <View style={styles.item}>
        <TextInput
          style={styles.input}
          placeholder="username"
          value={values.username}
          onChangeText={handleChange("username")}
          onBlur={handleBlur("username")}
          editable={!isSubmitting}
        />
        {errors.username && touched.username && (
          <Text style={styles.error}>{errors.username}</Text>
        )}
      </View>

      <View style={styles.item}>
        <TextInput
          style={styles.input}
          autoCapitalize="none" //Oto büyük harfle başlamayı kapattık
          keyboardType="email-address" //Eposta formatına göre klavye açacak
          placeholder="e-mail"
          value={values.email}
          onChangeText={handleChange("email")}
          onBlur={handleBlur("email")}
          editable={!isSubmitting}
        />
        {errors.email && touched.email && (
          <Text style={styles.error}>{errors.email}</Text>
        )}
      </View>

      <View style={styles.item}>
        <TextInput
          style={styles.input}
          placeholder="password"
          secureTextEntry
          value={values.password}
          onChangeText={handleChange("password")}
          onBlur={handleBlur("password")}
          editable={!isSubmitting}
        />
        {errors.password && touched.password && (
          <Text style={styles.error}>{errors.password}</Text>
        )}
      </View>

      <View style={styles.item}>
        <TextInput
          style={styles.input}
          placeholder="password confirm"
          secureTextEntry
          value={values.passwordConfirm}
          onChangeText={handleChange("passwordConfirm")}
          onBlur={handleBlur("passwordConfirm")}
          editable={!isSubmitting}
        />
        {errors.passwordConfirm && touched.passwordConfirm && (
          <Text style={styles.error}>{errors.passwordConfirm}</Text>
        )}
      </View>

      <View style={styles.items}>
        <Button
          title="Register"
          onPress={handleSubmit}
          disabled={isSubmitting}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    padding: 20,
  },
  item: {
    marginBottom: 4,
  },
  input: {
    borderWidth: 1,
    borderColor: "#999",
    padding: 10,
    fontSize: 24,
    width: "100%",
  },
  text: {
    color: "#8e43e7",
    marginBottom: 20,
    fontSize: 16,
    fontWeight: "bold",
  },
  error: {
    color: "red",
  },
  items: {
    marginTop: 20,
  },
});

export default FormWithFormik;

//src/components/validations.js
import { object, string, ref } from "yup";

const messages = {
  required: "Bu alan zorunludur.",
  email: "Geçerli bir email girin.",
  min: "En az 5 karakter giriniz.",
};

const validations = object({
  username: string().required(messages.required),
  email: string().email(messages.email).required(messages.required),
  password: string().min(5, messages.min).required(messages.required),
  passwordConfirm: string()
    .oneOf([ref("password")], "Parolalar eşleşmiyor")
    .required(messages.required),
});

export default validations;

//App.js
import { StyleSheet, Text, View } from "react-native";
import FormWithFormik from "./src/components/FormWithFormik";

export default function App() {
  return (
    <View style={styles.container}>
      <FormWithFormik />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});