Einleitung

React Native hat kein natives <form>-Element, und die Verwaltung des Zustands mehrerer Eingaben kann mühsam sein. Deshalb zeige ich Ihnen einen einfachen Weg, Formulare mit Formik und Yup zu handhaben.

Voraussetzungen

  • Expo CLI installiert
  • Grundkenntnisse in React Native
  • Wrap deine App mit React Native Papers <PaperProvider>

Setup

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

Wie Formik mit React Native funktioniert

1. Abhängigkeiten importieren

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. Das Formular mit Formik umschließen

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

Validierung mit Yup

const SignupSchema = Yup.object().shape({
  email: Yup.string().email("Ungültige E-Mail").required("Erforderlich"),
  password: Yup.string().min(6, "Zu kurz").required("Erforderlich")
})

Fazit

Formik vereinfacht die Zustandsverwaltung von Formularen und Yup bietet ein leistungsstarkes Validierungssystem. Jetzt sind Sie bereit, komplexe Formulare mit Leichtigkeit zu erstellen!