CODEWITHSUNDEEP
react-native
Manoj Kashyam
Manoj Kashyam

Reputation: 178

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

when I implement Image-slider on my application using this example that time I have faced this error.

import React,{Component} from 'react'
    import {View,Text,TouchableOpacity, ViewPagerAndroid} from 'react-native'
    import Infoslider from 'react-native-infoslider'
     export default class example extends Component {
      constructor(props) {
        super(props);
        this.state = {
          data:[
              {
              title:"Hello World", 
              text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
              image: require('../Images/Group.png')}
             ]
        };
      }
      render() {
        return (
         <Infoslider 
            data={this.state.data} />
        );
      }
    }

Error Like this

Upvotes: 8

Views: 8406

Answers (6)

Nicola Di Lillo
Nicola Di Lillo

Reputation: 1910

You might also need to update your babel version and runtime in case you have the 'token not recognized' error. Update the babel version following these steps:

npm install @babel/core@^7.9.0

npm install @babel/runtime@^7.9.2

npm install typescript@^3.8.3

rm -rf node_modules

npm install

npm start -- --reset-cache

Upvotes: 0

mohamed amine salah
mohamed amine salah

Reputation: 491

I solve it by:

  1. install this module: react-native-community / viewpager

  2. Go to the file: node_modules\react-native-swiper\src\index.js, and : add this line: import ViewPager from '@react-native-community/viewpager'; and remove this ViewPagerAndroid from the imports.

  3. in the same file, go to the return function, and change ViewPagerAndroid to ViewPager

This works for me

Upvotes: 4

Kapil
Kapil

Reputation: 41

You can resolve this error by updating react-native-swiper to latest(nightly) and in case you don't want to update react-native-swiper then install @react-native-community/viewpager and remove import of ViewPagerAndroid from react-native and import it from @react-native-community/viewpager

Upvotes: 2

Itdevstar
Itdevstar

Reputation: 106

You should update the react-native-swiper module to nightly. Then, npm clear cache.
Please follow this:

  1. cd android
  2. ./gradlew clean
  3. cd ..
  4. yarn remove react-native-swiper
  5. yarn add react-native-swiper@nightly
  6. rm -rf node_modules
  7. npm cache clean --force
  8. npm install
  9. react-native run-android

it will work. but if no, please restart system.

Upvotes: 9

Gaurav Roy
Gaurav Roy

Reputation: 12235

You need to first yarn add @react-native-community/viewpager or npm i @react-native-community/viewpager .

Thena after that remove ViewPagerAndroid from 'react-native' in imports and use 

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

hope it helps. feel free for doubts

Upvotes: 1

Thakur Anil
Thakur Anil

Reputation: 79

You needs to add @react-native-community/viewpager instead of importing ViewPagerAndroid from react-native.

Upvotes: 0

Related Questions