how to use Masked View in Expo managed project

Expo Development Tools
1

React Native MaskedView is not currently supported by Expo unless you “eject”.

2

no, that is incorrect. we have not changed over to the new package name, but you can still use it under the react-native-community scope

little known trivia: expo actually built MaskedView into react-native (@skevy back in the day MaskedViewIOS -- A way to apply alpha masks to views on iOS by skevy · Pull Request #14898 · facebook/react-native · GitHub)

3

But the full documentation says the MaskedView is not supported by expo unless you eject.
Note: React Native MaskedView is not currently supported by Expo unless you “eject”.

check the below link

4

the library you are linking to is just @react-native-community/masked-view renamed. we will follow along that renaming at some point. it is equivalent to the one i linked to in the docs - MaskedView - Expo Documentation

5

Now i get the below error on using MaskedView

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

7

because you need to uninstall the other library that you installed

8
9

Hi, my installation of MaskedView always fails with the following error, using latest expo SDK (40.0.1)
I’ve removed node_modules & did clean install a few times, but it always fails.
This in turn makes @react-navigation/stack fail as well. :frowning:

Any ideas why? :thinking:

npm WARN ERESOLVE overriding peer dependency
npm ERR! Cannot read property 'length' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shan/.npm/_logs/2021-02-09T00_48_46_059Z-debug.log

npm exited with non-zero code: 1
Error: npm exited with non-zero code: 1
    at ChildProcess.completionListener (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/spawn-async/src/spawnAsync.ts:65:13)
    at Object.onceWrapper (events.js:421:26)
    at ChildProcess.emit (events.js:314:20)
    at maybeClose (internal/child_process.js:1021:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
    ...
    at Object.spawnAsync [as default] (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/spawn-async/src/spawnAsync.ts:26:19)
    at NpmPackageManager._runAsync (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:157:31)
    at NpmPackageManager.addAsync (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:100:18)
    at installAsync (/usr/local/lib/node_modules/expo-cli/src/commands/install.ts:129:3)
    at Command.<anonymous> (/usr/local/lib/node_modules/expo-cli/src/exp.ts:346:7)

These are my dependencies

  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.13.4",
    "@react-native-community/netinfo": "5.9.7",
    "@react-navigation/native": "^5.7.3",
    "expo": "^40.0.1",
    "expo-constants": "~9.3.3",
    "expo-status-bar": "~1.0.3",
    "expo-updates": "~0.4.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-web": "~0.13.12",
    "rollbar-react-native": "^0.9.1",
    "semver-compare": "^1.0.0",
    "@react-native-community/masked-view": "0.1.10"
  },
10

what you are seeing is an error from npm 7. i recommend using npm 6 or yarn for now, much of the node ecosystem is not yet compatible with npm 7’s new peer dependency installation behavior.

1 Like
11

You are totally right!!!
I actually had that same hunch after posting my question, so downgraded my npm to v6 and surely it’s working, then your post further confirms it, thank you so much for answering so quick tho, this is amazing support!!! :+1: :+1:

1 Like
12

Oh, perhaps update your doc to mention this caveat?
Most new RN/expo devs might be using the npm@v7

13

Snack is not working
(0 , s.requireNativeComponent) is not a function
Evaluating @react-native-community/masked-view.js

14

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.