React Native Component Exception - Element Type is invalid: expected string...got undefined

Question

I recently added a component to my project and this error is coming up for some reason. I know it's being exported correctly from the component and imported by App.js correctly. (Exporting as default and importing without {}).

It's also strange that when I change the export of App from exporting in the function declaration to exporting from below with the line "export default App;" the error changes. Normally it tells me "Check the render method of 'ListingEditScreen'." at the bottom of the error. But when I export with the line below the App function declaration, it says, "Check the render method of 'ExpoRoot'."

I am using Expo in this project, but I'm unable to find the ExpoRoot component in the Expo folder.

Here is my component:

import React from "react";
import { StyleSheet } from "react-native";
import * as Yup from "yup";

import {
  AppForm as Form,
  AppFormField as FormField,
  AppFormPicker as Picker,
  SubmitButton,
} from "../components/forms";
import Screen from "../components/Screen";

const validationSchema = Yup.object().shape({
  title: Yup.string().required().min(1).label("Title"),
  price: Yup.number().required().min(1).max(10000).label("Price"),
  description: Yup.string().label("Description"),
  category: Yup.object().required().nullable().label("Category"),
});

const categories = [
  { label: "Furniture", value: 1 },
  { label: "Clothing", value: 2 },
  { label: "Camera", value: 3 },
];

function ListingEditScreen() {
  return (
    <Screen style={styles.container}>
      <Form
        initialValues={{
          title: "",
          price: "",
          description: "",
          category: null,
        }}
        onSubmit={(values) => console.log(values)}
        validationSchema={validationSchema}
      >
        <FormField maxLength={255} name="title" placeholder="Title" />
        <FormField
          keyboardType="numeric"
          maxLength={8}
          name="price"
          placeholder="Price"
        />
        <Picker items={categories} name="category" placeholder="Category" />
        <FormField
          maxLength={255}
          multiline
          name="description"
          numberOfLines={3}
          placeholder="Description"
        />
        <SubmitButton title="Post" />
      </Form>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
});
export default ListingEditScreen;

And here is my current App.js:

import React from "react";
import ListingEditScreen from "./app/screens/ListingEditScreen";

export default function App() {
  return <ListingEditScreen />;
}

Here's a screenshot of the error on iOS simulator:

Any help is greatly greatly appreciated! Thanks.

Answer 1

This error means that you are rendering a component that is undefined. This would throw the same error:

const Example;

function App() {
  return <Example />
}

My guess would be that one of these components is not correctly named or not correctly exported from the forms file:

import {
  AppForm as Form,
  AppFormField as FormField,
  AppFormPicker as Picker,
  SubmitButton,
} from "../components/forms";

For example, if SubmitButton was actually Button, then you would see this error.