In React Native App, I Got the Error: Element type is invalid: expected a string (for built-in components) ... Check the render method of `App`?

Question

today while working on react native project I was trying to import SearchBar from react-native-paper package but this was giving me this weird error which I'm not able to resolve:

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 `App`.

here is my app.js :

import React from "react";
import { StatusBar as ExpoStatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, SafeAreaView, StatusBar } from "react-native";
import { SearchBar } from "react-native-paper";

export default function App() {
  return (
    <>
      <SafeAreaView style={styles.container}>
        <View style={styles.search}>
          <Text>Search</Text>
          <SearchBar />
        </View>
        <View style={styles.list}>
          <Text style={styles.text}>List</Text>
        </View>
      </SafeAreaView>
      <ExpoStatusBar style="auto" />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: StatusBar.currentHeight,
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },

  search: {
    padding: 16,
    backgroundColor: "green",
  },

  list: {
    flex: 1,
    padding: 16,
    backgroundColor: "blue",
  },

  text: {
    color: "white",
  },
});

error says that issue is with import/export, but I don't see any issue with that, please help.

complete error looks like this:

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 `App`.

This error is located at:
    in RCTView (created by View)
    in View (created by App)
    in RCTView (created by View)
    in View
    in SafeAreaView (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
at node_modules\react-native\Libraries\Core\ReactFiberErrorDialog.js:43:2 in showErrorDialog
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15792:34 in logCapturedError   
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15884:20 in update.callback    
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7199:2 in callCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7220:20 in commitUpdateQueue   
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16632:25 in commitLifeCycles   
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19216:22 in commitLayoutEffectsat node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:93:4 in invokeGuardedCallbackProd
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:318:2 in invokeGuardedCallback 
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18952:29 in commitRootImpl     
at node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18791:17 in commitRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18192:12 in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5911:33 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5906:23 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5893:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18244:28 in flushSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20353:13 in scheduleRefresh    
at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:218:8 in mountedRoots.forEach$argument_0
at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:210:4 in performReactRefresh
at node_modules\react-native\Libraries\Core\setUpReactRefresh.js:43:6 in Refresh.performReactRefresh
at node_modules\metro-runtime\src\polyfills\require.js:655:10 in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:379:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

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 the render method of `App`.
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

and much more....

My package.json is:

{
  "name": "mealstogo",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint . --ext .js"
  },
  "dependencies": {
    "@babel/eslint-parser": "^7.16.5",
    "eslint-plugin-flowtype": "^8.0.3",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-paper": "^4.11.2",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@react-native-community/eslint-config": "^3.0.1",
    "eslint": "^8.7.0",
    "prettier": "^2.5.1"
  },
  "private": true
}

my instructor said to use that. thats shorthand for the . Is that the thing creating problem? — And4Web, Jan 20 '22 at 08:54
read here https://callstack.github.io/react-native-paper/searchbar.html — Alen.Toma, Jan 20 '22 at 09:03

score 1 · Answer 1 · answered Jan 20 '22 at 08:54

1

You are trying to destruct the import, but it seems like you don't have to do it.

If you take a look at the source code of SearchBar on Github, at the bottom of the file you can see export default <...>

It means that

import { SearchBar } from "react-native-paper";

may become

import SearchBar from "react-native-paper";

See this other Stack Overflow issue for more detail.

answered Jan 20 '22 at 08:54

clementlize

94
8

It didn't work. could you please tell what's that thing in the error: "Check the render method of `App`"? – And4Web Jan 20 '22 at 08:59
I think this message tells you to check what the `App` component returns. You are using a functional component, but if you used class components you would have had a `render()` method with your `return()` function inside – clementlize Jan 20 '22 at 09:05
Maybe you should try to add the `` tags around your app. For example ``. See [the doc](https://callstack.github.io/react-native-paper/getting-started.html) – clementlize Jan 20 '22 at 09:11

In React Native App, I Got the Error: Element type is invalid: expected a string (for built-in components) ... Check the render method of `App`?

1 Answers1

Linked