Do design header

Author: chnirt

README.md

@@ -45,3 +45,7 @@
 11. Design UI
 
 - https://www.youtube.com/watch?v=TkuQAjnaSbM
+
+12. Asset free UI - UX
+
+- https://www.vecteezy.com/vector-art/251964-mobile-payment-online-service-for-modern-business-website-socia

src/navigation/ContentDrawer.js

@@ -5,19 +5,22 @@ import {Text, Button} from 'react-native';
 import {CTX} from '../tools/context';
 
 export default function CustomDrawerContent({progress, ...rest}) {
-  const {navigation} = rest;
+  const {navigation, closeDrawer} = rest;
   const {navigate} = navigation;
 
   const authContext = useContext(CTX);
   const {_logout} = authContext;
 
   // const {loading, error, data} = useQuery(GET_GREETING);
+  function _onClose() {
+    closeDrawer();
+  }
 
   function _onLogout() {
     _logout();
-    console.log(navigate);
     navigate('Login');
   }
+
   const translateX = Animated.interpolate(progress, {
     inputRange: [0, 1],
     outputRange: [-100, 0],
@@ -32,6 +35,7 @@ export default function CustomDrawerContent({progress, ...rest}) {
         transform: [{translateX}],
       }}>
       <Text>Hello</Text>
+      <Button onPress={_onClose} title="Close" color="#841584" />
       <Button onPress={_onLogout} title="Log out" color="#841584" />
     </Animated.View>
   );

src/navigation/DashboardNavigator.js

@@ -1,15 +1,41 @@
 import React from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
+import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
 
 import TabNavigator from './TabNavigator';
 
 const Stack = createStackNavigator();
 
 export default function DashboardStackNavigator(props) {
+  const {toggleDrawer} = props;
+
   return (
     <Stack.Navigator>
       <Stack.Screen
         name="DashboardTabNavigator"
+        options={{
+          title: 'Chnirt',
+          headerTitleAlign: 'left',
+          headerStyle: {backgroundColor: '#fff'},
+          headerLeft: () => (
+            <FontAwesome5Icon
+              style={{paddingLeft: 20}}
+              name={'bars'}
+              // color={'red'}
+              size={24}
+              onPress={toggleDrawer}
+            />
+          ),
+          headerRight: () => (
+            <FontAwesome5Icon
+              style={{paddingRight: 20}}
+              name={'bell'}
+              // color={'red'}
+              size={24}
+              onPress={toggleDrawer}
+            />
+          ),
+        }}
         children={() => <TabNavigator {...props} />}
       />
     </Stack.Navigator>

src/navigation/DrawerNavigator.js

@@ -10,25 +10,41 @@ const Drawer = createDrawerNavigator();
 export default function DrawerNavigator(props) {
   return (
     <Drawer.Navigator
+      // headerLeft={() => (
+      //   <Icon
+      //     style={{paddingLeft: 10}}
+      //     onPress={() => navigation.openDrawer()}
+      //     name={Platform.OS === 'ios' ? 'ios-menu' : 'md-menu'}
+      //     size={30}
+      //   />
+      // )}
+      // headerMode="screen"
+      // screenOptions={{
+      //   headerTintColor: 'white',
+      //   headerStyle: {backgroundColor: 'tomato'},
+      // }}
       // 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} />}>
+      drawerContentOptions={{
+        // activeTintColor: primaryColor,
+        itemStyle: {marginVertical: 0},
+      }}
+      drawerContent={newProps => (
+        <CustomDrawerContent
+          {...props}
+          closeDrawer={newProps.navigation.closeDrawer}
+        />
+      )}>
       <Drawer.Screen
         name="Dashboard"
-        children={() => <DashboardNavigator {...props} />}
+        children={newProps => (
+          <DashboardNavigator
+            {...props}
+            toggleDrawer={newProps.navigation.toggleDrawer}
+          />
+        )}
       />
     </Drawer.Navigator>
   );

src/navigation/TabNavigator.js

@@ -42,26 +42,37 @@ function Profile() {
 export default function TabNavigator(props) {
   return (
     <Tab.Navigator
-      initialRouteName="Feed"
+      initialRouteName="Profile"
+      navigationOptions={{title: 'routeName'}}
       tabBarOptions={{
         activeTintColor: primaryColor,
       }}>
       <Tab.Screen
         name="Feed"
         options={{
-          tabBarLabel: 'Home',
+          tabBarLabel: () => <View />,
           tabBarIcon: ({color, size}) => (
             <FontAwesome5 name={'home'} color={color} size={size} />
           ),
         }}
         children={() => <Feed {...props} />}
       />
+      <Tab.Screen
+        name="Notifications1"
+        options={{
+          tabBarLabel: () => <View />,
+          tabBarIcon: ({color, size}) => (
+            <FontAwesome5 name={'heart'} color={color} size={size} />
+          ),
+        }}
+        children={() => <Notifications {...props} />}
+      />
       <Tab.Screen
         name="Notifications"
         options={{
-          tabBarLabel: 'Notifications',
+          tabBarLabel: () => <View />,
           tabBarIcon: ({color, size}) => (
-            <FontAwesome5 name={'bell'} color={color} size={size} />
+            <FontAwesome5 name={'heart'} color={color} size={size} />
           ),
         }}
         children={() => <Notifications {...props} />}
@@ -70,7 +81,7 @@ export default function TabNavigator(props) {
         name="Profile"
         component={Profile}
         options={{
-          tabBarLabel: 'Profile',
+          tabBarLabel: () => <View />,
           tabBarIcon: ({color, size}) => (
             <FontAwesome5 name={'user'} color={color} size={size} />
           ),

src/theme/index.js

@@ -1,3 +1,4 @@
 const primaryColor = '#e91e63';
+const secondaryColor = '#3E54DA';
 
 export {primaryColor};