React Native

FormikはReact NativeとReact Native Webと100％互換性があります。ただし、ReactDOMとReact Nativeのフォームとテキスト入力の処理方法の違いにより、いくつかの違いに注意する必要があります。このセクションでは、それらと、ベストプラクティスと考えるものについて説明します。

要点

さらに進む前に、React NativeでFormikを使用する方法の非常に最小限の要点を示し、主要な違いを示します。

1 // Formik x React Native example
2 import React from 'react';
3 import { Button, TextInput, View } from 'react-native';
4 import { Formik } from 'formik';
5 
6 export const MyReactNativeForm = props => (
7   <Formik
8     initialValues={{ email: '' }}
9     onSubmit={values => console.log(values)}
10   >
11     {({ handleChange, handleBlur, handleSubmit, values }) => (
12       <View>
13         <TextInput
14           onChangeText={handleChange('email')}
15           onBlur={handleBlur('email')}
16           value={values.email}
17         />
18         <Button onPress={handleSubmit} title="Submit" />
19       </View>
20     )}
21   </Formik>
22 );

上記のように、React DOMとReact NativeでFormikを使用する場合の顕著な違いは次のとおりです。

1. FormikのhandleSubmitは、HTMLの<form onSubmit={...} />コンポーネントではなく、<Button onPress={...} />に渡されます（React Nativeには<form />要素がないため）。
2. <TextInput />は、コールバックをプロパティに直接割り当てる代わりに、FormikのhandleChange(fieldName)とhandleBlur(fieldName)を使用します。これは、fieldNameをどこかから取得する必要があり、React NativeではWebのように（input name属性を使用して）自動的に取得できないためです。代わりにsetFieldValue(fieldName, value)とsetFieldTouched(fieldName, bool)を使用することもできます。