updated packages and navigation

navigation/Menu.js

@@ -1,57 +1,55 @@
 import React from "react";
-import { DrawerItems } from "react-navigation";
+import { useSafeArea } from "react-native-safe-area-context";
 import {
   ScrollView,
   StyleSheet,
-  Dimensions,
   Image
 } from "react-native";
-import { Block, theme } from "galio-framework";
+import { Block, Text, theme } from "galio-framework";
 
 import Images from "../constants/Images";
+import { DrawerItem as DrawerCustomItem } from '../components';
 
-const { width } = Dimensions.get("screen");
-
-const Drawer = props => (
-  <Block style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
-    <Block flex={0.05} style={styles.header}>
-      <Image styles={styles.logo} source={Images.Logo} />
+function CustomDrawerContent({ drawerPosition, navigation, profile, focused, state, ...rest }) {
+  const insets = useSafeArea();
+  const screens = [
+    "Home", 
+    "Profile",
+    "Account",
+    "Elements",
+    "Articles",
+  ];
+  return (
+    <Block
+      style={styles.container}
+      forceInset={{ top: 'always', horizontal: 'never' }}
+    >
+      <Block flex={0.06} style={styles.header}>
+        <Image styles={styles.logo} source={Images.Logo} />
+      </Block>
+      <Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
+        <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
+          {screens.map((item, index) => {
+              return (
+                <DrawerCustomItem
+                  title={item}
+                  key={index}
+                  navigation={navigation}
+                  focused={state.index === index ? true : false}
+                />
+              );
+            })}
+            <Block flex style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}>
+              <Block style={{ borderColor: "rgba(0,0,0,0.2)", width: '100%', borderWidth: StyleSheet.hairlineWidth }}/>
+              <Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8, fontFamily: 'open-sans-regular' }}>DOCUMENTATION</Text>
+            </Block>
+            <DrawerCustomItem title="Getting Started" navigation={navigation} />
+        </ScrollView>
+      </Block>
     </Block>
-    <Block flex>
-      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
-        <DrawerItems {...props} />
-      </ScrollView>
-    </Block>
-  </Block>
-);
+  );
+}
 
-const Menu = {
-  contentComponent: props => <Drawer {...props} />,
-  drawerBackgroundColor: "white",
-  drawerWidth: width * 0.8,
-  contentOptions: {
-    activeTintColor: "white",
-    inactiveTintColor: "#000",
-    activeBackgroundColor: "transparent",
-    itemStyle: {
-      width: width * 0.75,
-      backgroundColor: "transparent"
-    },
-    labelStyle: {
-      fontSize: 18,
-      marginLeft: 12,
-      fontWeight: "normal"
-    },
-    itemsContainerStyle: {
-      paddingVertical: 16,
-      paddingHorizonal: 12,
-      justifyContent: "center",
-      alignContent: "center",
-      alignItems: "center",
-      overflow: "hidden"
-    }
-  }
-};
 
 const styles = StyleSheet.create({
   container: {
@@ -65,4 +63,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default Menu;
+export default CustomDrawerContent;