title: How to clear a form input field using Formik in React Native app?
body: <p>I have a React Native app using Formik. I have a component that wraps Formik
  so that I can create forms much easier. My issue is I have search field on
  a screen with a submit button which works fine, but I want to clear the search field when the user clicks button &quot;showAll&quot; which should clear the search field.
  Here is my code, only showing essential parts:</p>
  <pre><code>
  
  This is a app.js 
  &lt;button title=&quot;ShowAll&quot; /&gt;
  
  This is in screen.js
            
             &lt;Form
                initialValues={{ search: &quot;&quot; }}
                resetValues={{ search: &quot;&quot; }}
                onSubmit={handleSubmit}
                onHandleReset={handleReset}
                validationSchema={validationSchema}
                showClearButton={false}
              &gt;
                &lt;FormField
                  autoCorrect={false}
                  icon=&quot;pencil&quot;
                  name=&quot;search&quot;
                  placeholder=&quot;search keywords...&quot;
                  height={30}
                  showClearButton={true}
                  textInputWidth={180}
                /&gt;
                &lt;SubmitButton title=&quot;SEARCH&quot; icon=&quot;search&quot; /&gt;
              &lt;/Form&gt;
  
  
  function Form({
    initialValues,
    onSubmit,
    validationSchema,
    children,
    resetValues,
    onHandleReset,
    showClearButton,
    clearButtonTitle,
    clearButtonIcon,
  }) {
    return (
      &lt;Formik
        initialValues={initialValues}
        onSubmit={onSubmit}
        validationSchema={validationSchema}
        enableReinitialize={true}
      &gt;
        {(props) =&gt; (
          &lt;&gt;
            {showClearButton &amp;&amp; (
              &lt;Button
                title={clearButtonTitle}
                icon={clearButtonIcon}
                onPress={() =&gt; {
                  props.resetForm({ values: resetValues });
                  onHandleReset();
                }}
                color=&quot;heading&quot;
              &gt;&lt;/Button&gt;
            )}
            {children}
          &lt;/&gt;
        )}
      &lt;/Formik&gt;
    );
  }
  
  const FormField = React.forwardRef(
    (
      {
        name,
        width,
        showClearButton = false,
        showLabelAbove = false,
        textInputWidth = 0,
    
        ...otherProps
      },
      ref
    ) =&gt; {
      const { setFieldTouched, setFieldValue, errors, touched, values } =
        useFormikContext();
  
      return (
        &lt;&gt;
          {showLabelAbove &amp;&amp; &lt;Text&gt;{otherProps.placeholder}&lt;/Text&gt;}
          &lt;TextInput
            onBlur={() =&gt; setFieldTouched(name)}
            onChangeText={(text) =&gt; {
              setFieldValue(name, text);
            }}
            value={values[name]}
            width={width}
            {...otherProps}
            showLabelAbove={showLabelAbove}
            showClearButton={showClearButton}
            textInputWidth={textInputWidth}
            onFieldClear={() =&gt; setFieldValue(name, &quot;&quot;)}
            ref={ref}
          /&gt;
          &lt;ErrorMessage error={errors[name]} visible={touched[name]} /&gt;
        &lt;/&gt;
      );
    }
  );
  
  </code></pre>