Can't run the sample code - Element type is invalid: expected a string or a class/function but got: object.

[izotx]

Not sure how to proceed, and i know it's simple to solve it. The sample code in the readme is using to 'Menu', I copied the file to my folder but I am getting an error specified in the title.

import Tabs from 'react-native-tabs';

// require('./Menu')
import Menu from './Menu';

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';



class ContentView extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  }
}

class Application extends React.Component {

  onMenuItemSelected = item =>
    this.setState({
      isOpen: false,
      selectedItem: item,
    });


  render() {
    var menu = <Menu onItemSelected={this.onMenuItemSelected} />;
    // const menu = <Menu onItemSelected={this.onMenuItemSelected}/>;

    console.log("MENU");
    console.log(menu);

    return (
      <SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>
    );
  }
}

AppRegistry.registerComponent('SummerSityReact1', () => Application);

[Elgon2408]

i have same problem

[joshbg2k]

+1

[webbipage]

Try to change

“class Application extends React.Component”

to

“export default class Application extends React.Component”

[joshbg2k]

I solved my problem. It was a mini odyssey, but I can broadly explain my problem and solution, which didn't have anything to do with how I was declaring the menu component (I was doing that correctly):

In my index.ios.js, my navigator initialRoute was pointing to my menu wrapper component. The menu wrapper component navigator's initialRoute in turn was pointing to my content component that I wanted to render. So I removed the separate menu wrapper and moved that functionality into index.ios.js. Then it just worked. I wish I had more detail about precisely what I did, but making my navigator routing more concise worked for me. Not sure why all of a sudden making that change would cause the menu element to be correctly interpreted though.

[ghost]

Same Issue...

[ghost]

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Y ou likely forgot to export your component from the file it's defined in.

[Linshiqi]

use "import SideMenu from 'react-native-side-menu'" , not "const SideMenu = require('react-native-side-menu')" work for me

[ghost]

I was using 'export class' (based off of some starter code I didn't write) on the component that held my menu contents and getting this error. Changed it to 'export default class' and it worked.

[danleveille]

@Linshiqi's solution solved it for me. Thanks!

[iamthuypham]

The sample code did not mention where the Menu comes from.

What I changed:

const SideMenu ... to import SideMenu ... and

...
const menu = <Menu navigator={navigator};    
    return (
      <SideMenu menu={menu}>
...

to

...
return (
      <SideMenu menu={<navigator />} /> 
...

(assumed your navigator is a component)

[nimahkh]

same errro

[scgough]

@Linshiqi 's fix solved this for me. Just wondering why this worked though....just so I can learn from it!

[Cookizza]

If using class components and this configuration of the side menu you need to import it with:

import SideMenu from 'react-native-side-menu'

Notice this is importing the whole thing, not a named export (no curly brackets).