themming and try to create awesome theme

src/screens/GroupScreen.tsx

@@ -1,46 +1,146 @@
 import React, { useState } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { FAB, Portal, Provider } from "react-native-paper";
-import Tooltip from "react-native-walkthrough-tooltip";
+import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
+import { FAB } from "react-native-paper";
 import { MaterialIcons } from '@react-native-vector-icons/material-icons';
 import { useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../navigation/AppNavigator";
+import AppView from "../components/AppView";
+import colors from "../components/colors";
+
+// --- Placeholder Data ---
+const myGroupsData = [
+  { id: '1', name: 'Family Savings', members: 5 },
+  { id: '2', name: 'Office Lunch Club', members: 12 },
+];
+const joinedGroupsData = [
+  { id: '3', name: 'Apartment Committee', members: 8 },
+];
+const publicGroupsData = [
+  { id: '4', name: 'City Runners', members: 50 },
+  { id: '5', name: 'Book Readers', members: 25 },
+];
+
+// --- Placeholder Group List Component ---
+const GroupList = ({ data }: { data: any[] }) => {
+  if (data.length === 0) {
+    return <Text style={styles.emptyText}>No groups found.</Text>;
+  }
+
+  return (
+    <FlatList
+      data={data}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item }) => (
+        <View style={styles.groupCard}>
+          <Text style={styles.groupName}>{item.name}</Text>
+          <Text style={styles.groupMembers}>{item.members} members</Text>
+        </View>
+      )}
+    />
+  );
+};
 
 export default function GroupScreen() {
-  const [tooltipVisible, setTooltipVisible] = useState(false);
-      const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  const [activeTab, setActiveTab] = useState("My Groups");
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case "My Groups":
+        return <GroupList data={myGroupsData} />;
+      case "Joined":
+        return <GroupList data={joinedGroupsData} />;
+      case "Public":
+        return <GroupList data={publicGroupsData} />;
+      default:
+        return null;
+    }
+  };
+
   return (
-    <Provider>
+    <AppView backgroundColor={colors.pastelGreen} barStyle="dark-content">
       <View style={styles.container}>
-        <Text style={styles.title}>Groups</Text>
-
-
-    <FAB
-      style={styles.fab}
-      icon={() => <MaterialIcons name="group-add" size={24} color="#eb87a3ff" />}
-      onPress={() => {
-        navigation.navigate('GroupCreation')
-      }}
-    />
-
-
+        {/* --- Header and Segmented Control --- */}
+        <Text style={styles.title}>Your Groups</Text>
+        <View style={styles.segmentedControl}>
+          {["My Groups", "Joined", "Public"].map((tab) => (
+            <TouchableOpacity
+              key={tab}
+              style={[
+                styles.segmentButton,
+                activeTab === tab && styles.segmentButtonActive,
+              ]}
+              onPress={() => setActiveTab(tab)}
+            >
+              <Text style={[
+                styles.segmentText,
+                activeTab === tab && styles.segmentTextActive,
+              ]}>
+                {tab}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+        
+        {/* --- Dynamic Content Area --- */}
+        <View style={styles.contentArea}>
+          {renderContent()}
+        </View>
+        
+        <FAB
+          style={styles.fab}
+          icon={() => <MaterialIcons name="group-add" size={24} color="#333" />}
+          onPress={() => navigation.navigate('GroupCreation')}
+        />
       </View>
-    </Provider>
+    </AppView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#dae4ed",
-    padding: 16,
-    paddingTop: 40,
+    // padding: 16,
+    // paddingTop: 40,
+    // backgroundColor: '#f5f6fa',
   },
   title: {
-    fontSize: 22,
+    fontSize: 26,
     fontWeight: "bold",
     color: "#333",
+    marginBottom: 20,
+  },
+  segmentedControl: {
+    flexDirection: 'row',
+    backgroundColor: '#e0e0e0',
+    borderRadius: 10,
+    padding: 4,
+    marginBottom: 20,
+  },
+  segmentButton: {
+    flex: 1,
+    paddingVertical: 8,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  segmentButtonActive: {
+    backgroundColor: '#fff',
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 5,
+  },
+  segmentText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#555',
+  },
+  segmentTextActive: {
+    color: '#333',
+  },
+  contentArea: {
+    flex: 1,
   },
   fab: {
     position: "absolute",
@@ -50,12 +150,32 @@ const styles = StyleSheet.create({
     height: 70,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#dae4ed",
-    borderRadius: 60,
+    backgroundColor: "#83f5cc",
+    borderRadius: 35,
+    elevation: 4,
   },
-  tooltipText: {
-    color: "#fff",
+  // --- Group List Styles ---
+  groupCard: {
+    backgroundColor: '#fff',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    elevation: 1,
+  },
+  groupName: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  groupMembers: {
     fontSize: 14,
-    fontWeight: "500",
+    color: '#777',
+    marginTop: 4,
+  },
+  emptyText: {
+    textAlign: 'center',
+    marginTop: 50,
+    fontSize: 16,
+    color: '#888',
   },
 });