babel-relay-plugin with react-native (expo) throwing error about 'cypto' - react-native

I am trying to implement react-relay in an expo project using the babel-plugin-relay package.
It was working on expo web (npm run web), but when I went to run it on my android device (npm start) this error happened.
The Error
The package at "node_modules/babel-plugin-relay/lib/compileGraphQLTag.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library. Read more at https://docs.expo.io/workflow/using-libraries/#using-third-party-libraries
My Configuration
// babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
['relay']
]
};
};
// package.json
"dependencies": {
"#absinthe/socket-relay": "^0.2.1",
"#expo/vector-icons": "^10.2.1",
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/bottom-tabs": "^5.11.1",
"#react-navigation/native": "^5.8.9",
"#react-navigation/stack": "^5.12.6",
"expo": "~39.0.2",
"expo-asset": "^8.2.0",
"expo-constants": "^9.2.0",
"expo-font": "^8.3.0",
"expo-linking": "^1.0.5",
"expo-splash-screen": "^0.6.2",
"expo-status-bar": "~1.0.2",
"expo-web-browser": "^8.5.0",
"phoenix": "^1.5.6",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-gesture-handler": "^1.8.0",
"react-native-paper": "^4.3.1",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.14.0",
"react-native-web": "^0.13.18",
"react-relay": "^10.0.1",
"relay-runtime": "^10.0.1"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-plugin-relay": "^10.0.1",
"graphql": "^15.4.0",
"relay-compiler": "^10.0.1"
},
// relay.config.js
module.exports = {
src: './src',
schema: './schema.graphql',
exclude: [
'**/node_modules/**',
'**/__mocks__/**',
'src/__generated__/**'
],
};
I am using the babel-plugin-relay/macro for composing graphql fragments (import graphql from "babel-plugin-relay/macro";).
If someone could help me resolve this I would really appreciate it. Thanks.

Related

Stuck splash screen after update expo SDK to 45

Since I updated expo sdk to 45 I can no longer access the apk
I'm sure it's a version story of one of the modules that is not up to date
If you can help me I would be happy !
in Local it works perfectly well but on the APK the screen stops in the splash screen
I will share you my package.json
{
"dependencies": {
"#expo/cli": "^0.3.2",
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-community/datetimepicker": "6.1.2",
"#react-native-community/slider": "4.2.1",
"#react-native-masked-view/masked-view": "0.2.6",
"#react-navigation/drawer": "^6.1.4",
"#react-navigation/native": "^6.0.4",
"#react-navigation/stack": "^6.0.9",
"#unimodules/core": "^7.1.2",
"#unimodules/react-native-adapter": "^6.3.9",
"babel-core": "7.0.0-bridge.0",
"babel-preset-expo": "~9.1.0",
"expo": "^45.0.0",
"expo-camera": "~12.2.0",
"expo-cli": "5.4.3",
"expo-constants": "~13.1.1",
"expo-device": "~4.2.0",
"expo-image-manipulator": "~10.3.1",
"expo-media-library": "~14.1.0",
"expo-notifications": "~0.15.4",
"expo-screen-orientation": "~4.2.0",
"expo-splash-screen": "~0.15.1",
"expo-sqlite": "~10.2.0",
"expo-updates": "~0.13.4",
"expo-web-browser": "~10.2.1",
"formik": "^2.2.9",
"moment": "^2.29.1",
"qs": "^6.10.2",
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-calendars": "^1.1254.0",
"react-native-gesture-handler": "~2.2.1",
"react-native-maps": "0.30.2",
"react-native-mask-text": "^0.2.2",
"react-native-modal-datetime-picker": "^10.0.0",
"react-native-modal-selector": "^2.0.3",
"react-native-reanimated": "~2.8.0",
"react-native-roll-picker": "^1.0.6",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-version-check-expo": "^3.4.2",
"rn-pdf-reader-js": "^0.3.0",
"sentry-expo": "^4.2.0",
"yup": "^0.32.11"
},
"resolutions": {
"#expo/config-plugins": "^4.1.0",
"#expo/prebuild-config": "^4.0.0",
"expo-modules-autolinking": "~0.8.1"
},
"devDependencies": {
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest-expo": "^45.0.0",
"metro-react-native-babel-preset": "^0.73.3",
"react-dom": "17.0.2",
"react-test-renderer": "^16.8.6"
},
"jest": {
"preset": "jest-expo",
"collectCoverage": true,
"moduleDirectories": [
"node_modules"
],
"setupFiles": [
"./__tests__/setup.js"
],
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|react-clone-referenced-element|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|sentry-expo|native-base))"
],
"coveragePathIgnorePatterns": [
"/node_modules/",
"/__tests__",
"/assets"
]
}
}
cmd expo doctor :
Found invalid:
#unimodules/core#7.1.2
(for more info, run: npm why #unimodules/core)
Expected to not find any copies of #unimodules/react-native-adapter
Found invalid:
#unimodules/react-native-adapter#6.3.9
(for more info, run: npm why #unimodules/react-native-adapter)
But I have to use these modules otherwise locally it does not work
EXPO 45
In my root file I used like this the SplashScreen.hideAsync() in the useEffect:
SplashScreen.preventAutoHideAsync();
export default function App() {
useEffect(() => {
setTimeout(async () => {
console.log('useEffect Splash ?');
await SplashScreen.hideAsync();
}, 3000);
}, []);
return (
<AuthProvider>
<RootNavigator />
</AuthProvider>
);
}
Locally it works perfectly after 3 seconds and if I put 10 in the setTimeOut after 10 seconds the splashScreen hides
But in the APK the splashScreen does not hide
If anyone of you has encountered this problem or has an idea of how to solve it, I'm all ears!
I thank you in advance

Test suite failed to run: node_modules/#react-native/polyfills/error-guard.js: Missing semicolon

I have searched around for this error and found numerous people reporting it, but none of the solution tried have worked for me. The project I'm working with was ejected from expo with react-native v0.63 installed, and then upgraded to react-native v0.64.3. Everything else is working fine, but the tests are failing. On running yarn test, all the unit tests throw the same error:
src/screens/ScreenTest/ScreenTest.test.js
● Test suite failed to run
SyntaxError: /node_modules/#react-native/polyfills/error-guard.js: Missing semicolon. (14:4)
12 | let _inGuard = 0;
13 |
> 14 | type ErrorHandler = (error: mixed, isFatal: boolean) => void;
| ^
15 | type Fn<Args, Return> = (...Args) => Return;
16 |
17 | /**
at instantiate (node_modules/#babel/parser/lib/index.js:72:32)
at constructor (node_modules/#babel/parser/lib/index.js:367:12)
at Parser.raise (node_modules/#babel/parser/lib/index.js:3706:19)
at Parser.semicolon (node_modules/#babel/parser/lib/index.js:4151:10)
at Parser.parseExpressionStatement (node_modules/#babel/parser/lib/index.js:15453:10)
at Parser.parseStatementContent (node_modules/#babel/parser/lib/index.js:14986:19)
at Parser.parseStatement (node_modules/#babel/parser/lib/index.js:14838:17)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/parser/lib/index.js:15495:25)
at Parser.parseBlockBody (node_modules/#babel/parser/lib/index.js:15486:10)
at Parser.parseProgram (node_modules/#babel/parser/lib/index.js:14748:10)
at Parser.parseTopLevel (node_modules/#babel/parser/lib/index.js:14735:25)
at Parser.parse (node_modules/#babel/parser/lib/index.js:16764:10)
at parse (node_modules/#babel/parser/lib/index.js:16816:38)
at parser.next (<anonymous>)
at normalizeFile.next (<anonymous>)
at run.next (<anonymous>)
at transform.next (<anonymous>)
at evaluateSync (node_modules/gensync/index.js:251:28)
at sync (node_modules/gensync/index.js:89:14)
at ScriptTransformer.transformSource (node_modules/#jest/transform/build/ScriptTransformer.js:481:35)
at ScriptTransformer._transformAndBuildScript (node_modules/#jest/transform/build/ScriptTransformer.js:586:40)
at ScriptTransformer.transform (node_modules/#jest/transform/build/ScriptTransformer.js:624:25)
at Object.<anonymous> (node_modules/react-native/jest/setup.js:300:6)
Another thing to note is that I have babel.config.js file in my project already, since a lot of answers mentioned moving from .babelrc to babel.config.js as a solution to this problem, but it didn't help. just to be sure i also tried removing the babel.config.js and adding a .babelrc but that did not work either.
I'm at my wits end here and any help is greatly appreciated!
So far I've tried:
Upgrading/downgrading the jest, babel, and any dependencies to a newer version
How can I stop my React Native tests bombing out on Flow types in Node Modules? => Fixes posted in this thread
https://github.com/react-native-community/upgrade-support/issues/152 => More fixes from this issue
Changing babel plugins and adding/removing transformIgnorePatterns
Creating a fresh, bare react-native#0.64.3 project and running the default test (tests pass after downgrading babel to the recommended version)
babel.config.js:
module.exports = function (api) {
api.cache(false)
return {
env: {
production: {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'module:react-native-dotenv',
'react-native-reanimated/plugin',
'transform-remove-console',
],
},
development: {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['module:react-native-dotenv', 'react-native-reanimated/plugin'],
},
},
}
}
package.json:
{
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#gorhom/bottom-sheet": "^4.4.2",
"#pnthach95/react-native-root-view-background": "^1.2.0",
"#ptomasroos/react-native-multi-slider": "^2.2.2",
"#react-native-async-storage/async-storage": "^1.13.4",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/netinfo": "^8.3.0",
"#react-native-community/push-notification-ios": "^1.8.0",
"#react-native-firebase/analytics": "12.9.3",
"#react-native-firebase/app": "12.9.3",
"#react-native-firebase/auth": "^12.1.0",
"#react-native-firebase/crashlytics": "12.9.3",
"#react-native-firebase/dynamic-links": "10.8.1",
"#react-native-firebase/in-app-messaging": "12.9.3",
"#react-native-firebase/messaging": "^12.1.0",
"#react-native-firebase/perf": "12.9.3",
"#react-native-firebase/remote-config": "12.9.3",
"#react-native-google-signin/google-signin": "^6.0.1",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "1.9.2",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/core": "^5.16.1",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.6",
"#react-navigation/stack": "^6.3.1",
"#rematch/core": "^2.0.0",
"#rematch/loading": "^2.0.0",
"#sentry/react-native": "^2.6.2",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"accordion-collapse-react-native": "^0.3.2",
"axios": "^0.20.0",
"babel-eslint": "^10.1.0",
"babel-plugin-inline-dotenv": "^1.6.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint-plugin-react-native": "^3.11.0",
"eslint-plugin-unused-imports": "^1.1.1",
"expo": "^40.0.0",
"expo-document-picker": "~8.4.1",
"expo-file-system": "~9.3.0",
"expo-location": "~10.0.0",
"expo-splash-screen": "~0.8.1",
"expo-status-bar": "~1.0.3",
"expo-web-browser": "~8.6.0",
"firebase": "^8.4.3",
"intl": "^1.2.5",
"lodash": "^4.17.20",
"lottie-ios": "3.4.0",
"lottie-react-native": "^5.1.4",
"moment": "^2.29.1",
"moment-duration-format": "^2.3.2",
"patch-package": "^6.4.7",
"postinstall-postinstall": "^2.1.0",
"prop-types": "^15.7.2",
"radio-buttons-react-native": "^1.0.4",
"react": "17.0.2",
"react-calendly": "^4.0.0",
"react-dom": "16.13.1",
"react-intl": "^5.24.6",
"react-native": "0.64.3",
"react-native-appsflyer": "6.8.2",
"react-native-background-timer": "^2.4.1",
"react-native-bootsplash": "^3.2.2",
"react-native-code-push": "^7.0.4",
"react-native-confirmation-code-field": "^6.5.1",
"react-native-date-picker": "^3.2.8",
"react-native-device-info": "^8.0.0",
"react-native-dotenv": "^2.5.0",
"react-native-fast-image": "^8.5.11",
"react-native-fbsdk-next": "^4.2.0",
"react-native-fingerprint-scanner": "^6.0.0",
"react-native-fs": "^2.18.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-header-scroll-view": "^0.10.3",
"react-native-image-picker": "~4.2.1",
"react-native-in-app-review": "^4.1.1",
"react-native-inappbrowser-reborn": "^3.5.1",
"react-native-indicators": "^0.17.0",
"react-native-insta-story": "^1.1.8",
"react-native-keyboard-aware-scroll-view": "^0.9.2",
"react-native-linear-gradient": "^2.6.2",
"react-native-modal": "^13.0.0",
"react-native-offline": "^6.0.0",
"react-native-otp-autocomplete": "^1.0.7",
"react-native-pager-view": "5.4.12",
"react-native-paper": "^4.2.0",
"react-native-permissions": "^3.0.0",
"react-native-picker-select": "^8.0.0",
"react-native-play-install-referrer": "^1.1.8",
"react-native-popup-menu": "^0.15.11",
"react-native-portal": "^1.3.0",
"react-native-progress": "^4.1.2",
"react-native-push-notification": "7.3.1",
"react-native-quiz-maker": "^0.1.0",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-razorpay": "^2.2.7",
"react-native-reanimated": "~2.5.0",
"react-native-responsive-fontsize": "^0.5.1",
"react-native-restart": "^0.0.22",
"react-native-rss-parser": "https://github.com/adityabishtedu/react-native-rss-parser/tarball/rss-patch",
"react-native-safe-area-context": "3.4.1",
"react-native-screens": "^3.17.0",
"react-native-session-stats": "https://github.com/balazsherczeg/react-native-session-stats.git",
"react-native-shadow-2": "^6.0.5",
"react-native-share": "^7.9.0",
"react-native-signature-canvas": "^4.3.0",
"react-native-simple-toast": "^1.1.3",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-snap-carousel": "4.0.0-beta.6",
"react-native-step-indicator": "^1.0.3",
"react-native-steps": "^1.3.0",
"react-native-svg": "^12.1.1",
"react-native-tab-view": "^3.1.1",
"react-native-tab-view-fixed": "^0.0.69",
"react-native-thumbnail-video": "^0.1.2",
"react-native-tracking-transparency": "^0.1.1",
"react-native-ultimate-config": "3.4.2",
"react-native-unimodules": "~0.12.0",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "^5.1.1",
"react-native-view-shot": "^3.4.0",
"react-native-walkthrough-tooltip": "^1.1.11",
"react-native-web": "~0.13.12",
"react-native-webp-format": "^1.1.2",
"react-native-webview": "^11.18.1",
"react-native-youtube-iframe": "^2.2.2",
"react-navigation": "^4.4.4",
"react-number-format": "^4.4.1",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-axios-middleware": "^4.0.1",
"redux-thunk": "^2.3.0",
"rn-faded-scrollview": "^1.0.12",
"rn-fetch-blob": "^0.12.0",
"validate.js": "^0.13.1",
"victory-native": "^36.6.0",
"volkeno-react-native-quiz-multiple-choice": "^1.0.3"
},
"devDependencies": {
"#babel/core": "^7.20.5",
"#babel/runtime": "^7.20.6",
"#babel/preset-typescript": "^7.16.5",
"#commitlint/cli": "^17.0.3",
"#commitlint/config-conventional": "^17.0.3",
"babel-jest": "~26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-preset-expo": "8.3.0",
"commitizen": "^4.2.4",
"cz-conventional-changelog": "3.3.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.26.0",
"husky": "^8.0.0",
"jest": "~26.6.3",
"metro-react-native-babel-preset": "^0.73.4",
"prettier": "^2.4.1",
"react-native-bundle-visualizer": "^2.2.1",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
Unfortunately, I've had the same issue and so I stumbled over your question. After some hours I found the problem and the solution.
In my case the issue happened when I upgraded jest from 27 to 28 (https://jestjs.io/docs/28.x/upgrading-to-jest28) because of this change:
Babel config
babel-jest now passes root: config.rootDir to Babel when resolving configuration. This improves compatibility when using projects with differing configuration, but
it might mean your babel config isn't picked up in the same way anymore. You can override this option by passing options to babel-jest in your configuration.
My babel.config.js was located in my react native application root .\babel.config.js but my .\jest.config.js file defined as root (to search for the tests): rootDir: "src". With the change from 27 to 28 the babel.config.js file was not longer found because babel-jest searched in ./src/babel.config.js and thus exactly the same error occurred like you described above:
SyntaxError: /node_modules/#react-native/polyfills/error-guard.js: Missing semicolon. (14:4)
because babel no longer transpiled the error-guard.js file.
As you have still jest 26 (in your package.json) your case might be different - but the problem is that your babel.config.js file is not or no longer found and thus babel-jest is no longer transpiling any file.
Not sure if this helps you - I used the following solution:
Create a new file ./babel-jest.js with the content
module.exports = require("babel-jest").createTransformer({
rootMode: "upward",
})
Reference this in .\jest.config.js like:
transform: {
"^.+\\.jsx?$": "../babel-jest.js",
},
Now, instead of babel-jest directly the new transformer from .\src\..\babe-jest.js is called including the option to search for the babel.config.js file upwards (and then finally finding it in .\babel.config.js just one level above).
This solution is also described here:
Babel: root programmatic options
and here
https://github.com/facebook/jest/issues/8006
There are other proposals to use:
transform: {
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { rootMode: 'upward' }],
},
in
https://github.com/facebook/jest/issues/8006
and even on the jest page it self
https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
but unfortunately this was not working for me.
There is another option you can give a try (described also in https://github.com/facebook/jest/issues/8006).
You can create a babel.config.js file in the root for your tests and reference the original file via
module.exports = require('../babel.config.js');
Hope this helps a bit.

How to mock a function using detox in react-native

How to mock functions in react-native using detox.
I am using google sign in app and want to mock the function for google sign in
tried jest and #testinglibrary but there I am not able to get the elements by getText/getTestID for picker or other components. There is many things about testing in react-native but I am not able to find the right way to do it.
How to test a react native app where I am using google sign in and each page is fetching details about users from AWS database and displaying details for modification.
Currently i am using the following libraries
"#react-native-async-storage/async-storage": "^1.15.5",
"#react-native-google-signin/google-signin": "^7.0.0-alpha.3",
"#react-native-picker/picker": "^1.16.5",
"#react-navigation/bottom-tabs": "^6.0.4",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.0.4",
"add": "^2.0.6",
"react": "17.0.1",
"react-native": "0.64.2",
"react-native-elements": "^3.4.2",
"react-native-file-picker": "0.0.21",
"react-native-gesture-handler": "^1.10.3",
"react-native-pager-view": "^5.4.1",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.0",
"react-native-screens": "^3.5.0",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^8.1.0"
},
"devDependencies": {
"#babel/core": "^7.14.8",
"#babel/runtime": "^7.14.8",
"#react-native-community/eslint-config": "^3.0.0",
"#testing-library/react-native": "^8.0.0",
"babel-jest": "^27.0.6",
"detox": "^18.20.3",
"eslint": "^7.31.0",
"jest": "^27.0.6",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!#ngrx|(?!deck.gl)|ng-dynamic)"
]
},
"detox": {
"configurations": {
"android.emu.debug": {
"binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
"build": "cd android && gradlew clean assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
"type": "android.emulator",
"name": "Pixel_2_API_29"
}
},
"test-runner": "jest",
"testMatch": [
"<roots>/**/*.spec.js"
]
}
Have a look at the mocking guide for Detox.
Please note that you cannot apply mocking techniques familiar from the prior Jest experience, even though Detox runs on top of Jest, e.g.:
jest.mock('./src/myModule'); // NO, THIS WON'T WORK
All the mocking must be conducted with the help of Metro bundler, which powers React Native under the hood.

Invariant Violation: requireNativeComponent: "VRTImage" was not found in the UIManager

I have some issues with my react native VR/AR.
I used the react-viro module.
Here are my code and error.
import {
ViroScene,
ViroImage,
Viro360Image
} from 'react-viro';
<ViroScene style={[S.container]}>
<Viro360Image source={require("../../assets/ar/res/guadalupe_360.jpg")} onLoadEnd={console.log('image is loaded successfully.')}/>
<ViroImage
position={[0, 0, -5]} source={require("../../assets/ar/res/grid_bg.jpg")} scale={[.1, .1, .1]}
opacity={0.0} onClick={this._onTitleClicked}
animation={{
name : "showTitleAnimation",
run : this.state.runShowTitleAnimation,
loop : false,
}} />
</ViroScene>
and here is my package.json
{
"scripts": {
"start": "expo start",
"web": "expo start --web",
"build": "expo build:android",
"build:ios": "expo build:ios",
"fingerprint": "expo fetch:android:hashes"
},
"dependencies": {
"#chartiful/react-native-chart-builder": "^0.1.8",
"#chartiful/react-native-vertical-bar-graph": "^0.1.2",
"#miblanchard/react-native-slider": "^1.5.0",
"#react-native-community/masked-view": "^0.1.10",
"axios": "^0.21.1",
"expo": "^40.0.0",
"expo-font": "~8.4.0",
"expo-image-picker": "~9.2.1",
"expo-linear-gradient": "~8.4.0",
"expo-splash-screen": "~0.8.1",
"firebase": "7.9.0",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"native-base": "^2.15.2",
"prop-types": "^15.7.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-chart-kit": "^6.11.0",
"react-native-country-picker-modal": "^2.0.0",
"react-native-display-keyboard": "^0.2.0",
"react-native-easy-grid": "^0.2.2",
"react-native-geocoding": "^0.5.0",
"react-native-gesture-handler": "~1.8.0",
"react-native-google-places-autocomplete": "^2.1.3",
"react-native-maps": "0.27.1",
"react-native-maps-directions": "^1.8.0",
"react-native-modal": "^11.6.1",
"react-native-normalize": "^1.0.1",
"react-native-phone-input": "^0.2.4",
"react-native-progress-circle": "^2.1.0",
"react-native-screens": "^2.15.2",
"react-native-slider": "^0.11.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-steps": "^1.3.0",
"react-native-svg": "^12.1.0",
"react-native-swiper": "^1.6.0",
"react-native-timeago": "^0.5.0",
"react-navigation": "^4.4.3",
"react-navigation-stack": "^2.10.2",
"react-redux": "^7.2.2",
"react-viro": "^2.17.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"rn-range-slider": "^2.0.4"
},
"devDependencies": {
"#babel/core": "~7.12.10",
"babel-jest": "~26.6.3",
"babel-preset-expo": "8.3.0",
"jest": "~26.6.3",
"react-test-renderer": "~17.0.1"
},
"private": true,
"name": "guix",
"version": "1.0.0"
}
I tried other modules and it returns the same error.
I tried the "react-native-360" and "react-native-vr"
Also, now this is expo but I tried this on react-native-cli also. but same was true. What is the VRTImage?
Why I get this error and what is the solution?
Here is my error
I am not sure i am completely Correct or not, But i face same situation recently and when i go through react-viro docs.
i get to know few things.
react-viro basically build on react-native version .59
gradle build and sdk version is about 28.0.3
android manifest file should be updated using setup-ide.sh android command file is available in nodemodules/react-viro/bin/js or you can manually update too! you can get docs from react-viro docs
https://docs.viromedia.com/docs/installing-viro-android
So the issue begins here new SDK Version is not supporting dependencies of react-viro and we may not be able to found effective solution or even solution(on basis of my current Research).
And Apart of that expo have not added react-viro ! So either way using expo it is impossible for now.
This is What i learned from R and D and changing gradle Version and Package version accordingly and it is became very difficult to build with downgrading react-native and sdk and gradle version and ofcource dependency of all packages that we are going to use.

React-native: index.js file missing from node_modules\#react-native-community\masked-view

I am getting this below error while building react-native app.
#react-native-community/masked-view and #react-navigation\stack are up to date but not sure why this package is not being resolved while building.
error: Error: While trying to resolve module `#react-native-community/masked-view` from file `C:\..\..\node_
modules\#react-navigation\stack\src\views\MaskedViewNative.tsx`, the package `C:\..\..\node_modules\#react-n
ative-community\masked-view\package.json` was successfully found. However, this package itself specifies a `main` module
field that could not be resolved (`C:\..\..\node_modules\#react-native-community\masked-view\index.js`. Indeed, none of these files exist:
my package.json
{
"name": "appname",
"version": "0.0.1",
"private": true,
"scripts": {
..
},
"dependencies": {
"#react-native-community/async-storage": "^1.11.0",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-firebase/app": "^8.4.6",
"#react-native-firebase/auth": "^9.3.1",
"#react-native-firebase/firestore": "^7.8.7",
"#react-native-firebase/functions": "^7.4.9",
"#react-native-firebase/storage": "^7.4.10",
"#react-navigation/bottom-tabs": "5.10.2",
"#react-navigation/drawer": "5.10.2",
"#react-navigation/material-top-tabs": "5.3.2",
"#react-navigation/native": "5.8.2",
"#react-navigation/stack": "5.11.1",
"#reduxjs/toolkit": "^1.4.0",
"axios": "^0.19.2",
"lodash": "^4.17.19",
"moment": "^2.27.0",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-animatable": "^1.3.3",
"react-native-fast-image": "^8.3.2",
"react-native-gesture-handler": "^1.7.0",
"react-native-global-props": "^1.1.5",
"react-native-keyboard-aware-scroll-view": "^0.9.2",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "^1.10.1",
"react-native-safe-area-context": "^3.1.1",
"react-native-screens": "^2.9.0",
"react-native-spinkit": "^1.5.0",
"react-native-vector-icons": "^7.0.0",
"react-redux": "^7.2.1"
},
"devDependencies": {
...
},
"jest": {
"preset": "react-native"
}
}
Update and temporary solution:
I have tried uninstalling #react-native-community/masked-view a few times.
I have tried deleting node modules folder, clearing cache using commands like npm cache clean --force, react-native start --reset-cache but nothing worked so far.
Then I realized #react-native-community/masked-view package is missing index.js file from installation.
I copied js folder and index.js file from another project for #react-native-community/masked-view and project starts building.
I am not sure why this folder and index file is missing from the installation itself.
Any help on this issue is much appreciated.