NavigatorIOS Error - React Native

Question

React Native

When I try to go another page i keep getting this error

goToMenu(){
 this.props.navigator.push({
  component: Menu,
  title: 'Main Menu',
  passProps: {navigator: this.props.navigator},
})
}

<View style={styles.mainContainer}>
 <TouchableHighlight
  style={styles.menuButton}
  onPress={this.goToMenu.bind(this)}>
  <Text style={styles.buttonText}> Go To Menu </Text>
 </TouchableHighlight>
</View>

element type is invalid expected a string (for built-in components) or a class/function for composite components but got object check render method of 'navigatorios'

something wrong with `Menu` component, can you attach its code? — Ivan Chernykh, Mar 02 '16 at 06:55

score 0 · Answer 1 · edited May 23 '17 at 12:01

This is a pretty common error. It typically means there is an issue with the component you are importing. Check you are exporting Menu and importing it properly (Is the relative filepath correct). If the file path is correct...

Default export

export default () => (
     ...
);

Then import like this

import Menu from 'relativeFilePath'

Named export

Or if the file Menu is in has multiple named exports e.g.

export const Menu ...
export const SomeOtherComponent ...

You will have to deconstruct the import and match the name...

import {Menu} from 'relativeFilePath'

See more here ES6+ javascript module export options

If this does not work, the issue is with the Menu component you are trying to navigate to.

NavigatorIOS Error - React Native

1 Answers1