# React Native Element Type Invalid Error: Causes and Fix

> Fix the React Native element type invalid error by checking that default versus named exports match how the component is imported into the parent file

**URL:** https://sentry.io/answers/react-element-type-invalid-expected-string/

---

## The Problem

You have a React Native component that imports [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) such as React components from another file, for example, a component called `SignInScreen`. When you run the application, you get these errors in your browser dev tools console:

```
...\SignInScreen.js:16 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at SignInScreen.js:16.
```

```
...\node_modules\react-dom\cjs\react-dom.development.js:28441 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SignInScreen`.
```

As the error messages imply, the error may be caused by not exporting an imported component or mixing up default and named imports. The `SignInScreen` component tried to render an imported component that was undefined.

## The Solution

First, check to make sure that the imported component is exported. If it is then check that the imported component is exported and imported correctly.

A file can only have one default export:

```javascript
export default function CustomInput() {
  ...
}
```

You can import a default export with any name:

```javascript
import AnotherName from "CustomInput";
```

If you need to export multiple values from a file, you should use a named export:

```javascript
export const createFunction = (input) => { }
export const arrayValues = [1, 2, 3, 4, 5];
```

When you import a named export, you need to import it using the exact export name:

```javascript
import { createFunction } from "helpers";
```

If you want to rename a named export when you import it, use the `as` keyword:

```javascript
import { createFunction as createFunctionHelper } from "helpers";
```

This may be useful to avoid naming conflicts.

For example, you might have a `SignInScreen` component such as the following:

```javascript
import React from "react";
import { View } from "react-native";
import CustomInput from "./CustomInput";

const SignInScreen = () => {
  return (
    <View>
      <CustomInput />
    </View>
  );
};

export default SignInScreen;
```

If the `CustomInput` component is a default export:

```javascript
import { TextInput } from "react-native-web";

export default function CustomInput() {
  return <TextInput defaultValue="You can type in me" />;
}
```

Import the `CustomInput` component into the `SignInScreen` component without adding curly braces around the imported component:

```javascript
import CustomInput from "./CustomInput";
```

Suppose the `CustomInput` component is a named export:

```javascript
import { TextInput } from "react-native-web";

export function CustomInput() {
  return <TextInput defaultValue="You can type in me" />;
}
```

In this case, import the `CustomInput` component into the `SignInScreen` component with curly braces around the imported component:

```javascript
import { CustomInput } from "./CustomInput";
```

---

*Source: [sentry.io/answers/react-element-type-invalid-expected-string/](https://sentry.io/answers/react-element-type-invalid-expected-string/)*