replaced redux-form with formik

Author: mikhailshvets

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "0.18.0",
+    "formik": "^1.5.8",
     "prop-types": "15.7.2",
     "react": "16.8.3",
     "react-native": "0.59.8",
@@ -25,9 +26,9 @@
     "react-redux": "7.1.1",
     "redux": "4.0.4",
     "redux-act": "1.7.7",
-    "redux-form": "8.2.6",
     "redux-persist": "6.0.0",
-    "redux-saga": "1.1.1"
+    "redux-saga": "1.1.1",
+    "yup": "^0.27.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",

src/components/AuthFormInput/index.js

@@ -9,57 +9,64 @@ import styles from './styles';
 
 const FormInput = (props) => {
   const {
-    input,
     containerStyle,
     inputContainerStyle,
-    meta: { error, touched },
     inlineImage,
+    name,
+    handleChange,
+    handleBlur,
+    errors,
+    touched,
+    value,
     ...inputProps
   } = props;
 
+  const hasError = touched[name] && errors[name];
+
   const renderError = () => {
-    if (touched && error) {
-      return <DefaultText>{error}</DefaultText>;
+    if (hasError) {
+      return <DefaultText>{errors[name]}</DefaultText>;
     }
     return null;
   };
 
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View
         style={[
           styles.inputContainer,
           inputContainerStyle,
-          (error && touched) ? styles.errorInput : null,
+          (hasError) ? styles.errorInput : null,
         ]}
       >
         <DefaultInput
           style={styles.input}
           {...inputProps}
-          onChangeText={input.onChange}
-          onBlur={input.onBlur}
-          onFocus={input.onFocus}
-          value={input.value}
+          onChangeText={handleChange(name)}
+          onBlur={handleBlur(name)}
+          value={inputProps.value}
           />
       </View>
       <View style={styles.errorContainer}>
-        {
-          renderError()
-        }
+        {renderError()}
       </View>
     </View>
   );
 };
 
 FormInput.propTypes = {
+  ...DefaultInput.propTypes,
   input: PropTypes.object,
   containerStyle: PropTypes.any,
-  meta: PropTypes.shape({
-    touched: PropTypes.bool,
-    error: PropTypes.any,
-  }),
   inlineImage: PropTypes.any,
   inputContainerStyle: PropTypes.any,
+  name: PropTypes.string.isRequired,
+  handleChange: PropTypes.func,
+  handleBlur: PropTypes.func,
+  errors: PropTypes.object,
+  touched: PropTypes.object,
+  value: DefaultInput.propTypes.value,
 };
 
 export default FormInput;

src/components/DefaultInput/index.js

@@ -18,6 +18,7 @@ const DefaultInput = ({ inputRef, style, ...rest }) => (
 );
 
 DefaultInput.propTypes = {
+  ...TextInput.propTypes,
   inputRef: PropTypes.any,
   style: PropTypes.any,
 };

src/redux/reducers/index.js

@@ -1,10 +1,8 @@
 import { combineReducers } from 'redux';
-import { reducer as form } from 'redux-form';
 import nav from '../../navigation/reducer';
 import auth from './auth';
 
 const reducer = combineReducers({
-  form,
   nav,
   auth,
 });

src/screens/SignInScreen/FormProvider.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import { object, string } from 'yup';
+
+const SignInSchema = object().shape({
+  email: string()
+    .email('Invalid email')
+    .required('Required'),
+  password: string().required('Required'),
+});
+
+const INITIAL_SIGN_IN_VALUES = {
+  email: '',
+  password: '',
+};
+
+const FormProvider = ({ children, onSubmit }) => {
+  /* :: (object, object) -> Promise<void> */
+  const handleSignIn = async (formData, actions) => {
+    try {
+      onSubmit(formData);
+    } catch (error) {
+      actions.resetForm();
+      actions.setFieldValue('email', formData.email);
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={{ ...INITIAL_SIGN_IN_VALUES }}
+      validationSchema={SignInSchema}
+      onSubmit={handleSignIn}
+    >
+      {children}
+    </Formik>
+  );
+};
+
+FormProvider.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+};
+
+export default FormProvider;

src/screens/SignInScreen/SignIn.js

@@ -1,22 +1,13 @@
 import React, { useRef } from 'react';
-import { View, Keyboard } from 'react-native';
-import { reduxForm, Field } from 'redux-form';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
-
 import KeyboardAvoidingWrapper from '../../components/KeyboardAvoidingWrapper';
 import FormInput from '../../components/AuthFormInput';
 import DefaultButton from '../../components/DefaultButton';
 import DefaultText from '../../components/DefaultText';
-
-import validate from '../../validators/auth-validator';
 import styles from './styles';
 
-const SignIn = ({ handleSubmit }) => {
-  const submit = (data) => {
-    Keyboard.dismiss();
-    handleSubmit(data);
-  };
-
+const SignIn = ({ handleSubmit, values, ...props }) => {
   const renderTitle = () => (
     <DefaultText
       large
@@ -33,31 +24,33 @@ const SignIn = ({ handleSubmit }) => {
     <View style={{ flex: 1 }}>
       <KeyboardAvoidingWrapper>
         { renderTitle() }
-        <Field
-          component={FormInput}
-          placeholder={'EMAIL'}
+        <FormInput
+          placeholder='EMAIL'
           name='email'
           autoCapitalize='none'
           returnKeyType='next'
           onSubmitEditing={() => passwordRef.current.focus()}
           keyboardType='email-address'
           maxLength={40}
+          value={values.email}
+          {...props}
         />
-        <Field
-          component={FormInput}
-          placeholder={'PASSWORD'}
+        <FormInput
+          placeholder='PASSWORD'
           containerStyle={styles.lastInput}
           name='password'
           autoCapitalize='none'
           returnKeyType='done'
           inputRef={passwordRef}
           secureTextEntry
-          onSubmitEditing={submit}
+          onSubmitEditing={handleSubmit}
           maxLength={20}
+          value={values.password}
+          {...props}
         />
         <DefaultButton
           title={'Sign  in'}
-          onPress={submit}
+          onPress={handleSubmit}
         />
       </KeyboardAvoidingWrapper>
     </View>
@@ -66,6 +59,7 @@ const SignIn = ({ handleSubmit }) => {
 
 SignIn.propTypes = {
   handleSubmit: PropTypes.func,
+  values: PropTypes.object,
 };
 
-export default reduxForm({ form: 'signin', validate })(SignIn);
+export default SignIn;

src/screens/SignInScreen/index.js

@@ -1,16 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Keyboard } from 'react-native';
 
+import FormProvider from './FormProvider';
 import SignIn from './SignIn';
 import { signInAction } from '../../redux/actions';
 
-const LoginScreen = ({ signIn, navigation }) => (
-  <SignIn
-    onSubmit={signIn}
-    onGoToSignUpPress={() => navigation.replace('SignUpScreen')}
-  />
-);
+const LoginScreen = ({ signIn, navigation }) => {
+  const handleSubmit = (data) => {
+    Keyboard.dismiss();
+    signIn(data);
+  };
+
+  return (
+    <FormProvider onSubmit={handleSubmit}>
+      {props => (
+          <SignIn
+            onGoToSignUpPress={() => navigation.replace('SignUpScreen')}
+            {...props}
+          />
+      )}
+    </FormProvider>
+  );
+};
 
 LoginScreen.propTypes = {
   navigation: PropTypes.object,

src/screens/SignUpScreen/FormProvider.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import { object, string } from 'yup';
+
+const SignUpSchema = object().shape({
+  firstName: string().required('Required'),
+  lastName: string().required('Required'),
+  email: string()
+    .email('Invalid email')
+    .required('Required'),
+  password: string().required('Required'),
+});
+
+const INITIAL_SIGN_UP_VALUES = {
+  firstName: '',
+  lastName: '',
+  email: '',
+  password: '',
+};
+
+const FormProvider = ({ children, onSubmit }) => {
+  /* :: (object, object) -> Promise<void> */
+  const handleSignIn = async (formData, actions) => {
+    try {
+      onSubmit(formData);
+    } catch (error) {
+      actions.resetForm();
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={{ ...INITIAL_SIGN_UP_VALUES }}
+      validationSchema={SignUpSchema}
+      onSubmit={handleSignIn}
+    >
+      {children}
+    </Formik>
+  );
+};
+
+FormProvider.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+};
+
+export default FormProvider;