Invariant Violation: Tried to register two views with the same name RNSScreen, js engine: hermes

[MohammadUmer526]

Description

Hi,

I have an issue while running the Expo app on iOS and Android.

We use monorepos with 2 Expo apps; the issue occurs on App B.

Tried multiple solutions from upgrading and re-installing the react-navigation, react-native-screens, and other dependent plugins.

Below is the package.json of App B.

{ "name": "pulse", "version": "2.0.1", "private": true, "main": "index.js", "scripts": { "clean": "git clean -xdf .expo .turbo node_modules", "dev": "expo start", "dev:android": "expo start --android", "dev:ios": "expo start --ios", "lint": "eslint --ext .ts,.tsx,.js,.jsx .", "lint:fix": "pnpm lint --fix", "type-check": "tsc --noEmit", "android": "expo run:android", "ios": "expo run:ios", "bump-version": "bumpp" }, "dependencies": { "@backpackapp-io/react-native-toast": "^0.10.0", "@expo/config-plugins": "~7.8.0", "@gorhom/bottom-sheet": "^4.5.1", "@hookform/resolvers": "^3.3.1", "@react-native-community/datetimepicker": "7.7.0", "@react-native-community/netinfo": "11.1.0", "@react-native-firebase/analytics": "20.4.0", "@react-native-firebase/app": "^20.4.0", "@salam/api": "workspace:*", "@salam/ui-native": "workspace:*", "@tanstack/react-query": "^4.36.1", "@trpc/client": "^10.45.0", "@trpc/react-query": "^10.45.0", "@ts-react/form": "^1.8.3", "babel-plugin-inline-import": "^3.0.0", "clsx": "^2.1.0", "dayjs": "^1.11.10", "expo": "~50.0.19", "expo-blur": "~12.9.2", "expo-build-properties": "~0.11.1", "expo-checkbox": "~2.7.0", "expo-clipboard": "~5.0.1", "expo-constants": "~15.4.6", "expo-dev-client": "~3.3.12", "expo-device": "^5.9.4", "expo-document-picker": "~11.10.1", "expo-file-system": "~16.0.9", "expo-image": "~1.10.6", "expo-insights": "~0.6.1", "expo-linking": "~6.2.2", "expo-localization": "~14.8.4", "expo-location": "~16.5.5", "expo-notifications": "~0.27.8", "expo-router": "^3.4.10", "expo-secure-store": "~12.8.1", "expo-splash-screen": "~0.26.5", "expo-status-bar": "~1.11.1", "expo-system-ui": "~2.9.4", "expo-updates": "~0.24.13", "expo-web-browser": "~12.8.2", "firebase": "^10.12.2", "i18next": "^23.5.1", "lucide-react-native": "^0.363.0", "moti": "^0.28.1", "nativewind": "4.0.36", "react": "18.2.0", "react-hook-form": "^7.47.0", "react-i18next": "^14.1.0", "react-native": "0.73.6", "react-native-actions-sheet-picker": "^0.3.5", "react-native-circular-progress": "1.3.9", "react-native-confirmation-code-field": "^7.3.1", "react-native-gesture-handler": "~2.14.1", "react-native-google-places-autocomplete": "^2.5.6", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-keyboard-controller": "^1.11.3", "react-native-magic-modal": "^5.0.2", "react-native-maps": "1.10.0", "react-native-mask-text": "^0.14.2", "react-native-mmkv": "^2.10.2", "react-native-modal": "^13.0.1", "react-native-popup-menu": "^0.16.1", "react-native-reanimated": "~3.6.3", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-svg": "14.1.0", "react-native-swiper": "^1.6.0", "react-native-webview": "13.6.4", "superjson": "^2.2.1", "tailwind-merge": "^2.2.0", "zod": "^3.22.4", "zod-i18n-map": "^2.20.0", "zustand": "^4.4.3" }, "devDependencies": { "@babel/core": "^7.23.0", "@expo/metro-config": "^0.17.6", "@salam/eslint-config": "workspace:*", "@salam/tailwindcss": "workspace:*", "@salam/tsconfig": "workspace:*", "@types/react": "~18.2.60", "tailwindcss": "3.4.1", "typescript": "^5.1.3" }, "eslintConfig": { "root": true, "extends": [ "@salam/eslint-config/base", "@salam/eslint-config/react" ] }, "prettier": "@salam/prettier-config" }

Steps to reproduce

1. run pnpm i on the root of the monorepo
2. run pnpm i on the root of App B(package.json).
3. npx expo rebuild
4. pod install
5. pnpm run ios/android

Error:

Invariant Violation: Tried to register two views with the same name RNSScreen, js engine: hermes

Screenshot:

Snack or a link to a repository

It's a private repo.

Screens version

3.29.0

React Native version

0.73.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 15(17.2)

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[kkafar]

Hey @MohammadUmer526, from the issue description I believe this is not react-native-screens issue but rather some shortcoming in your monorepo configuration.

The error you get suggests following:

1. you might have two instances of react-native-screens installed side by side (maybe you have two node_modules) and you import react-native-screens from both. This is "illegal".
2. vastly less likely: for some unknown reason the result of first import of react-native-screens is not cached by resolver and its run for second time.

Tip 1: in any case I would start debugging with looking into your application metro.config.js, override the resolver (something similar as to we have done in our example apps), write some console.logs and see what gets resolved to what.

Tip 2: Knowledge of node module resolution algorithm might be useful

Tip 3: Usually the module from the node_modules closest to the file with import "react-native-screens" gets resolved, thus if you have source code scattered in different locations it might use different node_modules

Tip 4: The solution might boil down to simply overriding the metro resolver just as we did in our example apps: link

[kkafar]

I'm not locking conversation, if you think this is an issue with react-native-screens present some arguments and tag us.