getting error after upgrading to expo sdk 44 to 46 - react-native

Question

I have upgraded my expo application which was expo sdk 44 to expo sdk 46.
After upgrading I got this error and trying to figure this for last 4 days. Any help would be helpful..
Here is the error:
ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/#react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
Steps I followed:
Upgraded Expo SDK into 45 and compiled successfully and then upgraded again into SDK 46
Tried registerRootComponent from a file named main.js refernece from expo
Also tried this answer which refers the multiple copies of react-native-safe-area-context tried this solution also

Answer 1

Fixed this issue:
Step 1:
Install the plugin
yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types
Step 2:
create index.js file inside project folder resolver/react-native/ with following code
import * as StandardModule from 'react-native';
const deprecatedProps = {
ImagePropTypes: require('deprecated-react-native-prop-types/DeprecatedImagePropType'),
TextPropTypes: require('deprecated-react-native-prop-types/DeprecatedTextPropTypes'),
ViewPropTypes: require('deprecated-react-native-prop-types/DeprecatedViewPropTypes'),
ColorPropType: require('deprecated-react-native-prop-types/DeprecatedColorPropType'),
EdgeInsetsPropType: require('deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType'),
PointPropType: require('deprecated-react-native-prop-types/DeprecatedPointPropType'),
};
const imgProx = new Proxy(StandardModule.Image, {
get(obj, prop) {
if (prop === 'propTypes') return deprecatedProps.ImagePropTypes;
return Reflect.get(...arguments);
},
});
const txtProx = new Proxy(StandardModule.Text, {
get(obj, prop) {
if (prop === 'propTypes') return deprecatedProps.TextPropTypes;
return Reflect.get(...arguments);
},
});
// Had to use a proxy because ...StandardModule made think react-native that all modules were
// being used and was triggering some unnecessary validations / native dep checks.
// This prevents that from happening.
const objProx = new Proxy(StandardModule, {
get(obj, prop) {
if (prop in deprecatedProps) {
return deprecatedProps[prop];
}
if (prop === 'Image') {
return imgProx;
}
if (prop === 'Text') {
return txtProx;
}
return Reflect.get(...arguments);
},
});
module.exports = objProx;
Step 3:
configure module resolver inside babel.config.js, depends on your project requirement to blacklist/whitelist certain npm packages to prevent conflicting file.
example module-resolver config :
var path = require('path');
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module-resolver", {
"root": ["."],
resolvePath(sourcePath, currentFile, opts) {
if (
sourcePath === 'react-native' &&
!(
(
currentFile.includes('node_modules/react-native/') || // macos/linux paths
currentFile.includes('node_modules\\react-native\\')
) // windows path
) &&
!(
currentFile.includes('resolver/react-native/') ||
currentFile.includes('resolver\\react-native\\')
)
) {
return path.resolve(__dirname, 'resolver/react-native');
}
/**
* The `opts` argument is the options object that is passed through the Babel config.
* opts = {
* extensions: [".js"],
* resolvePath: ...,
* }
*/
return undefined;
}
}],
],
};
for reference this guide