Error : Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' could not be found - react-native

Question

I followed this tutorial https://medium.com/#ritikjain1272/making-drawer-navigator-and-a-splash-screen-on-your-react-native-app-2fb561ee17f1 And I have been able to work on several Mobile Apps in the past. Which compiled to APK and uploaded to playstore, but this was in the past.
Trying since today and its been very impossible to get it to work as the very usual.
I keep getting this Error
Invariant Violation: TurboModuleRegistry.getEnforcing(...):
'NativeReanimated' could not be found. Verify that a module by this
name is registered in the native binary.
My code is looking like this for App.js
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import Splash from './src/Splash';
import Login from './src/Login';
import Register from './src/Register';
import Dashboard from './src/Dashboard';
import InstantMessage from './src/InstantMessage';
const LoginNavigator = createStackNavigator({
'Login': {
screen: Login,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={12} />
</TouchableOpacity>
),
}),
},
});
const RegisterNavigator = createStackNavigator({
'Register': {
screen: Register,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={12} />
</TouchableOpacity>
),
}),
},
});
const DashboardNavigator = createStackNavigator({
'Home': {
screen: Dashboard,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={12} />
</TouchableOpacity>
),
}),
},
});
const InstantMessageNavigator = createStackNavigator({
'Instant Message': {
screen: InstantMessage,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={12} />
</TouchableOpacity>
),
}),
},
});
const DrawerNavigator = createDrawerNavigator({
Dashboard: {
navigationOptions: {
drawerIcon: (
<Image
source={{uri: 'asset:/icons/megaphone.png'}}
style={{width: 21, height: 21}}
/>
),
drawerLabel: 'Home',
},
screen: DashboardNavigator,
},
InstantMessage: {
navigationOptions: {
drawerIcon: (
<Image
source={{uri: 'asset:/icons/megaphone.png'}}
style={{width: 21, height: 21}}
/>
),
drawerLabel: 'Messages',
},
screen: DashboardNavigator,
},
});
const AppSwitchNavigator = createSwitchNavigator(
{
Splash: {screen: Splash},
Login: {screen: Login},
Drawer: {screen: DrawerNavigator},
},
{
initialRouteName: 'Splash',
},
);
const App = createAppContainer(AppSwitchNavigator);
export default App;
And package.json is looking like this
{
"name": "xxxxxxxxx",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-native-picker/picker": "^1.9.8",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-hr": "^1.1.4",
"react-native-hr-component": "^2.0.3",
"react-native-picker-select": "^8.0.4",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-vector-icons": "^7.1.0",
"react-navigation": "^4.4.3",
"react-navigation-drawer": "^2.6.0",
"react-navigation-stack": "^2.10.2"
},
"devDependencies": {
"#babel/core": "7.12.10",
"#babel/runtime": "7.12.5",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "6.8.0",
"jest": "25.5.4",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
What Can I be possibly doing wrong? I honestly need help. This is a React Native CLI project.

Answer 1

I solved this issue.
You need to install both Libraries with these Versions
react-native-reanimated": "^1.13.2"
"#react-navigation/drawer": "^5.11.4"
This absolutely works for me

Answer 2

I solved this issue by downgrading react-native-reanimated
If your using npm do this:
npm install react-native-reanimated#1.9.9
if your using yarn do this:
yarn upgrade react-native-reanimated#1.9.9
if you want to do it manually change the version react-native-reanimated to react-native-reanimated: ^1.9.9 in package.json then run npm install or yarn add

Answer 3

I got the same issue "Image Loader" in place of "NativeReanimated"
I just stopped the debugger and did the Hard reload with an empty catch on the chrome browser.
It works fine then