naehyungkim
naehyungkim

Reputation: 21

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

enter image description here

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

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"   } 
}

Upvotes: 1

Views: 2580

Answers (5)

Jitendrasinh Zala
Jitendrasinh Zala

Reputation: 171

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.

Upvotes: 0

nirali diyora
nirali diyora

Reputation: 11

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

Upvotes: 0

مصطفى
مصطفى

Reputation: 995

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

enter image description here

Upvotes: 0

Hitesh Prajapati
Hitesh Prajapati

Reputation: 1411

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';

Upvotes: -2

Ata MuhiUlDin
Ata MuhiUlDin

Reputation: 21

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!

Upvotes: 0

Related Questions