viewpager android has been removed from react native

[abbasmoosavi]

No description provided.

[abbasmoosavi]

I fixed it by

import { PanResponder, Platform, ScrollView, StyleSheet, View } from 'react-native'
import ViewPagerAndroid from "@react-native-community/viewpager";
import React, { Component } from 'react'

[tusharmutreja]

Kindly update this library, I also face this issue

[harshit-prog]

I fixed it by

import { PanResponder, Platform, ScrollView, StyleSheet, View } from 'react-native'
import ViewPagerAndroid from "@react-native-community/viewpager";
import React, { Component } from 'react'

Please tell me. How can I update it in my code?

[abbasmoosavi]

@harshit-prog use this module react-native-best-viewpager
I fixed in this module

[harshit-prog]

@harshit-prog use this module react-native-best-viewpager
I fixed in this module

Thanks @abbasmoosavi

[abbasmoosavi]

@harshit-prog You 're wellcome

[morwalz]

I have fixed this issue. Use this package https://www.npmjs.com/package/@shankarmorwal/rn-viewpager

npm i @shankarmorwal/rn-viewpager

[Gricardov]

I have the solution.
1- Install this: @react-native-community/viewpager
2- Search for all the files named TabViewPagerAndroid whitin your node_modules folder
3- Open it and change this line
import { View, ViewPagerAndroid, StyleSheet, I18nManager } from 'react-native';

for this:

import { View, /* ViewPagerAndroid, */ StyleSheet, I18nManager } from 'react-native';
import ViewPagerAndroid from "@react-native-community/viewpager";

You are welcome :)

[rpeg]

@Gricardov Not a good practice -- that hard-fix isn't going to be recorded in VCS history. Better to change the module altogether.

[akash89bis]

Hi @abbasmoosavi After changing --
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager'
to
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'react-native-best-viewpager';

I get below error -
Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager.

What is the mistake I am doing?

[morwalz]

@akash89bis I fixed this issue and made a copy of this package. Use npm i @shankarmorwal/rn-viewpager

There are some deprecated code is used, i plan to update that as well. For now this will work with warnings.

[handipriyono]

I fixed it by
import { PanResponder, Platform, ScrollView, StyleSheet, View } from 'react-native'
import ViewPagerAndroid from "@react-native-community/viewpager";
import React, { Component } from 'react'

Please tell me. How can I update it in my code?

Hi, you can download the fixed version of rn-viewpager using this package,
https://www.npmjs.com/package/rn-viewpager-handy
which use the latest viewpager from react-native community

it also fixed: Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager. make sure you guys read installation instruction in that repository.

[ngocht143]

@handipriyono I'm facing this issue with version ^1.5.0

[handipriyono]

@handipriyono I'm facing this issue with version ^1.5.0

If you installed rn-viewpager from zbtang before, make sure you uninstall previous React native viewpager from zbtang ( step 1 and 2 ) , if not, goto step 3.

1. react-native unlink rn-viewpager
2. npm uninstall rn-viewpager --save
3. Delete node_modules, by running ----> rm -rf node_modules
4. npm i rn-viewpager-handy
5. npm install
6. react-native link @react-native-community/viewpager

[ngocht143]

@handipriyono I'm using yarn remove rn-viewpager then yarn add rn-viewpager-handy.
Now i'm facing this issue: https://prnt.sc/swd04g

[handipriyono]

@handipriyono I'm using yarn remove rn-viewpager then yarn add rn-viewpager-handy.
Now i'm facing this issue: https://prnt.sc/swd04g

the problem is in your code, Component. not in that viewpager package.
it's better that you share your whole current page code, instead of just share screenshot,,

[morwalz]

you can also try npm i @shankarmorwal/rn-viewpager
it will work.

[ngocht143]

@handipriyono yes, thanks for your reply, this is my code:

`import React from 'react'
import { View, Text, } from 'react-native'
import Touchable from '../Touchable';
import { IndicatorViewPager, PagerDotIndicator } from 'rn-viewpager-handy'
import { SCREEN_WIDTH } from '../../common/Configs';

export default class NewsletterItemGrid extends React.PureComponent {
constructor(props) {
super(props)
this.state = {
listImgs: [
'https://img.cintamobil.com/2020/04/24/20200424125457-d0e0.jpg',
'https://img.cintamobil.com/2020/04/24/20200424125519-f1e0.jpg',
'https://img.cintamobil.com/2020/04/24/20200424125537-3365.jpg',
'https://img.cintamobil.com/2020/04/24/20200424125556-c11c.jpg',
'https://img.cintamobil.com/2020/04/24/20200424125641-b32e.jpg'
],
}
}

renderIndicator = () => {
    return (
        <PagerDotIndicator pageCount={3} />
    )
}

render() {
    return (
        <View style={{ borderRadius: 8 }}>
            <IndicatorViewPager
                style={{ width: SCREEN_WIDTH, height: SCREEN_WIDTH / 1.78 }}
                indicator={this.renderIndicator}>
                <View style={{ backgroundColor: "cadetblue" }}>
                    <Text>page one</Text>
                </View>
                <View style={{ backgroundColor: "cornflowerblue" }}>
                    <Text>page two</Text>
                </View>
                <View style={{ backgroundColor: "#1AA094" }}>
                    <Text>page three</Text>
                </View>
            </IndicatorViewPager>
        </View>
    )
}

}`

[handipriyono]

@ngocht143 , in your code,
indicator={this.renderIndicator}>

that should be invoked,
--->. indicator={this.renderIndicator() }>

[ngocht143]

thank @handipriyono, it's ok for me now :D

[amitntrivedi]

Install the new package with below npm command

npm install --save @shankarmorwal/rn-viewpager

and replace the line from
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
to
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from '@shankarmorwal/rn-viewpager';

It should work.

More details
https://www.npmjs.com/package/@shankarmorwal/rn-viewpager