createDrawerNavigator causes my page to go white in react native - react-native

Question

I'm facing a problem while trying to implement navigation drawer, i have stack and tab navigation working properly but once i initialize navigation drawer my page goes blank and once i comment the line my page starts working properly.
i don't know how to fix this and i need to learn how to make use of navigation drawer
import React from 'react';
import { StyleSheet, Text, View,Button } from 'react-native';
import { NavigationContainer,useNavigation } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Home = () => {
return(
<Stack.Navigator>
<Stack.Screen name="Dash" component={Dashboard} />
<Stack.Screen name="Login" component={LoginPage} />
</Stack.Navigator>
);
};
const Search = () => (
<View style={styles.color2}>
<Text style={styles.title}>Search</Text>
</View>
);
const Dashboard = () => {
const nav = useNavigation();
return (
<View style={styles.color3}>
<Text style={styles.title}>Dashboard</Text>
<Button title='Login' onPress={() => nav.navigate('Login') }></Button>
</View>
);
};
const LoginPage = () => (
<View style={styles.color2}>
<Text style={styles.title}>Login</Text>
</View>
);
const AppNavigator = () => (
<Tab.Navigator>
<Tab.Screen options={{headerShown: false}} name="Home" component={Home} />
<Tab.Screen name="Search" component={Search} />
</Tab.Navigator>
);
const App = () => (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
export default App;
const styles = StyleSheet.create({
layout: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 32,
marginBottom: 16,
},
color1: {
backgroundColor: 'red',
color: '#fff',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
color2: {
backgroundColor: 'blue',
color: '#fff',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
color3: {
backgroundColor: 'green',
color: '#fff',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Once i comment this line the page starts working properly const Drawer = createDrawerNavigator();
When i open my browser i found these error
Uncaught Error: Module parse failed: Unexpected token (4:9)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export * from "./reanimated1";
| export * from "./reanimated2";
> export * as default from "./Animated";

Answer 1

Thanks for all your contributions, I fix the problem already by adding
plugins: ['react-native-reanimated/plugin']
to my babel.config.js file