Formik: View config not found for name form. Make sure to start component names with a capital letter?

[GollyJer]

I'm following the useField example at the bottom of the Formik Tutorial to create custom inputs.

However, I get the error View config not found for name form. Make sure to start component names with a capital letter. when adding the Form component.

Is this maybe not meant to be used with React Native? Here's a super minimal example to show the issue.
https://snack.expo.io/@gollyjer/formik-custom-input
(click on the Android or iOS button at the top right to test on a device emulator).

Here's the code. I realize it won't work as is... I just need it to render without an error.

import * as React from 'react';
import { View, Text, TextInput } from 'react-native';
import { Form, Formik, FormikProps, useField } from 'formik';

const App = () => {
  const MyInput = props => {
    const [field, meta] = useField(props);

    return (
      <TextInput
        {...props}
      />
    );
  };

  return (
    <View style={{ flex: 1 }}>
    <Text>Formik Test</Text>
      <Formik
        initialValues={{ display_name: 'Jeremy' }}
        onSubmit={async values => {
          console.log('submitting');
        }}>
        <Form>
          <MyInput
            name="DisplayName"
          />
        </Form>
      </Formik>
    </View>
  );
};

export default App;

Any help is really appreciated. Thanks! 👍

[coreyar]

<Form/> will try to create a <form /> html element which won't work on react-native.
I modified your code to work based on the react-native example.

Docs:
https://jaredpalmer.com/formik/docs/guides/react-native

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

const MyInput = props => (
      <TextInput
        {...props}
      />
 );

const App = props => (
  <View style={{ flex: 1 }}>
    <Text>Formik Test</Text>
    <Formik
      initialValues={{ display_name: 'Jeremy' }}
      onSubmit={async values => {
        console.log('submitting');
      }}
    >
      {({ handleChange, handleBlur, handleSubmit, values }) => (
        <View>
          <MyInput
            onChangeText={handleChange('display_name')}
            onBlur={handleBlur('display_name')}
            value={values.display_name}
          />
          <Button onPress={handleSubmit} title="Submit" />
          </View>
      )}
    </Formik>
  </View>
);
export default App

[GollyJer]

Super helpful and got me pointed in the right direction. Thanks! 👍