Android: Invariant Violation requireNativeComponent: "RNCViewPager" was ton found in the UIManager #1050

zmnv · 2019-10-29T10:08:39Z

I have searched existing issues
I am using the latest scrollable tab view version

I've just update react-native-scrollable-tab-view to 1.0.0 by yarn. But still have error.

Steps to Reproduce

yarn add react-native-scrollable-tab-view@1.0.0

import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
....
<ScrollableTabView
    style={{ marginTop: 0, marginBottom: 10, height: 50, flex: 0 }}
    onChangeTab={this...}
    initialPage={0}
    renderTabBar={() => (
        <ScrollableTabBar
            activeTextColor="..."
            inactiveTextColor="..."
            style={{
                ...
            }}
            tabsContainerStyle={{
                ...
            }}
            underlineStyle={{
                height: 2,
            ...
            }}
            tabStyle={{
                ...
            }}
            textStyle={{ fontSize: 12, fontWeight: 'normal' }}
        />
    )}
>
    {metrics.map(metricName => (
        <View
            key={metricName}
            tabLabel={metricName}
        >
            <Text>{metricName}</Text>
        </View>
    ))}
</ScrollableTabView>

Expected Behavior

Should work because I setup latest version of module. And in yarn.lock:

also ViewPager there is in node_modules:

Actual Behavior

Android

iOS
All fine.

I've try

Clean yarn cache
Clean react native & metro cache
rm -rf node_modules
delete build folders

The text was updated successfully, but these errors were encountered:

zmnv · 2019-10-29T10:16:57Z

I look at:
/node_modules/react-native-scrollable-tab-view/index.js

Why do you use Animated.ScrollView for iOS and AnimatedViewPagerAndroid for Android? Can you use Animated.ScrollView for all?

also there are definitions which don't used

zmnv · 2019-10-29T11:13:33Z

temporary solution is just:

yarn add @react-native-community/viewpager

but I don't want to install that module direct into project :(

ptomasroos · 2019-10-29T12:33:14Z

I would love to have a PR on a scroll based solution of android. It’s there for historical reasons.

haack · 2019-10-31T00:04:26Z

I have the same issue on Android. Manually adding @react-native-community/viewpager didn't solve the problem for me.

zunsakai · 2019-10-31T03:22:35Z

same issue ...

cereme · 2019-11-02T09:02:17Z

I have same issue too

vetrivendhan48 · 2019-11-04T04:43:34Z

temporary solution is just:
yarn add @react-native-community/viewpager
but I don't want to install that module direct into project :(

I guess there will be no issue in doing that I guess. npm will manage dependencies right? Is there will be any issue will come if you modify its dependencies? Please let me know.
Thanks

zmnv · 2019-11-04T13:32:56Z

@vetrivendhan48 not a big deal actually, but.

But when you search in project directory @react-native-community/viewpager it's returns nothing. Then other developers thinks like 'oh, that dependency is not used in project so it unnecessary, I can delete it!'.

And build fails next time)))))))

also guys above says that solution didn't work. I don't know why. In my case it works.

azamouchi · 2019-11-06T15:01:22Z

yarn add @react-native-community/viewpager on it's own does not solve the issue, you need to link the package also using react-native link @react-native-community/viewpager

w13808604 · 2019-11-08T03:16:19Z

same issue ..anybody solve it

chenyanfei-m · 2019-11-08T04:10:34Z

yarn add @react-native-community/viewpager
react-native link @react-native-community/viewpager
and rebuild, solve it ✨

mastahed · 2019-11-12T04:46:35Z

Any fix for expo 35 with RN 0.59? works well on IOS, android shows the same error. Tried link and manual installation of viewpager.

kaiyes · 2019-11-18T01:00:15Z

yarn add @react-native-community/viewpager
react-native link @react-native-community/viewpager
and rebuild and solve it

This worked for me

xgAnd · 2019-11-18T12:13:24Z

yarn add @react-native-community/viewpager
react-native link @react-native-community/viewpager
and rebuild and solve it

worked react-native version is 0.61.3

winseyli · 2019-11-28T00:09:28Z

yarn add @react-native-community/viewpager
react-native link @react-native-community/viewpager
and rebuild, solve it ✨

Thank you this works for me too. RN 0.61.4
(Seems like it is not necessary to link the package if there is autolinking for >=0.60)

tivjoe · 2019-12-02T07:28:51Z

react-native<0.59.0
yarn add @react-native-community/viewpager@2.0.0
react-native link @react-native-community/viewpager

coderew · 2019-12-02T13:10:26Z

this is not work for me, my react-native version is "react-native": "0.59.9"

coderew · 2019-12-02T13:14:49Z

I have the same issue on Android. Manually adding @react-native-community/viewpager didn't solve the problem for me.

have you solved this problem?

Kailash23 · 2019-12-02T13:48:09Z

yarn add @react-native-community/viewpager
react-native link @react-native-community/viewpager
and rebuild, solve it ✨

It's working RN 0.61.5

Miti063 · 2019-12-12T09:54:21Z

Same issue. Tired adding & linking @react-native-community/viewpager manually but still facing the same error. RN version 0.61.5.

vetrivendhan48 · 2019-12-14T05:09:56Z

@zmnv , Thanks for your reply man 👍

ansarikhurshid786 · 2020-01-22T10:29:23Z

react-native link @react-native-community/viewpager

This resolve issue and working fine in ios but in android tab content is blank. does anyone face same issue?

ansarikhurshid786 · 2020-01-22T10:51:32Z

I am not getting any error or warning but tab content is blank in android.

bdent · 2020-01-27T11:53:21Z

None of the above solutions working for me on RN 0.59.8.

Anyone manage to get a working solution?

mustafaskyer · 2020-02-03T10:47:33Z

installed viewpager, works for me, thanks @chenyanfei-m

"react-native-scrollable-tab-view": "^1.0.0",
"@react-native-community/viewpager": "^3.3.0",
"react-native": "^0.59.10"

bdent · 2020-02-04T10:58:17Z

Solved this issue on an Ejected Expo project, RN 0.59.8.

Instead of installing and linking @react-native-community/viewpager, you need to manually link the viewpager library with the already included version of the @react-native-community/viewpager library found in ./node_modules/react-native-scrollable-tab-view/node_modules/

Full path for linking is:
../node_modules/react-native-scrollable-tab-view/node_modules/@react-native-community/viewpager/android

mmustafaozdemir · 2020-02-18T12:50:29Z

yarn add @react-native-community/viewpager
react-native link @react-native-community/viewpager
and rebuild, solve it ✨

worked! react-native version is 0.61.0

ptomasroos · 2020-02-18T14:21:20Z

Thanks for sharing!

claezon · 2020-02-28T16:52:04Z

This worked for me:

RN-cli: 2.0.1
RN: 0.61.5

I tried linking the package, but that didn't help.
I tried manual linking and saw that the RNCViewPagerPackage was missing in:
android/app/src/main/java/com/[...]/MainApplication.java

I added the package (last line before return):

@Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); packages.add(new RNCViewPagerPackage()); // <----- Here we go return packages; }

I emptied cache and ran: react-native run-android.

DatNguyenCore · 2020-04-05T09:29:22Z

i'm using RN 0.60.5 and i have this issue when using react-native-scrollable-tab-view version 1.0.0 then i had downgrade toreact-native-scrollable-tab-view version 0.10.0 the error is gone.

nabilfreeman · 2020-05-04T21:33:20Z

Hi, I just ran npm install --save @react-native-community/viewpager and it autolinked.

I also made sure that my react-native-scrollable-tab-view version is the latest commit on master (not npm).

"@react-native-community/viewpager": "4.0.0",
"react-native-scrollable-tab-view": "github:ptomasroos/react-native-scrollable-tab-view#510111adce035a54ecb1b5f77b78e3bfaf513260",

To confirm... no manual steps required!! 🎉

Edit: I spoke too soon, this breaks iOS so I had to add this to my postinstall script:

RN_VIEWPAGER_FILE="./node_modules/@react-native-community/viewpager/react-native-viewpager.podspec"

if [ -e $RN_VIEWPAGER_FILE ]; then
	echo "Patching @react-native-community/viewpager to not autolink (we only want this peer dep on Android)"
	rm -rf $RN_VIEWPAGER_FILE
fi

So now...

react-native-scrollable-tab-view adds @react-native-community/viewpager@3.3
@react-native-community/viewpager@4 installed from package.json
viewpager 4 autolinks to Android, not to iOS

Everything works.

I think the ideal would be to remove viewpager as a dep from this library and instead have it as a required peer dependency.

nabilfreeman · 2020-05-05T19:28:19Z

Last update... I downgraded my version of @react-native-community/viewpager to 3.3 (matches the master branch of this repo) and now everything is playing nicely. Removed the postinstall steps above.

deot · 2020-05-21T19:09:36Z

package.json

"resolutions": {
    "@react-native-community/viewpager": "^4.0.0"
},

Android > 60.0, check file:
android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java

  public ArrayList<ReactPackage> getPackages() {
    return new ArrayList<>(Arrays.<ReactPackage>asList(
      // ...
      new RNCViewPagerPackage()
    ));
  }

link

SimoTw · 2020-06-22T02:43:16Z

This worked for me.

This issue is caused by the wrong dependency version,
and it's fixed in the commit 510111adce035a54ecb1b5f77b78e3bfaf513260,
but not officially released.
To install the specific commit version instead of the official released one, run

RN v0.61

yarn add react-native-scrollable-tab-view@https://github.com/ptomasroos/react-native-scrollable-tab-view#510111adce035a54ecb1b5f77b78e3bfaf513260

RN v0.62

yarn add react-native-scrollable-tab-view@https://github.com/ptomasroos/react-native-scrollable-tab-view#1371236e91c217e2f42468e355419f83410e3133

heyixing · 2020-07-22T03:43:05Z

yarn add @react-native-community/viewpager
react-native link @react-native-community/viewpager
and rebuild and solve it

This worked for me

it's also worked for me ,thanks!

brambang · 2020-07-27T04:55:21Z

Solved this issue on an Ejected Expo project, RN 0.59.8.

Instead of installing and linking @react-native-community/viewpager, you need to manually link the viewpager library with the already included version of the @react-native-community/viewpager library found in ./node_modules/react-native-scrollable-tab-view/node_modules/

Full path for linking is:
../node_modules/react-native-scrollable-tab-view/node_modules/@react-native-community/viewpager/android

im using Expo SDK 34 ejected, RN 0.59
when i installed viewpager the folder is @react-native-community/viewpager/
not inside react-native-scrollable-tab-view.

brambang · 2020-07-27T06:43:40Z

for Expo SDK 34 ejected, RN 0.59
installed viewpager version 2.0.2 solved the problem
maybe the problem is in version 3.0.0 they were update to Android X.

bobananto24 · 2021-02-12T11:48:32Z

I have the same issue on Android. Manually adding @react-native-community/viewpager didn't solve the problem for me.

run the command "react-native run-android" or "react-native run-ios" instead of "react-native start"

hungdev · 2021-03-06T09:29:11Z

installed viewpager, works for me, thanks @chenyanfei-m
"react-native-scrollable-tab-view": "^1.0.0",
"@react-native-community/viewpager": "^3.3.0",
"react-native": "^0.59.10"

Thank u, those versions worked for me

andresribeiro · 2021-06-18T21:18:35Z

yarn add @react-native-community/viewpager
react-native link @react-native-community/viewpager
and rebuild, solve it

It worked with React Native version 0.64.2. Thanks!

douglassoldan · 2021-10-08T22:58:25Z

@react-native-community/viewpager is deprecated!

npm i react-native-pager-view
cd ios
pod install
cd ..

run projetc!

Works here! ;-)

deepakkathuria · 2021-12-23T14:54:05Z

1.react-native link @react-native-community/viewpager
2. npx react-native run-android
3. npx react-native start

zchuhui · 2021-12-29T07:22:54Z

@react-native-community/viewpager is deprecated!
npm i react-native-pager-view
cd ios
pod install
cd ..
run projetc!

Works here! ;-)

thanks bro!!!!

Hudson-AmalembaL · 2023-12-13T11:54:31Z

Make sure to

    clear the node_modules
    make a fresh install

then

npm install  react-native-pager-view 
npm install react-native-tab-view

Restart the server

That worked for me

zmnv mentioned this issue Oct 29, 2019

Incompatible With React Native 0.61 Due to ViewPagerAndroid #1035

Closed

2 tasks

zikwall mentioned this issue Jan 5, 2020

Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager #1069

Closed

Android: Invariant Violation requireNativeComponent: "RNCViewPager" was ton found in the UIManager #1050

Android: Invariant Violation requireNativeComponent: "RNCViewPager" was ton found in the UIManager #1050

Comments

zmnv commented Oct 29, 2019 • edited

Steps to Reproduce

Expected Behavior

Actual Behavior

I've try

zmnv commented Oct 29, 2019

zmnv commented Oct 29, 2019

ptomasroos commented Oct 29, 2019

haack commented Oct 31, 2019

zunsakai commented Oct 31, 2019

cereme commented Nov 2, 2019

vetrivendhan48 commented Nov 4, 2019

zmnv commented Nov 4, 2019 • edited

azamouchi commented Nov 6, 2019

w13808604 commented Nov 8, 2019

chenyanfei-m commented Nov 8, 2019 • edited

mastahed commented Nov 12, 2019

kaiyes commented Nov 18, 2019 • edited

xgAnd commented Nov 18, 2019

winseyli commented Nov 28, 2019 • edited

tivjoe commented Dec 2, 2019

coderew commented Dec 2, 2019

coderew commented Dec 2, 2019

Kailash23 commented Dec 2, 2019

Miti063 commented Dec 12, 2019

vetrivendhan48 commented Dec 14, 2019 • edited

ansarikhurshid786 commented Jan 22, 2020

ansarikhurshid786 commented Jan 22, 2020 • edited

bdent commented Jan 27, 2020

mustafaskyer commented Feb 3, 2020

bdent commented Feb 4, 2020 • edited

mmustafaozdemir commented Feb 18, 2020

ptomasroos commented Feb 18, 2020

claezon commented Feb 28, 2020

DatNguyenCore commented Apr 5, 2020

nabilfreeman commented May 4, 2020 • edited

nabilfreeman commented May 5, 2020 • edited

deot commented May 21, 2020 • edited

SimoTw commented Jun 22, 2020

RN v0.61

RN v0.62

heyixing commented Jul 22, 2020

brambang commented Jul 27, 2020

brambang commented Jul 27, 2020

bobananto24 commented Feb 12, 2021

hungdev commented Mar 6, 2021

andresribeiro commented Jun 18, 2021

douglassoldan commented Oct 8, 2021 • edited

deepakkathuria commented Dec 23, 2021

zchuhui commented Dec 29, 2021

Hudson-AmalembaL commented Dec 13, 2023

That worked for me

zmnv commented Oct 29, 2019 •

edited

zmnv commented Nov 4, 2019 •

edited

chenyanfei-m commented Nov 8, 2019 •

edited

kaiyes commented Nov 18, 2019 •

edited

winseyli commented Nov 28, 2019 •

edited

vetrivendhan48 commented Dec 14, 2019 •

edited

ansarikhurshid786 commented Jan 22, 2020 •

edited

bdent commented Feb 4, 2020 •

edited

nabilfreeman commented May 4, 2020 •

edited

nabilfreeman commented May 5, 2020 •

edited

deot commented May 21, 2020 •

edited

douglassoldan commented Oct 8, 2021 •

edited