Add a getFieldValueSetter props to avoid React Native boilerplate

Bug, Feature, or Question?

Feature

Current Behavior

To use formik properly with React Native we need to define a custom Component and use setFieldValue in a wrapping function (to avoid arrow functions). This is a lot of boilerplate.

Cf https://github.com/jaredpalmer/formik#avoiding-new-functions-in-render

Desired Behavior

Enable this use of formik:

// Formik x React Native example
import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { withFormik } from 'formik';

const enhancer = withFormik({
  /*...*/
});

const MyReactNativeForm = props => (
  <View>
    <TextInput
      onChangeText={this.props.getFieldValueSetter('email')}
      value={props.values.email}
    />
    <Button onPress={props.handleSubmit} title="Submit" /> //
  </View>
);

export default enhancer(MyReactNativeForm);

Suggested Solutions

withFormik could pass a new prop called getFieldValueSetter to the React component. This would be a function that takes a field name and return a function, a value setter for this field. A setter would be created during the first call and saved in a cache map by formik. Next calls would return the cached function. It would be something like that:

getFieldValueSetter = (fieldName) => {
    if (!this.valueSetterCacheMap) valueSetterCacheMap = {};
    return valueSetterCacheMap[fieldName] || (valueSetterCacheMap[fieldName] = (value) => {
        this.setFieldValue(fieldName, value);
    });
}

Doc should be updated.

Info

• Formik Version: not relevant
• OS: not relevant
• Node Version: not relevant
• Package Manager and version: not relevant

[jaredpalmer]

getFieldValueSetter is pretty long to type, but very explicit.

i wonder if we just overload handleChange and handleBlur like this:

handleChange = (maybeStringOrEvent: 'string' | React.ChangeEvent<any>) => {
  const actualHandleChange = (e: React.ChangeEvent<any>) => {
    // our exisitng fn as it is now
  }

  if (isString(maybeStringOrEvent)) {
    // we could cache these handlers too by key like Preact's linkState does for perf boost
    if (this.handleCache[maybeStringOrEvent]) {
      return this.handleCache[maybeStringOrEvent];
    } else {
      this.handleCache[maybeStringOrEvent] = (e: React.ChangeEvent<any>) => actualHandleChange(e);
      return this.handleCache[maybeStringOrEvent]
    }
  } else {
    actualHandleChange(e)
  }
}```

[stale[bot]]

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