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

Question

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

Answer 1

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.