TabView Crashed on react-native-pager-view upgrade

[EM-Sabeel]

Current behavior

When i upgraded pager view to "react-native-pager-view": "^6.0.0-rc.0", I'm getting below error.

Currently, you using this method.

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

const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);

But, With the latest version of PageView, You should import like this

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

const AnimatedViewPager = Animated.createAnimatedComponent(PagerView);

Expected behavior

The TabView should work with the latest pageview, can you release a beta version for this to work.

Reproduction

https://snack.expo.dev/@sabeelkm/tabview

Platform

• [X] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	6.0.0-rc.0
react-native	0.64
expo	Nil
node	14.17.3
npm	6.14.13

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 6.0.0-rc.0, latest: 5.4.8)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[EM-Sabeel]

I need Lazy Pager View and is available on this (6.0.0-rc.0) Version only.

[EM-Sabeel]

@satya164 any updates

[samadritsarkar2]

I am also facing the same issue.

[samadritsarkar2]

I got the solution to this problem here #654

[EM-Sabeel]

@samadritsarkar2 That solution is not working for this issue

[EM-Sabeel]

Currently, you using this method.

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

const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);

But, With the latest version of PageView, You should import like this

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

const AnimatedViewPager = Animated.createAnimatedComponent(PagerView);

@samadritsarkar2 this is the solution

[samadritsarkar2]

That solution worked for me.

const renderScene = SceneMap({ first: AddRoom, second: AddImages, third: AddDetails, });

const [routes] = useState([ {key: 'first', title: 'Basic Room Info'}, {key: 'second', title: 'Add Images'}, {key: 'third', title: 'Final Details'}, ]);

the key fields should be same.

[iaminarush]

What I did was forking the react-native-pager-view and changing the index.tsx in the next branch to export default PagerView like the previous versions and install the library using the github repo.

[okwasniewski]

RC of pager-view 6.0.0 is not yet supported. Closing this