profile left

src/screens/GroupScreen.tsx

@@ -0,0 +1,55 @@
+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 { MaterialIcons } from '@react-native-vector-icons/material-icons';
+
+export default function GroupScreen() {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
+  return (
+    <Provider>
+      <View style={styles.container}>
+        <Text style={styles.title}>Groups</Text>
+
+
+    <FAB
+      style={styles.fab}
+      icon={() => <MaterialIcons name="group-add" size={24} color="#eb87a3ff" />}
+      onPress={() => setTooltipVisible(true)}
+    />
+
+
+      </View>
+    </Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#dae4ed",
+    padding: 16,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "bold",
+    color: "#333",
+  },
+  fab: {
+    position: "absolute",
+    right: 20,
+    bottom: 90,
+    width: 70,
+    height: 70,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#dae4ed",
+    borderRadius: 60,
+  },
+  tooltipText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});