Merge pull request #16 from Naveen-g09/tab-style

Tab style
Naveen-g09 · Mar 6, 2024 · 6ce0418 · 6ce0418
2 parents 5a19004 + 3182de9
commit 6ce0418
Show file tree

Hide file tree

Showing 14 changed files with 399 additions and 27 deletions.
diff --git a/app/(tabs)/[id].tsx b/app/(tabs)/[id].tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useLocalSearchParams, Stack } from 'expo-router';
+
+const NewPage = () => {
+  const { id } = useLocalSearchParams();
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen options={{ headerShown: false }} />
+      <Text style={styles.text}>{id} Page</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF', // Add your desired background color
+  },
+  text: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+    color: '#333', // Add your desired text color
+  },
+});
+
+export default NewPage;
diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
@@ -1,7 +1,8 @@
+
 import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { Tabs } from "expo-router";
+import { Link, Tabs } from "expo-router";
 import React from "react";
-import { useColorScheme } from "react-native";
+import { Pressable, useColorScheme } from "react-native";
 
 /**
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
@@ -19,11 +20,33 @@ export default function RootLayout() {
   const colorScheme = useColorScheme();
   return (
     <Tabs>
-      <Tabs.Screen name="index" 
-      options={{
-        title: "Home",
-        tabBarIcon: (props) => <TabBarIcon {...props} name="home" />,
-        headerShown: false}}/>
+
+
+<Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: (props) => <TabBarIcon {...props} name="home" />,
+          headerTitleAlign: "center",
+          headerStyle: {
+            backgroundColor: "powderblue",
+          },
+
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <Pressable>
+                {({ pressed }) => (
+                  <FontAwesome
+                    name="bell-o"
+                    size={25}
+                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
+                  />
+                )}
+              </Pressable>
+            </Link>
+          ),
+        }}
+      />
       <Tabs.Screen name="category" options={{
         tabBarIcon: (props) => <TabBarIcon {...props} name="list" />,
         headerShown: false}}/>
@@ -33,6 +56,7 @@ export default function RootLayout() {
       <Tabs.Screen name="account" options={{
         tabBarIcon: (props) => <TabBarIcon {...props} name="user" />,
         headerShown: false}}/>
+        <Tabs.Screen name="[id]" options={{headerShown: false, href:null}}/>
     </Tabs>
   );
 }
diff --git a/app/(tabs)/account.tsx b/app/(tabs)/account.tsx
@@ -1,5 +1,8 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet, Button } from 'react-native'
+import { BottomSheetModal, useBottomSheetModal } from "@gorhom/bottom-sheet";
+import React, { useRef } from 'react'
+
+import AccountSheet from '../../components/bottomSheet';
 
 //TODO: add a notification icon
 //TODO: add a profile icon
@@ -9,11 +12,83 @@ import React from 'react'
 //TODO: add a logout button
 
 const account = () => {
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const { dismiss } = useBottomSheetModal();
+  const handleOpenPress = () => bottomSheetRef.current?.present();
+
   return (
-    <View>
-      <Text>account</Text>
-    </View>
+    <ScrollView contentContainerStyle={styles.container}>
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Personal Details</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Transactions</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Utility</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Request Help</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>Calendar</Text>
+      </TouchableOpacity>
+
+      {/*        <TouchableOpacity style={styles.button} onPress={handleOpenPress}>
+        <Text style={styles.buttonText}>  Edit Access</Text>
+      </TouchableOpacity> */}
+
+      <Button title="Dismiss" onPress={() => dismiss()} />
+
+      <AccountSheet ref={bottomSheetRef} />
+
+    </ScrollView>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 20,
+    backgroundColor: 'powderblue',
+
+
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    marginVertical: 10,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    width: '80%',
+    height: '10%',
+    shadowColor: '#000', // Shadow color
+    shadowOffset: {
+      width: 0,
+      height: 2, // Shadow offset
+    },
+    shadowOpacity: 0.25, // Shadow opacity
+    shadowRadius: 3.84, // Shadow radius
+    elevation: 5
+  },
+  image: {
+    marginRight: 10,
+  },
+  buttonText: {
+    color: '#000',
+    fontSize: 18,
+    marginLeft: 10,
+    fontWeight: 'bold'
+  },
+});
+
 export default account
diff --git a/app/(tabs)/category.tsx b/app/(tabs)/category.tsx
@@ -1,16 +1,78 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import { View, Text, Button, ScrollView, TouchableOpacity } from 'react-native'
+import React, { useRef } from 'react'
+import { StyleSheet } from 'react-native';
+import { Link } from 'expo-router';
 
 //TODO: add a notification icon
 //TODO: add 4 rectangle grid buttons which has options of everyday help, appliance repair, home cleaning, and moving 
 //TODO: add a search bar
 
 const category = () => {
+
   return (
-    <View>
-      <Text>category</Text>
-    </View>
+    <ScrollView contentContainerStyle={styles.container}>
+
+      <Link href={"/ameneties"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Ameneties</Text>
+        </TouchableOpacity>
+      </Link>
+
+      <Link href={"/help"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Everyday Help</Text>
+        </TouchableOpacity>
+      </Link>
+
+
+      <Link href={"/repair"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Appliances Repair</Text>
+        </TouchableOpacity>
+      </Link>
+    </ScrollView>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'powderblue',
+
+
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    marginVertical: 10,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    width: '80%',
+    height: '10%',
+    shadowColor: '#000', // Shadow color
+    shadowOffset: {
+      width: 0,
+      height: 2, // Shadow offset
+    },
+    shadowOpacity: 0.25, // Shadow opacity
+    shadowRadius: 3.84, // Shadow radius
+    elevation: 5
+  },
+  image: {
+    marginRight: 10,
+  },
+  buttonText: {
+    color: '#000',
+    fontSize: 18,
+    marginLeft: 10,
+    fontWeight: 'bold'
+  },
+});
+
+
 export default category
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
@@ -1,5 +1,7 @@
-import { View, Text } from 'react-native'
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
 import React from 'react'
+import { Link } from 'expo-router';
+import { StyleSheet } from 'react-native';
 
 //TODO: this is homepage of the app
 //TODO: add a notification icon
@@ -9,10 +11,75 @@ import React from 'react'
 
 const index = () => {
   return (
-    <View>
-      <Text>index</Text>
-    </View>
+    <ScrollView contentContainerStyle={styles.container}>
+
+      <Link href={"/(tabs)/visitors"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Visitors Update</Text>
+        </TouchableOpacity>
+      </Link>
+
+      <Link href={"/(tabs)/Events"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Events</Text>
+        </TouchableOpacity>
+      </Link>
+
+
+      <Link href={"/(tabs)/News"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>News</Text>
+        </TouchableOpacity>
+      </Link>
+
+      <Link href={"/(tabs)/Payments"} asChild>
+        <TouchableOpacity style={styles.button} >
+          <Text style={styles.buttonText}>Payment Dues</Text>
+        </TouchableOpacity>
+      </Link>
+
+
+    </ScrollView>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'powderblue',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    marginVertical: 10,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    width: '80%',
+    height: '10%',
+    shadowColor: '#000', // Shadow color
+    shadowOffset: {
+      width: 0,
+      height: 2, // Shadow offset
+    },
+    shadowOpacity: 0.25, // Shadow opacity
+    shadowRadius: 3.84, // Shadow radius
+    elevation: 5
+  },
+  image: {
+    marginRight: 10,
+  },
+  buttonText: {
+    color: '#000',
+    fontSize: 18,
+    marginLeft: 10,
+    fontWeight: 'bold'
+  },
+});
+
+
 export default index
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -5,6 +5,7 @@ import { SplashScreen, Stack } from 'expo-router';
 import React from 'react';
 import { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -52,13 +53,17 @@ function RootLayoutNav() {
   const colorScheme = useColorScheme();
 
   return (
+    <BottomSheetModalProvider>
     <ThemeProvider
           value={colorScheme === "light" ? DefaultTheme : DefaultTheme}
         >
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
+        <Stack.Screen name="modal" options={{
+          title: 'Notifications',
+          presentation: 'modal' }} />
       </Stack>
     </ThemeProvider>
+  </BottomSheetModalProvider>
   );
 }