2

I'm running into some weird behaviors when trying to implement the Navigators from React-Navigation.

When trying out the simple "hello world" from https://reactnavigation.org/docs/en/hello-react-navigation.html...

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

I get this error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'SceneView'.

The strange part is that while using the StackNavigator (and TabNavigator) give me the Invariant Violation, using a DrawerNavigator does not!

This common fix (removing the braces in the import) gives a new error:

Object is not a function

And the common fix to "Object is not a function" leads me back to where I started (adding braces to the import).

I'm new to React-Native and not sure how to dive deeper into this problem, any help is appreciated!

-----Edit-----

I've downgraded my version of react-navigation to v1.5.5 and the original StackNavigator component works, so perhaps it's a compatibility issue with v2.0.1 and my environment.

Groots
  • 21
  • 3

2 Answers2

3

Check in package.json if you have the right react version for your react-native. For example, 

"react": "16.4.0",
"react-native": "^0.53",
"react-navigation": "^2.0.4",

doesn't work for me, but 

"react": "16.2.0",
"react-native": "^0.53",
"react-navigation": "^2.0.4",

works.

pnucci
  • 31
  • 2
  • not sure why this isn't upvoted more. solved my problem – M1Reeder Jun 25 '18 at 16:03
  • This is the most bizzare bug I have found which wasted 3 hours of my time. I had `"react": "^16.2.0"` in my `package.json` but realised it was resolving to `16.6.3` and was causing this error. Rolling back to `"16.2.0"` fixed this error for me. – Karl Taylor Dec 04 '18 at 11:51
0

I might have found your problem. I think you're trying to follow the docs for the wrong version. I assume you're using V1 of React-Navigation.

You can view your current installed version by running "yarn list react-navigation" in your terminal in the project root.

V1 Docs: https://v1.reactnavigation.org/docs/hello-react-navigation.html

If I use the example from the link above everything works fine. Perhaps you could try that?

Mark

Mark D
  • 31
  • 4
  • Hi Mark, shows me as having -react-navigation@2.0.1 Trying to use the old "StackNavigator" gives me a warning that it is deprecated and to use "createStackNavigator" instead. – Groots May 23 '18 at 14:58