LoginForm.js

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Item, Input } from 'native-base';
import { Formik } from 'formik';
import { handleTextInput, withNextInputAutoFocusForm, withNextInputAutoFocusInput } from 'react-native-formik';
import { compose } from 'recompose';
import * as Yup from 'yup';
import { formatUsername, isEmailValid, isPhoneValid } from 'yeppik-common/lib/utils';

import SubmitButton from '../common/SubmitButton';
import { Text, getTranslatedLabel } from '../common/translated';

const styles = {
  btnSubmit: {
    marginTop: 30,
  },
  textField: {
    inputColorPlaceholder: '#08415a',
  },
};

const MyInput = compose(handleTextInput, withNextInputAutoFocusInput)(Input);

const MyForm = withNextInputAutoFocusForm(Form);

const LoginForm = ({ country, onSubmit }) => {
  const validationSchema = Yup.object().shape({
    emailOrPhone: Yup.string()
      .required()
      .test('username', 'Invalid username', value => isEmailValid(value) || isPhoneValid(value, country)),
    password: Yup.string()
      .required()
      .min(6),
  });

  return (
    <Formik
      onSubmit={onSubmit}
      validationSchema={validationSchema}
      validateOnBlur={true}
      validateOnChange={true}
      render={({
        errors,
        handleSubmit,
        isSubmitting,
        isValidating,
      }) => (
        <MyForm>
          <Item floatingLabel error={Boolean(errors.emailOrPhone)}>
            {getTranslatedLabel({ label: 'Email or Phone' })}
            <MyInput
              name="emailOrPhone"
              style={styles.textField}
              value={value => formatUsername(value, country)}
            />
          </Item>
          <Item floatingLabel error={Boolean(errors.password)}>
            {getTranslatedLabel({ label: 'Password' })}
            <MyInput
              name="password"
              secureTextEntry
              style={styles.textField}
            />
          </Item>
          <SubmitButton
            block
            disabled={isSubmitting || isValidating}
            onPress={handleSubmit}
            primary
            submitting={isSubmitting}
            style={styles.btnSubmit}
          >
            <Text>Sign in</Text>
          </SubmitButton>
        </MyForm>
      )}
    />
  );
};

LoginForm.propTypes = {
  country: PropTypes.string.isRequired,
  onSubmit: PropTypes.func.isRequired,
};

export { LoginForm as UnconnectedLoginForm };

export default LoginForm;