Getting error of "Tried to register two views with the same name RNCViewpager

Question

Hi, I am getting the error, but i don't know how to solve it. I think it caused by the conflicts between react-native-tab-view and react-native-pager-view

I tried

• remove node_modules and re-install.
• installed different versions of react-native-pager-view
• added "resolutions" in package.json.

My package.json is

  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.1.2",
    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/toolbar-android": "0.1.0-rc.2",
    "@react-native-firebase/analytics": "^11.3.2",
    "@react-native-firebase/app": "^11.3.2",
    "@react-native-google-signin/google-signin": "^6.0.0",
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "dateformat": "^3.0.3",
    "filter-obj": "^2.0.2",
    "lodash": "^4.17.15",
    "lottie-ios": "^3.1.8",
    "lottie-react-native": "^3.5.0",
    "moment": "^2.29.1",
    "patch-package": "^6.2.2",
    "payment": "^2.3.0",
    "react": "17.0.1",
    "react-content-loader": "^6.0.3",
    "react-native": "0.64.1",
    "react-native-background-upload": "^5.6.1",
    "react-native-base64": "0.0.2",
    "react-native-bootsplash": "^2.2.4",
    "react-native-check-box": "^2.1.7",
    "react-native-checkbox-form": "^1.1.5",
    "react-native-checkbox-group": "^1.0.3",
    "react-native-credit-card-input-fullpage": "^0.2.0",
    "react-native-device-info": "^8.0.5",
    "react-native-dialog": "^5.6.0",
    "react-native-drawer-layout-polyfill": "^2.0.0",
    "react-native-fbsdk": "^1.1.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-google-places-autocomplete": "^1.8.0",
    "react-native-image-picker": "^2.3.3",
    "react-native-key-value-storage": "^3.1.0",
    "react-native-keyboard-accessory": "^0.1.12",
    "react-native-loading-spinner-overlay": "^1.1.0",
    "react-native-material-buttons": "^0.6.0",
    "react-native-material-textfield": "^0.16.1",
    "react-native-no-flicker-image": "^1.0.2",
    "react-native-pager-view": "^5.1.3",
    "react-native-paper": "^4.7.2",
    "react-native-phone-input": "^0.2.4",
    "react-native-picker-select": "^8.0.4",
    "react-native-ratings": "^7.4.0",
    "react-native-reanimated": "^1.10.1",
    "react-native-responsive-screen": "^1.4.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.10.1",
    "react-native-scrollable-tab-view": "^1.0.0",
    "react-native-section-list-get-item-layout": "^2.2.3",
    "react-native-secure-storage": "^0.1.2",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-star-rating": "^1.1.0",
    "react-native-super-grid": "^3.2.0",
    "react-native-svg": "^12.1.1",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-tab-view": "^3.0.1",
    "react-native-vector-icons": "^7.0.0",
    "react-native-version-check": "^3.4.2",
    "react-native-webview": "^10.3.3",
    "react-native-windows": "^0.62.4",
    "react-navigation": "^4.4.0",
    "react-navigation-drawer": "^2.5.0",
    "react-navigation-material-bottom-tabs": "^2.3.0",
    "react-navigation-stack": "^2.8.2",
    "string": "^3.3.3",
    "tipsi-stripe": "^7.5.3",
    "typescript": "^3.9.7"   },   
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "jetifier": "^1.6.6",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-native-dotenv": "0.2.0",
    "react-test-renderer": "17.0.1"   },   
  "jest": {
    "preset": "react-native"   } 
}

Answer 1

React Native Pager View and @react-native-community/viewpager are libraries with similar functionalities, and it is not advisable to use both simultaneously. You should choose either react-native-pager-view or @react-native-community/viewpager for your project.

However, to ensure compatibility and avoid conflicts, it would be beneficial to consider modifying the library or creating a common library that encompasses the functionalities of both. This approach would allow developers to utilize a unified solution and streamline their implementation process.

Answer 2

in my case conflict was between react-native-scrollable-tab-view and react-native-pager-view

To resolve the conflict between react-native-scrollable-tab-view and react-native-pager-view, you can choose to use only one of them in your project.

If you have existing components that rely on react-native-scrollable-tab-view, you can migrate those components to use react-native-pager-view instead

Answer 3

npm uninstall react-native-pager-view

then

npx react-naive run-android

i notice that the problem is that when you install the library and this library exist already on some other libraries dependencies

you can import it without install it again check package-lock.json you can find it already

Answer 4

Here there is small issue in lib i guess. If you import like below

import PagerView from 'react-native-pager-view';

It will not work, but if you try to import like below, it will work.

import { PagerView } from 'react-native-pager-view';

Answer 5

I clone the repo and modified the ViewManger Name and it worked fine for me you may try it.

past following, to roo dir in package.json and run command yarn install

"react-native-pager-view": "git://github.com/AtaMuhiuldin/react-native-view-pager.git"

it's working for me!