Formik does not work

[HurrellT]

Describe the bug
Simply, formik doesn’t work with storybook on a project made with RN CLI, no matter the React Native and Formik version.

To Reproduce
Steps to reproduce the behavior:

1. Create a new RN CLI project
2. Install Storybook
3. Install Formik and Yup
4. Make a basic, normal form

Expected behavior
Form showing errors when trying to submit or when entering values that doesn’t meet the validations.
onSubmit function working, etc.

Code snippets

import { Formik } from 'formik';
import React from 'react';
import { Alert, Button, Text, TextInput, View } from 'react-native';
import * as yup from 'yup';

const Form = () => (
  <Formik
    initialValues={{
      name: '',
      email: '',
      password: '',
    }}
    onSubmit={(values) => Alert.alert(JSON.stringify(values))}
    validationSchema={yup.object().shape({
      name: yup.string().required('Please, provide your name!'),
      email: yup.string().email().required(),
      password: yup
        .string()
        .min(4)
        .max(10, 'Password should not excced 10 chars.')
        .required(),
    })}
  >
    {({
      values,
      handleChange,
      errors,
      setFieldTouched,
      touched,
      isValid,
      handleSubmit,
    }) => (
      <View>
        <TextInput
          value={values.name}
          onChangeText={handleChange('name')}
          onBlur={() => setFieldTouched('name')}
          placeholder="Name"
        />
        {touched.name && errors.name && (
          <Text style={{ fontSize: 12, color: '#FF0D10' }}>{errors.name}</Text>
        )}
        <TextInput
          value={values.email}
          onChangeText={handleChange('email')}
          onBlur={() => setFieldTouched('email')}
          placeholder="E-mail"
        />
        {touched.email && errors.email && (
          <Text style={{ fontSize: 12, color: '#FF0D10' }}>{errors.email}</Text>
        )}
        <TextInput
          value={values.password}
          onChangeText={handleChange('password')}
          placeholder="Password"
          onBlur={() => setFieldTouched('password')}
          secureTextEntry={true}
        />
        {touched.password && errors.password && (
          <Text style={{ fontSize: 12, color: '#FF0D10' }}>
            {errors.password}
          </Text>
        )}
        <Button
          color="#3740FE"
          title="Submit"
          disabled={!isValid}
          onPress={handleSubmit}
        />
      </View>
    )}
  </Formik>
);
export default Form;

System:
Environment Info:

System:
OS: macOS 12.2
CPU: (8) arm64 Apple M1
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.2/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Safari: 15.3
npmPackages:
@storybook/addon-actions: ^5.3 => 5.3.21
@storybook/addon-knobs: ^5.3 => 5.3.21
@storybook/addon-links: ^5.3 => 5.3.21
@storybook/addon-ondevice-actions: ^5.3.23 => 5.3.23
@storybook/addon-ondevice-knobs: ^5.3.25 => 5.3.25
@storybook/react-native: ^5.3.25 => 5.3.25
@storybook/react-native-server: ^5.3.23 => 5.3.23

Additional context
No issues when removing Storybook (replacing the index with the shared component)

[dannyhw]

@HurrellT thanks for reporting, I'll look into it when I can.

Are you able to provide a public repo with a reproduction of the issue? That way I could more easily debug it.

[HurrellT]

@HurrellT thanks for reporting, I'll look into it when I can.

Are you able to provide a public repo with a reproduction of the issue? That way I could more easily debug it.

Sure, here's a link https://github.com/HurrellT/formikStorybookTest
Thanks!

[dannyhw]

@HurrellT thanks for providing that! when I have some spare time I will give it a try.

[dannyhw]

@HurrellT this is caused by this bug: #20

You can get around it by patching some of the storybook packages from upstream.

Basically whenever this code is present it breaks all promises

require("core-js/modules/es.promise");

I'll prepare a patch for your project to show how you can get around it.

This has been solved in the 6.0 beta, however I understand if you don't want to upgrade yet.

[dannyhw]

I made a PR to your example that fixes the issue, just run yarn or npm install and it patches the @storybook/addons package to remove the promise polyfill
HurrellT/formikStorybookTest#1

[dannyhw]

Heres the patch for @storybook/addons in case its useful

diff --git a/node_modules/@storybook/addons/dist/index.js b/node_modules/@storybook/addons/dist/index.js
index 589d611..81bc9e7 100644
--- a/node_modules/@storybook/addons/dist/index.js
+++ b/node_modules/@storybook/addons/dist/index.js
@@ -8,8 +8,6 @@ require("core-js/modules/es.object.to-string");
 
 require("core-js/modules/es.object.values");
 
-require("core-js/modules/es.promise");
-
 require("core-js/modules/web.dom-collections.for-each");
 
 Object.defineProperty(exports, "__esModule", {

[HurrellT]

Heres the patch for @storybook/addons in case its useful

diff --git a/node_modules/@storybook/addons/dist/index.js b/node_modules/@storybook/addons/dist/index.js
index 589d611..81bc9e7 100644
--- a/node_modules/@storybook/addons/dist/index.js
+++ b/node_modules/@storybook/addons/dist/index.js
@@ -8,8 +8,6 @@ require("core-js/modules/es.object.to-string");
 
 require("core-js/modules/es.object.values");
 
-require("core-js/modules/es.promise");
-
 require("core-js/modules/web.dom-collections.for-each");
 
 Object.defineProperty(exports, "__esModule", {

Thanks a lot @dannyhw you are a hero. I applied the patch in my main project and it works.

[mayagh1994]

@HurrellT can you tell me how it works with you i tried to add this patch , but get nothing (formik still not work)

[HurrellT]

@HurrellT can you tell me how it works with you i tried to add this patch , but get nothing (formik still not work)

Have you installed patch-package and postinstall-postinstall in your project?
Check this PR HurrellT/formikStorybookTest#1

[EdzonBolivar11]

I did the same, but is not working yet