Working app

1 files changed, 75 insertions, 16 deletions

diff --git a/App.js b/App.js
index 181f3ce..ac60ce3 100644
--- a/App.js
+++ b/App.js
@@ -1,21 +1,80 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { Image, TouchableOpacity } from 'react-native'
+import { NavigationContainer, } from '@react-navigation/native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+const Drawer = createDrawerNavigator();
 
-export default function App() {
+import NotesList from "./components/NotesList"
+import NoteView from "./components/NoteView"
+import CategoryView from "./components/CategoryView"
+import Options from "./components/Options"
+import CustomDrawerContent from "./components/DrawerContent"
+
+import kIcon from "./assets/kebab.png"
+
+function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <NavigationContainer>
+      <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
+        <Drawer.Screen name="notesList" component={NotesList} options={{
+          title: 'Notes list',
+          headerRight: () => <TouchableOpacity onPress={() => window.navigation.navigate("options")}><Image source={kIcon} style={{ width: 30, height: 30, marginRight: 10 }} /></TouchableOpacity>,
+          headerStyle: {
+            backgroundColor: '#ff0000',
+          },
+          headerTintColor: '#ffffff',
+          headerTitleStyle: {
+            fontWeight: 'bold',
+          },
+        }} />
+        <Drawer.Screen name="addNote" component={NoteView} options={{
+          title: 'Add note',
+          headerStyle: {
+            backgroundColor: '#0000FF',
+          },
+          headerTintColor: '#ffffff',
+          headerTitleStyle: {
+            fontWeight: 'bold',
+          },
+
+        }} />
+        <Drawer.Screen name="editNote" component={NoteView} options={{
+          title: 'Edit note',
+          headerStyle: {
+            backgroundColor: 'darkgreen',
+          },
+          headerTintColor: '#ffffff',
+          headerTitleStyle: {
+            fontWeight: 'bold',
+          },
+
+        }} />
+        <Drawer.Screen name="addCategory" component={CategoryView} options={{
+          title: 'Add category',
+          headerStyle: {
+            backgroundColor: 'darkorange',
+          },
+          headerTintColor: '#ffffff',
+          headerTitleStyle: {
+            fontWeight: 'bold',
+          },
+
+        }} />
+        <Drawer.Screen name="options" component={Options} options={{
+          title: 'Note list options',
+          headerStyle: {
+            backgroundColor: 'pink',
+          },
+          headerTintColor: '#ffffff',
+          headerTitleStyle: {
+            fontWeight: 'bold',
+          },
+
+        }} />
+      </Drawer.Navigator>
+    </NavigationContainer>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export default App;