React-native-pager-view: Invariant Violation: ViewPagerAndroid has been removed from react native

Created on 28 Apr 2020  路  10Comments  路  Source: callstack/react-native-pager-view

Bug

Invariant Violation: ViewPagerAndroid has been removed from React Native.'react-native-viewpager' instead of 'react-native'

Yeah. This error was opened on many platforms including here, but I have a different situation. I have never used anywhere. ViewPagerAndroid exists only in the index.android.bundle file in my project. Do I need to update this file? How can I update?
I have problems on both platforms as android and ios.

As a solution
1 * react-native-swiper update
2 * Deleting ViewPagerAndroid from node_modules \ react-native-swiper \ src \ index.js file (I did not encounter ViewPagerAndroid. I think I have updated this file before)

I tried many similar things, I tried all the solutions I could find on the internet but I couldn't fix this problem

ViewPagerAndroid exists only in the index.android.bundle file in my project. Do I need to update this file? How can I update?

Environment info

react-native info output:

 System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 1.95 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.1 => 16.13.1 
    react-native: ^0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Foun

Library version: 0.62.2 React-Native

Reproducible sample code

{ "name": "DGFonder", "version": "0.0.1", "private": true, "bugsnagkey": "628115ba705e7e6347b4bfb7ba17e6bd", "scripts": { "precommit": "yarn eslint && yarn flow && yarn test", "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest", "storybook": "storybook start -p 7007", "generate-icon": "app-icon generate", "eslint": "eslint app --ext .js", "convertwebp": "./scripts/convertToWebP.sh", "ios:beta": "bundle exec fastlane ios beta", "android:beta": "bundle exec fastlane android beta", "ios:codepush": "node scripts/codePush.js iOS", "ios:production:device": "env ENVFILE=.env.production react-native run-ios --configuration Release --device", "android:codepush": "node scripts/codePush.js Android", "postinstall": "sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import \"RCTValueAnimatedNode.h\"/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h && node ./scripts/post-install.js", "run:android": "react-native run-android --variant=debugcertDebug", "run:ios": "react-native run-ios", "ios:debug:device": "env ENVFILE=.env react-native run-ios --configuration Debug --device", "android:debug:device": "env ENVFILE=.env react-native run-android --device" }, "dependencies": { "@react-native-community/cli-platform-ios": "^4.7.0", "@react-native-community/viewpager": "^2.0.1", "apisauce": "^1.0.2", "i18next": "^15.0.4", "intl": "^1.2.5", "jetifier": "^1.6.4", "lottie-react-native": "^2.6.1", "moment": "^2.24.0", "native-base": "^2.13.12", "number-to-locale-string-polyfill": "^1.0.9", "number-tolocalestring-polyfill": "^1.0.1", "react": "^16.13.1", "react-devtools": "^3.6.3", "react-i18next": "^8.0.7", "react-native": "^0.62.2", "react-native-actionsheet": "^2.4.2", "react-native-animatable": "^1.3.1", "react-native-charts-wrapper": "^0.5.7", "react-native-cli": "^2.0.1", "react-native-code-push": "^6.2.0", "react-native-config": "^0.11.7", "react-native-custom-tabs": "^0.1.7", "react-native-device-info": "^0.26.4", "react-native-dialog": "^5.6.0", "react-native-fs": "^2.16.6", "react-native-gesture-handler": "^1.0.16", "react-native-haptic": "^1.0.1", "react-native-linear-gradient": "^2.5.3", "react-native-pdf": "^5.1.7", "react-native-render-html": "^4.1.1", "react-native-safari-view": "^2.1.0", "react-native-screens": "^1.0.0-alpha.22", "react-native-scrollable-tab-view": "^0.10.0", "react-native-svg": "^9.2.4", "react-native-swiper": "^1.6.0-nightly.5", "react-native-vector-icons": "^6.3.0", "react-native-webp-support": "TGPSKI/react-native-webp-support", "react-native-webview": "^5.2.1", "react-navigation": "^4.0.10", "react-navigation-redux-helpers": "^3.0.0", "react-navigation-stack": "^1.7.3", "react-navigation-tabs": "^1.1.0", "react-number-format": "^4.4.1", "react-redux": "^6.0.1", "redux": "^4.0.1", "redux-persist": "^5.10.0", "redux-thunk": "^2.3.0", "rn-fetch-blob": "^0.10.15", "rn-viewpager": "^1.2.9", "styled-components": "^4.2.0", "validate.js": "^0.13.1" }, "devDependencies": { "@babel/core": "^7.9.0", "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-transform-flow-strip-types": "^7.9.0", "@babel/runtime": "^7.9.2", "@storybook/addon-actions": "^3.4.11", "@storybook/addon-links": "^3.4.11", "@storybook/addons": "^3.4.11", "@storybook/react-native": "^3.4.11", "app-icon": "^0.6.3", "babel-eslint": "^10.0.0", "babel-jest": "^23.6.0", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.6.0", "eslint": "^5.6.0", "eslint-config-prettier": "^3.0.1", "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-react": "^7.11.1", "eslint-plugin-react-native": "^3.3.0", "execa": "^1.0.0", "flow-bin": "^0.92.0", "jest": "24.3.1", "jest-environment-enzyme": "^7.0.0", "jest-enzyme": "^7.0.0", "jest-flow-transform": "^1.0.1", "metro-react-native-babel-preset": "^0.46.0", "prettier": "^1.14.3", "react-native-mock-render": "^0.1.9", "react-test-renderer": "16.5.0", "reactotron-react-native": "^2.2.0", "reactotron-redux": "^2.1.0", "redux-mock-store": "^1.5.3" }, "optionalDependencies": { "fsevents": "1.2.9" }, "jest": { "preset": "react-native", "setupTestFrameworkScriptFile": "jest-enzyme", "testEnvironment": "enzyme", "testEnvironmentOptions": { "enzymeAdapter": "react16" }, "setupFiles": [ "<rootDir>/scripts/setupTests" ], "transform": { "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js" }, "transformIgnorePatterns": [ "node_modules/(?!(jest-)?react-native|react-navigation)" ], "moduleNameMapper": { "styled-components": "<rootDir>/node_modules/styled-components/primitives/dist/styled-components.native.cjs.js" } } }

Most helpful comment

In my case, I just had to upgrade library "react-native-scrollable-tab-view" from "0.10.0" to "1.0.0" and it solved the issue.

All 10 comments

Screenshot 2020-04-28 at 20 53 16
aasd
Screenshot 2020-04-28 at 20 46 55

Hey 馃憢
Could you show me, how did you imported View Pager package in your *.js file ?
It looks like you are importing ViewPager from react native instead of @react-native-community/viewpager
Please checkout our example.

Hej @troZee
Which .js file you mean? I didnt use @react-native-community/viewpager in my project.
I searched 'ViewPagerAndroid' in the project and added a photo of it above.

I didnt use @react-native-community/viewpager in my project.

So you should use @react-native-community/viewpager.
In your project please find below import:

import { ViewPager } from "react-native"

and replace it

import ViewPager from '@react-native-community/viewpager';

I assume, that problem is solved. In case of any questions, please reopen this issue.

Hej @troZee Thanks for help. i solved that problem with;

import { ViewPager } from " rn-viewpager"

To replace;

import ViewPager from '@react-native-community/viewpager';

In my case, I just had to upgrade library "react-native-scrollable-tab-view" from "0.10.0" to "1.0.0" and it solved the issue.

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@expo/vector-icons": "^10.0.0",
"@react-native-community/checkbox": "^0.4.1",
"@react-native-community/datetimepicker": "3.0.0",
"antd-mobile": "2.1.1",
"axios": "^0.19.2",
"axios-mock-adapter": "1.10.0",
"expo": "^39.0.0",
"expo-facebook": "~9.0.0",
"expo-google-app-auth": "^7.0.0",
"expo-optimize": "^0.1.39",
"expo-permissions": "~9.3.0",
"fbemitter": "^2.1.1",
"fbjs": "^0.8.16",
"loglevel": "^1.6.0",
"moment": "^2.29.0",
"random-string": "^0.2.0",
"rc-form": "^2.1.7",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-localize-redux": "2.13.7",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz",
"react-native-carousel": "^0.11.0",
"react-native-cookie": "^0.2.0",
"react-native-countdown-component": "^2.7.1",
"react-native-credit-card-input": "^0.4.1",
"react-native-drawer": "^2.5.0",
"react-native-dropdown-menu": "^2.0.0",
"react-native-easy-grid": "^0.2.0",
"react-native-gesture-handler": "~1.7.0",
"react-native-image-slider-box": "^1.0.12",
"react-native-iphone-x-helper": "^1.0.2",
"react-native-loading-view": "^1.0.1",
"react-native-material-menu": "^1.1.3",
"react-native-modal": "^4.1.1",
"react-native-modal-datetime-picker": "^9.0.0",
"react-native-modalbox": "^1.4.2",
"react-native-numeric-input": "^1.8.3",
"react-native-permissions": "^1.0.4",
"react-native-reanimated": "~1.13.0",
"react-native-snap-carousel": "^3.9.0",
"react-native-star-rating": "^1.0.7",
"react-native-status-color-picker": "^1.0.5",
"react-native-storage": "^0.2.2",
"react-native-tab-view": "^2.11.0",
"react-native-vector-icons": "^4.4.2",
"react-native-video": "^5.1.0-alpha8",
"react-native-web": "~0.13.7",
"react-native-webview": "10.7.0",
"react-navigation": "~2.3.1",
"react-number-format": "^4.4.1",
"react-promise": "^2.0.0",
"react-redux": "^5.0.6",
"recompose": "^0.26.0",
"redux": "^3.7.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"validate.js": "^0.11.1"
},
"devDependencies": {
"babel-plugin-import": "^1.6.2",
"babel-preset-expo": "^8.3.0"
},
"private": true
}

Above is my package.json

I don't know which of my dependencies is using ViewPager. I'm unable to locate any.

Any kind of help will be appreciated.

same issue here.

same issue

Was this page helpful?
0 / 5 - 0 ratings