Check the render method of `App`.

[smemamian]

hi

I dont know why I got this error message:

Invariant Violation: 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 (at View.js:71)
    in View (at App.js:53)
    in App (created by AwakeInDevApp)
    in RCTView (at View.js:71)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:5103:6 in createFiberFromElement
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:6638:14 in createChild
- ... 28 more stack frames from framework internals

App.js:

import React, { Component } from 'react'
import { Text, View, StyleSheet, Image } from 'react-native'
import {
  BottomNavigation,
  IconTab,
  Badge
} from 'react-native-material-bottom-navigation'

export default class App extends Component {
  state = {
    activeTab: 'games'
  }
  tabs = [
      {
        key: 'games',
        icon: 'gamepad-variant',
        label: 'Games',
        barColor: '#388E3C',
        pressColor: 'rgba(255, 255, 255, 0.16)'
      },
      {
        key: 'movies-tv',
        icon: 'movie',
        label: 'Movies & TV',
        barColor: '#B71C1C',
        pressColor: 'rgba(255, 255, 255, 0.16)'
      },
      {
        key: 'music',
        icon: 'music-note',
        label: 'Music',
        barColor: '#E64A19',
        pressColor: 'rgba(255, 255, 255, 0.16)'
      }
    ]

    renderIcon = icon => ({ isActive }) => (
      <Icon size={24} color="white" name={icon} />
    )

    renderTab = ({ tab, isActive }) => (
      <FullTab
        isActive={isActive}
        key={tab.key}
        label={tab.label}
        renderIcon={this.renderIcon(tab.icon)}
      />
    )

  render() {

    return (
      <View style={{ flex: 1 }}>
            <View style={{ flex: 1 }}>
              <Text>masoud</Text>
            </View>
            <BottomNavigation
              onTabPress={newTab => this.setState({ activeTab: newTab.key })}
              renderTab={this.renderTab}
              tabs={this.tabs}
            />
     </View>
    )
  }
}

[timomeh]

BottomNavigation is the default export. You need to write:

import BottomNavigation, {
  IconTab,
  Badge
} from 'react-native-material-bottom-navigation'

[smemamian]

I changed my code but I got the same error:

Invariant Violation: 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 `BackgroundDecorator`.

This error is located at:
    in BackgroundDecorator (at BottomNavigation.js:130)
    in RCTView (at View.js:71)
    in View (at BottomNavigation.js:129)
    in BottomNavigation (at App.js:57)
    in RCTView (at View.js:71)
    in View (at App.js:53)
    in App (created by AwakeInDevApp)
    in RCTView (at View.js:71)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:5103:6 in createFiberFromElement
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:7379:8 in reconcileSingleElement
- ... 28 more stack frames from framework internals

[timomeh]

There are more issues with your Code example:

• You're using <Icon />, but you don't import a Component named Icon
• You're using <FullTab />, but you're importing IconTab

If you fix those issues in your imports, everything works fine: https://snack.expo.io/rJCFIYLzm

import React, { Component } from 'react'
import { Text, View, StyleSheet, Image } from 'react-native'
import BottomNavigation, {
  FullTab,
  Badge
} from 'react-native-material-bottom-navigation'
import Icon from '@expo/vector-icons/MaterialCommunityIcons'

[smemamian]

I copy/paste your code but I got the same error:

import React, { Component } from 'react'
import { Text, View, StyleSheet, Image } from 'react-native'
import BottomNavigation, {
  FullTab,
  Badge
} from 'react-native-material-bottom-navigation'
import Icon from '@expo/vector-icons/MaterialCommunityIcons'

export default class App extends Component {
  state = {
    activeTab: 'games'
  }
  tabs = [
      {
        key: 'games',
        icon: 'gamepad-variant',
        label: 'Games',
        barColor: '#388E3C',
        pressColor: 'rgba(255, 255, 255, 0.16)'
      },
      {
        key: 'movies-tv',
        icon: 'movie',
        label: 'Movies & TV',
        barColor: '#B71C1C',
        pressColor: 'rgba(255, 255, 255, 0.16)'
      },
      {
        key: 'music',
        icon: 'music-note',
        label: 'Music',
        barColor: '#E64A19',
        pressColor: 'rgba(255, 255, 255, 0.16)'
      }
    ]

    renderIcon = icon => ({ isActive }) => (
      <Icon size={24} color="white" name={icon} />
    )

    renderTab = ({ tab, isActive }) => (
      <FullTab
        isActive={isActive}
        key={tab.key}
        label={tab.label}
        renderIcon={this.renderIcon(tab.icon)}
      />
    )
  render() {

    return (
      <View style={{ flex: 1 }}>
            <View style={{ flex: 1 }}>
              <Text>masoud</Text>
            </View>
            <BottomNavigation
              onTabPress={newTab => this.setState({ activeTab: newTab.key })}
              renderTab={this.renderTab}
              tabs={this.tabs}
            />
     </View>
    )
  }
}

[timomeh]

Is it really the exact same error output? Because the two errors you posted above were different. Could you please post the current error once again, just to be sure?

I can run the code you posted without any errors. You should be able to do the same using the expo snack I posted (together with the Expo app).

[smemamian]

[smemamian]

I'm using create-react-native-app. I just installed it after that I installed this library.

[timomeh]

Since the code works as expected and without any errors in expo snack, it seems to be caused by your local environment (react-native version, expo version, yarn/npm versions). You could also simply try deleting the build cache from expo.

[anandh-pga]

check the render method of 'MaterialTopTabView', i dont know what was the error it is in react native android

[timomeh]

@anandh-pga MaterialTopTabView is not a part of this library. It's part of react-navigation.

[cor1234]

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import React, { Component } from 'react' import {useState} from "react"; import Card from './components/card/Card'; import Navbar from './components/navbar/Navbar' import './App.css' const App = () => { const [username, setUsername] = useState(""); const [user, setUser] = useState(""); console.log(user) return (

{user ? ( <> ) : (

Chat App

setUsername(e.target.value)} /> setUser(username)}>Login

)}

) }

export default App

import React from 'react'

const Navbar = () => { return (

Navbar

) }

export default Navbar

why I am getting error