Formik: Featuee Request: <Field/> Component react-native support

[n1ru4l]

Bug, Feature, or Question?

Feature

Current Behavior

It seems like the current <Field/> component does not support react-native. I need per field validation for things like checking if a login is available or an email is valid (which both do network requests).

Desired Behavior

The render prop object also has the properties setFieldTouched and setFieldValue which trigger the validate function declared on the <Field /> component.

Additional Information

---

• Formik Version: 0.11.11
• React Version: 16.2.0
• TypeScript Version: -
• CodeSandbox Link: -
• OS: macOS
• Node Version: v8.9.4
• Package Manager and Version: [email protected]

[jaredpalmer]

My plan is to move everything into a monorepo this week and then begin formik native which will contain exactly this component

[n1ru4l]

Awesome! Looking forward to migrating my forms to formik. 😇

[hkung77]

Is this still a thing? Progress?

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[igimanaloto]

Hallo! Just checking if there are still plans to support React Native. Thanks!

[M1chaelChen]

I'm using formik": "^2.0.1" which still doesnt' support the <Field /> component in React Native.
And then I decide to build my own using the useField() and useFormikContext() hooks:

const FormField = ({ label, component: Field, ...rest }) => {
  const [field, meta] = useField(rest);
  const { handleChange, handleBlur, setFieldTouched } = useFormikContext();

  const fieldName = field.name;

  return (
    <Container>
      {label && <Title>{label}</Title>}
      <Field
        {...field}
        {...rest}
        onChange={handleChange(fieldName)}
        onBlur={handleBlur(fieldName)}
        onTouch={() => setFieldTouched(fieldName)}
      />
      {meta.touched && meta.error ? <Text>{meta.error}</Text> : null}
    </Container>
  );
};

FormField.propTypes = {
  label: string.isRequired,
  component: oneOfType([node, elementType])
};

FormField.defaultProps = {
  component: Input
};

And then you can use it just like the <Field /> component:
<FormField label="Email" name="email" />

It might not be perfect but works pretty well for me so far.