Introduction

React Native n’a pas d’élément <form> natif, et la gestion de l’état de plusieurs entrées peut être verbeuse. C’est pourquoi je vais vous montrer une façon simple de gérer les formulaires en utilisant Formik et Yup.

Prérequis

  • Expo CLI installé
  • Connaissances de base de React Native
  • Utilisez <PaperProvider> de React Native Paper

Configuration

npx create-expo-app my-formik-form
cd my-formik-form
npm install formik react-native-paper yup

Comment fonctionne Formik avec React Native

1. Importer les dépendances

app/components/MyForm.tsx

import { Formik } from "formik"
import { View } from "react-native"
import { TextInput, Text, Button, HelperText } from "react-native-paper"
import * as Yup from "yup"

2. Envelopper votre formulaire avec Formik

export default function MyForm() {
  return (
    <Formik
      initialValues={{ email: "", password: "" }}
      onSubmit={values => console.log(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values }) => (
        <View>
          <TextInput
            label="Email"
            value={values.email}
            onChangeText={handleChange("email")}
            onBlur={handleBlur("email")}
          />
          <Button onPress={handleSubmit}>Se connecter</Button>
        </View>
      )}
    </Formik>
  )
}

Validation avec Yup

const SignupSchema = Yup.object().shape({
  email: Yup.string().email("Email invalide").required("Obligatoire"),
  password: Yup.string().min(6, "Trop court").required("Obligatoire")
})

Conclusion

Formik simplifie la gestion de l’état des formulaires et Yup fournit un système de validation puissant. Vous êtes maintenant prêt à créer des formulaires complexes en toute simplicité !