Invariant Violation: requireNativeComponent: "NVNavigationBar" was not found in the UI Manager

I am evaluating navigation-react-native as the routing solution for a simple app that i am creating.

I am on a fresh install of React Native and the navigation libraries. I get the following invariant violation error when i try to run the redux example on the IoS simulator.

my package.json has the following content:

{
  "name": "menunativenavigation",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "navigation": "^5.2.0",
    "navigation-react": "^4.1.1",
    "navigation-react-native": "^5.2.1",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

I am using Visual Studio Code and the normal run command react-native run-ios. I am trying to mirror exactly the redux example provided in the repo.

My App.js file:

import React from 'react';
import {StateNavigator} from 'navigation';
import {NavigationHandler} from 'navigation-react';
import {NavigationStack} from 'navigation-react-native';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reducer from './reducer';
import People from './People';
import Person from './Person';

const stateNavigator = new StateNavigator([
  {key: 'people'},
  {key: 'person', trackCrumbTrail: true},
]);

const {people, person} = stateNavigator.states;
people.renderScene = () => <People />;
person.renderScene = ({id}) => <Person id={id} />;

const store = createStore(reducer);
stateNavigator.navigate('people');
export default () => (
  <Provider store={store}>
    <NavigationHandler stateNavigator={stateNavigator}>
      <NavigationStack />
    </NavigationHandler>
  </Provider>
);

my index.js:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

The People.js file:

import React from 'react';
import {ScrollView, FlatList} from 'react-native';
import {NavigationBarIOS} from 'navigation-react-native';
import {connect} from 'react-redux';
import PersonItem from './PersonItem';

const mapStateToProps = ({people: {allIds}}) => ({ids: allIds});

const People = ({ids}) => (
  <ScrollView contentInsetAdjustmentBehavior="automatic">
    <NavigationBarIOS title="People" />
    <FlatList
      data={ids}
      keyExtractor={id => id}
      renderItem={({item}) => <PersonItem id={item} />} />
  </ScrollView>
);

export default connect(mapStateToProps)(People);

The only difference i see is that the example has the React Native version at 0.59 while my install gets 0.60 and possibly barfs at some of the breaking changes that this version introduces. I just wanted to now if i will need to roll back to 0.59 until any update happens.

[grahammendick]

I just released navigation-react-native v5.3.0. It supports React Native v0.60 and is ready whenever you are. No more manual linking. Don’t forget to run pod install. See the set up guide for the full instructions.

[arunmenon1975]

As an update for anybody reading this, i got it going perfectly well without any issues with v0.59.10(the latest in the 0.59 branch). This is my current package.json:

{
  "name": "menunativenavigation",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "navigation": "^5.2.0",
    "navigation-react": "^4.1.1",
    "navigation-react-native": "^5.2.1",
    "react": "16.8.3",
    "react-native": "0.59.10",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.1",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

And the screen on Simulator:

Even if navigation-react-native updates to officially support v0.60 I may have to stick to the v0.59 version since other packages i rely on will also need to be similarly compatible and i don’t think that may happen very soon.