After v0.2.0 upgrade: Invariant Violation => Rename RNCMaskedView to RNMaskedView

[TheWirv]

This issue prevents me from using react-native-masked-view v0.2.0 because I can't run this and v0.1.10 in parallel, while the latter is a peer dependency for @react-navigation/stack ("@react-native-community/masked-view": ">= 0.1.0" that is). Installing both yields the following error which makes sense:

Invariant Violation: Tried to register two views with the same name RNCMaskedView

This could be avoided by renaming RNCMaskedView to RNMaskedView, which makes more sense anyway, since the RNC stood for @react-native-community and this is not under the RNC umbrella anymore.

[xaiamov]

Having the same issue. Is there any workaround?

[JimTeva]

@TheWirv, @xaiamov What is in v0.2.0 that you cannot find in v0.1.10?

[TheWirv]

What is in v0.2.0 that you cannot find in v0.1.10?

@JimTeva I honestly don't know how that would make any difference. It is a matter of principle. I would just like to work with the most uptodate versions of my packages, and this is preventing me from that.

To actually answer your question, Xcode 12 compatibility would definitely be nice. But you don't know if this package will get a major update with some cool new feature in the near future, do you? And in that case, it would be impossible for any React Navigation integrator to use that new feature. Bummer.

[JimTeva]

@TheWirv Have you removed the old version?

yarn remove @react-native-community/masked-view

And fix all imports to

import MaskedView from '@react-native-masked-view/masked-view';

[samkk]

I also encountered the same problem react native: 0.63.3

Podfile.lock RNCMaskedView (0.1.10): package.json "@react-native-masked-view/masked-view": "^0.2.0",

[steven-taglohner]

In my case I had just installed the package and got the error message. I then checked my package.json and noticed there was two references of "@react-native-masked-view/masked-view". Here is what I done:

1. removed the older reference from my dependencies.
2. deleted my node folder (you can probably just delete the linked folders)
3. on the ios folder I ran "pod deintegrate"
4. on the project root ran "npm install" (may be yarn on your case)
5. on the ios folder ran pod install
6. killed the app and restarted

Hope that helps!

[lexycole]

Hello, this my error message running using expo web view TypeError: Object(...) is not a function const RNCMaskedView = requireNativeComponent('RNCMaskedView');

[raldred]

This is a pain because we have two different deps that rely on this package under it's different namespace.

One references @react-native-community/masked-view The other references @react-native-masked-view/masked-view

So we get Tried to register two views with the same name RNCMaskedView

Removing either of them results in metro complaining that it's not available to be imported into the dependency.

Eg.

Error: Unable to resolve module `@react-native-masked-view/masked-view` from `node_modules/react-native-skeleton-placeholder

The only way I could find to deal with it was with babel-module-resolver

//...
alias: {
  "@react-native-community/masked-view": "@react-native-masked-view/masked-view",
}

[dongdyang]

This is a pain because we have two different deps that rely on this package under it's different namespace.

One references @react-native-community/masked-view The other references @react-native-masked-view/masked-view

So we get Tried to register two views with the same name RNCMaskedView

Removing either of them results in metro complaining that it's not available to be imported into the dependency.

Eg.

Error: Unable to resolve module `@react-native-masked-view/masked-view` from `node_modules/react-native-skeleton-placeholder

The only way I could find to deal with it was with babel-module-resolver

//...
alias: {
  "@react-native-community/masked-view": "@react-native-masked-view/masked-view",
}

Could you elaborate more? where to put this alias? Thanks!

[steven-taglohner]

This is a pain because we have two different deps that rely on this package under it's different namespace. One references @react-native-community/masked-view The other references @react-native-masked-view/masked-view So we get Tried to register two views with the same name RNCMaskedView Removing either of them results in metro complaining that it's not available to be imported into the dependency. Eg.

Error: Unable to resolve module `@react-native-masked-view/masked-view` from `node_modules/react-native-skeleton-placeholder

The only way I could find to deal with it was with babel-module-resolver

//...
alias: {
  "@react-native-community/masked-view": "@react-native-masked-view/masked-view",
}

Could you elaborate more? where to put this alias? Thanks!

https://www.npmjs.com/package/babel-plugin-module-resolver