Invariant Violation: Tried to register two views with the same name RNCAndroidDialogPicker in react native

Viewed 422

I got this error after removing library @react-native-community/datetimepicker which I was not using in my react native app. I have tried it reinstalling with same version and also tried updating it but nothing works out.

 ERROR  Invariant Violation: Tried to register two views with the same name RNCAndroidDialogPicker
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.


Here is my package.json file.

{
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest",
    "native": "react-native run-android start --port=8888",
    "link-vector-icons": "react-native link react-native-vector-icons",
    "pre_release": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!native-base)/",
      "node_modules/react-native-gesture-handler"
    ]
  },
  "dependencies": {
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-community/art": "^1.2.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/checkbox": "^0.5.7",
    "@react-native-community/datetimepicker": "3.0.9",
    "@react-native-community/masked-view": "0.1.6",
    "@react-native-community/push-notification-ios": "^1.8.0",
    "@react-native-community/toolbar-android": "^0.1.0-rc.2",
    "@react-native-firebase/analytics": "^10.8.0",
    "@react-native-firebase/app": "^10.8.0",
    "@react-native-firebase/crashlytics": "^10.8.0",
    "@react-native-google-signin/google-signin": "^7.0.0-alpha.1",
    "@react-native-picker/picker": "^2.1.0",
    "@react-navigation/material-top-tabs": "^5.3.10",
    "@react-navigation/native": "5.0.5",
    "axios": "^0.19.2",
    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
    "formik": "^2.2.6",
    "history": "^4.10.1",
    "jetifier": "^1.6.6",
    "jwt-decode": "^3.1.2",
    "launchdarkly-react-native-client-sdk": "^4.2.2",
    "metro": "^0.66.2",
    "moment": "^2.29.1",
    "native-base": "^2.15.2",
    "node-simctl": "^6.4.1",
    "npm-1092": "^1.0.0",
    "react": "17.0.1",
    "react-art": "^17.0.2",
    "react-dom": "~16.9.0",
    "react-hook-form": "^5.7.2",
    "react-native": "0.64.2",
    "react-native-alarm-notification": "^1.7.1",
    "react-native-autocomplete-input": "^4.2.0",
    "react-native-awesome-alerts": "^1.4.2",
    "react-native-background-fetch": "^4.0.1",
    "react-native-config": "^1.4.1",
    "react-native-cookies": "^3.3.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-document-picker": "^4.1.1",
    "react-native-dotenv": "^0.2.0",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-paper": "^4.7.2",
    "react-native-picker-select": "^8.0.4",
    "react-native-progress-circle": "^2.1.0",
    "react-native-push-notification": "^8.0.1",
    "react-native-reanimated": "^1.7.1",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-restart": "^0.0.20",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-screens": "^3.7.2",
    "react-native-size-matters": "^0.4.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-stopwatch-timer": "^0.0.21",
    "react-native-svg": "11.0.1",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-swiper-flatlist": "^2.0.6",
    "react-native-tab-view": "^2.15.2",
    "react-native-toast-notification": "^1.1.2",
    "react-native-vector-icons": "^8.1.0",
    "react-native-webview": "^11.4.4",
    "react-native-youtube-iframe": "^2.1.0",
    "react-navigation": "^4.4.3",
    "react-navigation-drawer": "^2.7.1",
    "react-navigation-stack": "^2.10.2",
    "react-navigation-tabs": "^2.10.1",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "socket.io-client": "2.1.1",
    "tailwind-rn": "^3.0.1",
    "use-socket.io-client": "^1.1.0",
    "yup": "^0.32.8"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@types/jest": "^26.0.19",
    "@types/react": "^17.0.0",
    "@types/react-native": "^0.63.42",
    "@types/react-test-renderer": "^17.0.0",
    "babel-jest": "~25.2.6",
    "babel-preset-react-native": "^4.0.1",
    "jest": "~25.2.6",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "~16.9.0",
    "typescript": "^4.1.3"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/Montserrat/"
    ]
  },
  "private": true,
  "name": "myways-master",
  "version": "2.3.0"
}


I don't know how to solve this error as I haven't made any changes to my code. After removing the library I got this error. How can I solve this error?

1 Answers

I had the same issue and the reason is you are using those packages

  • "react-native-picker-select": "^8.0.4",
  • "@react-native-picker/picker": "^2.1.0",
  • "native-base": "^2.15.2", - this package is wrapping the picker and and it tries to register two views with the same name RNCAndroidDialogPicker.

if you need to use native-base when you use @react-native-picker/picker you should use..

import {Picker} from 'native-base'; 

instead of

import {Picker} from '@react-native-picker/picker';

if you don't use the native-base properties it will show as default @react-native-picker/picker.

More over in the React Native .66.0 version the @react-native-community/picker is not longer supported in case you still use it.

My suggestion will be keep just '@react-native-picker/picker' package to unify your UI or migrate native-base to 3.x

Related