Fix

Author: chnirt

src/navigation/AppNavigator.js

@@ -7,7 +7,7 @@ import AuthStackNavigator from './AuthNavigator';
 export default createSwitchNavigator(
   {
     AuthLoading: AuthLoadingScreen,
-    Home: DrawerNavigator,
+    Dashboard: DrawerNavigator,
     Auth: AuthStackNavigator,
   },
   {

src/navigation/AuthLoadingNavigator.js

@@ -15,7 +15,7 @@ export default function AuthLoadingScreen(props) {
   });
 
   function _bootstrapAsync() {
-    navigate(token ? 'Home' : 'Auth');
+    navigate(token ? 'Dashboard' : 'Auth');
   }
 
   return (

src/navigation/ContentDrawer.js

@@ -0,0 +1,38 @@
+import React, {useContext} from 'react';
+import Animated from 'react-native-reanimated';
+import {Text, Button} from 'react-native';
+
+import {CTX} from '../tools/context';
+
+export default function CustomDrawerContent({progress, ...rest}) {
+  const {navigation} = rest;
+  const {navigate} = navigation;
+
+  const authContext = useContext(CTX);
+  const {_logout} = authContext;
+
+  // const {loading, error, data} = useQuery(GET_GREETING);
+
+  function _onLogout() {
+    _logout();
+    console.log(navigate);
+    navigate('Login');
+  }
+  const translateX = Animated.interpolate(progress, {
+    inputRange: [0, 1],
+    outputRange: [-100, 0],
+  });
+
+  return (
+    <Animated.View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        transform: [{translateX}],
+      }}>
+      <Text>Hello</Text>
+      <Button onPress={_onLogout} title="Log out" color="#841584" />
+    </Animated.View>
+  );
+}

src/navigation/DashboardNavigator.js

@@ -1,7 +1,17 @@
-import {createStackNavigator} from 'react-navigation-stack';
+import React from 'react';
+import {createStackNavigator} from '@react-navigation/stack';
 
 import TabNavigator from './TabNavigator';
 
-export default createStackNavigator({
-  DashboardTabNavigator: TabNavigator,
-});
+const Stack = createStackNavigator();
+
+export default function DashboardStackNavigator(props) {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="DashboardTabNavigator"
+        children={() => <TabNavigator {...props} />}
+      />
+    </Stack.Navigator>
+  );
+}

src/navigation/DrawerNavigator.js

@@ -1,37 +1,35 @@
-// export default createDrawerNavigator(
-//   {
-//     CustomNavigator,
-//     SettingsScreen,
-//     LegalScreen,
-//     FeedbackScreen,
-//     VersionScreen,
-//   },
-//   {
-//     drawerType: 'slide',
-//     drawerWidth: 260,
-//   },
-// );
-
 import React from 'react';
 import {createDrawerNavigator} from '@react-navigation/drawer';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
-import TabNavigator from './TabNavigator';
-import {primaryColor} from '../theme';
+import DashboardNavigator from './DashboardNavigator';
+import CustomDrawerContent from './ContentDrawer';
 
 const Drawer = createDrawerNavigator();
 
-export default function DrawerNavigator() {
+export default function DrawerNavigator(props) {
   return (
     <Drawer.Navigator
-      drawerStyle={{
-        backgroundColor: '#c6cbef',
-        width: 240,
-      }}
-      drawerContentOptions={{
-        activeTintColor: primaryColor,
-        itemStyle: {marginVertical: 0},
-      }}>
-      <Drawer.Screen name="Dashboard" component={TabNavigator} />
+      // drawerStyle={{
+      //   backgroundColor: '#c6cbef',
+      //   width: 240,
+      // }}
+      // drawerContentOptions={{
+      //   activeTintColor: primaryColor,
+      //   itemStyle: {marginVertical: 0},
+      // }}
+      // navigationOptions={{
+      //   headerStyle: {
+      //     backgroundColor: 'red',
+      //   },
+      //   headerRight: <FontAwesome5 name={'user'} color={'red'} size={24} />,
+      // }}
+      headerRight={() => <FontAwesome5 name={'user'} color={'red'} size={24} />}
+      drawerContent={() => <CustomDrawerContent {...props} />}>
+      <Drawer.Screen
+        name="Dashboard"
+        children={() => <DashboardNavigator {...props} />}
+      />
     </Drawer.Navigator>
   );
 }

src/navigation/TabNavigator.js

@@ -1,10 +1,9 @@
 import React, {useContext} from 'react';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {View, Text, StyleSheet, Button} from 'react-native';
+import {View, Text, StyleSheet} from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
 import {primaryColor} from '../theme';
-import {CTX} from '../tools/context';
 
 const styles = StyleSheet.create({
   container: {
@@ -32,22 +31,9 @@ function Notifications() {
   );
 }
 
-function Profile(props) {
-  console.log(props);
-
-  const authContext = useContext(CTX);
-  const {_logout} = authContext;
-
-  // const {loading, error, data} = useQuery(GET_GREETING);
-
-  function _onLogout() {
-    _logout();
-    navigate('Login');
-  }
-
+function Profile() {
   return (
     <View style={styles.container}>
-      <Button onPress={_onLogout} title="Log out" color="#841584" />
       <Text>Profile</Text>
     </View>
   );
@@ -62,23 +48,23 @@ export default function TabNavigator(props) {
       }}>
       <Tab.Screen
         name="Feed"
-        component={Feed}
         options={{
           tabBarLabel: 'Home',
           tabBarIcon: ({color, size}) => (
             <FontAwesome5 name={'home'} color={color} size={size} />
           ),
         }}
+        children={() => <Feed {...props} />}
       />
       <Tab.Screen
         name="Notifications"
-        component={Notifications}
         options={{
           tabBarLabel: 'Notifications',
           tabBarIcon: ({color, size}) => (
             <FontAwesome5 name={'bell'} color={color} size={size} />
           ),
         }}
+        children={() => <Notifications {...props} />}
       />
       <Tab.Screen
         name="Profile"
@@ -89,6 +75,7 @@ export default function TabNavigator(props) {
             <FontAwesome5 name={'user'} color={color} size={size} />
           ),
         }}
+        children={props => <Profile {...props} />}
       />
     </Tab.Navigator>
   );

src/screens/Login.js

@@ -27,7 +27,7 @@ export default function LoginScreen(props) {
 
     if (email === 'trinhchinchin@gmail.com' && password === '123') {
       _authenticate(accessToken);
-      navigate('Home');
+      navigate('Dashboard');
     } else {
       setErrorMessage('Email or Password is not correct.');
     }

src/screens/Register.js

@@ -22,9 +22,9 @@ export default function RegisterScreen(props) {
 
     if (phone !== '0704498756') {
       navigate('Login');
+    } else {
+      setErrorMessage('Phone has already existed.');
     }
-
-    setErrorMessage('Phone has already existed.');
   }
 
   function _navigateLogin() {