Invariant Violation: requireNativeComponent: "NVNavigationBar" was not found in the UI Manager
See original GitHub issueI 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.
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (7 by maintainers)

 Top Related Medium Post
Top Related Medium Post Top Related StackOverflow Question
Top Related StackOverflow Question
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.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:And the screen on Simulator:
Even if navigation-react-native updates to officially support
v0.60I may have to stick to thev0.59version since other packages i rely on will also need to be similarly compatible and i don’t think that may happen very soon.