Update Dev Branch for further development

App.js

@@ -7,6 +7,7 @@ import StackNavigator from "./navigation/StackNavigator";
 import TestScreen from "./screens/TestScreen/TestScreen";
 import HomeScreen from "./screens/HomeScreen/HomeScreenEmpty";
 import FontLoader from "./assets/fonts/FontLoader";
+import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 
 export default function App() {
   const [isLoadingComplete, setLoadingComplete] = useState(false);
@@ -19,10 +20,12 @@ export default function App() {
 
   // make it support multiple comps
   return (
+    <ActionSheetProvider>
     <FontLoader>
     <StackNavigator>
     </StackNavigator>
     </FontLoader>
+    </ActionSheetProvider>
   );
 }
 

app.json

@@ -6,6 +6,14 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
+    "plugins": [
+      [
+        "expo-document-picker",
+        {
+          "iCloudContainerEnvironment": "Production"
+        }
+      ]
+    ],
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -15,7 +23,8 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "com.apple.developer.icloud-container-environment": "Development"
     },
     "android": {
       "adaptiveIcon": {

assets/fonts/FontLoader.tsx

@@ -1,11 +1,14 @@
 // FontLoader.tsx
 import React from "react";
 import { View, ActivityIndicator } from "react-native";
-import { useFonts, Roboto_400Regular } from "@expo-google-fonts/roboto";
+import { useFonts } from "expo-font"
+import { Roboto_400Regular } from "@expo-google-fonts/roboto";
+import { Lato_900Black } from "@expo-google-fonts/lato";
 
 const FontLoader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   let [fontsLoaded] = useFonts({
     Roboto_400Regular,
+    Lato_900Black,
     // Andere Schriftarten können hier hinzugefügt werden
   });
 

components/Buttons/FloatingActionButton.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Text, StyleSheet, View, Dimensions } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome'; // Import your preferred icon library
+import * as Icons from '@fluentui/react-native-icons';
+import { TouchableRipple } from 'react-native-paper';
+
+const deviceWidth = Dimensions.get('window').width;
+
+type ButtonProps = {
+  onPress: () => void;
+  onLongPress?: () => void;
+  title?: string;
+  iconName?: keyof typeof Icons;
+  style?: object; // Consider using a more specific type for style
+};
+
+const FloatingActionButton: React.FC<ButtonProps> = ({
+  onPress,
+  onLongPress,
+  title = 'Save',
+  iconName = '',
+  style = {},
+}) => {
+  const renderIcon = () => {
+    if (!iconName) return null;
+
+    const IconComponent = Icons[iconName];
+    if (!IconComponent) return null;
+
+    return <IconComponent size={24} color="white" style={styles.icon} />;
+  };
+
+  return (
+    <View style={styles.screenContainer}>
+      <View style={styles.fabContainer}>
+        <TouchableRipple borderless={true} style={[styles.fab, style]} rippleColor="rgba(255, 255, 255, .32)" onPress={onPress} onLongPress={onLongPress}>
+          <>
+            {renderIcon()}
+            {title && <Text style={styles.text}>{title}</Text>}
+          </>
+        </TouchableRipple>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  screenContainer: {
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',  
+    backgroundColor: 'white', 
+  },
+  fabContainer: {
+    shadowColor: '#000',
+    marginBottom: 18,
+    marginRight: 13,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.14,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  fab: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    backgroundColor: '#1868F1',
+    borderRadius: 28,
+    padding: 16,
+  },
+  text: {
+    color: 'white',
+    fontSize: 15,
+    marginLeft: 8,
+  },
+  icon: {
+    // Icon styles if needed
+  },
+});
+
+export default FloatingActionButton;

components/Card/Card.tsx

@@ -9,12 +9,14 @@ type CardSize = 'small' | 'medium' | 'large'; // Add all possible size strings i
 
 // Define the props for your Card component
 interface CardProps {
+  descriptionStyle?: ViewStyle;
+  cardHeader?: ReactNode;
   size?: CardSize;
   iconName?: keyof typeof Icons | null; // Use 'keyof typeof Icons' to get the icon names from the Icons object
   iconSize?: number;
   iconColor?: string;
   style?: ViewStyle;
-  title: string;
+  title?: string;
   description?: string;
   children?: ReactNode;
   [key: string]: any; // For the rest of the props using the spread operator
@@ -29,6 +31,8 @@ const Card: React.FC<CardProps> = ({
   title,
   description,
   children,
+  cardHeader,
+  descriptionStyle,
   ...props
 }) => {
 
@@ -51,6 +55,7 @@ const Card: React.FC<CardProps> = ({
       <View style={styles.contentContainer}>
         {renderIcon()}
         <View>
+          {cardHeader}
           <Text style={styles.text}>{title}</Text>
           {description && <Text style={styles.description}>{description}</Text>}
           {children}
@@ -84,7 +89,7 @@ const styles = StyleSheet.create({
     },
     text: {
         color: '#242424',
-        fontSize: 15
+        fontSize: 15,
     },
     description: {
         // color: 'black',

components/FileLists/FileList.tsx

@@ -0,0 +1,139 @@
+declare module "@fluentui/react-native-icons" {
+  interface IconRegistry {
+    PDF24Filled: any;
+    Photo24Filled: any;
+    Document24Filled: any;
+    // Fügen Sie hier weitere exportierte Symbole hinzu, falls erforderlich
+  }
+}
+
+import React, { useEffect, useState, useRef } from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  Dimensions,
+  Pressable,
+  Alert,
+} from "react-native";
+import { getDownloadURL, getStorage, ref } from "firebase/storage";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as Icons from "@fluentui/react-native-icons";
+import { TouchableRipple } from "react-native-paper";
+import * as FileSystem from "expo-file-system";
+import * as MediaLibrary from "expo-media-library";
+
+type RecentUsedFilesListProps = {
+  files: any;
+};
+
+const FileList: React.FC<RecentUsedFilesListProps> = ({ files }) => {
+  const containerWidth = useRef(Dimensions.get("window").width);
+
+  // make the below to a component ListItem and ad onPress event
+
+  const ListItem = ({ item }) => {
+    const iconName = getFileTypeIconName(item.fileType);
+    const IconComponent = Icons[iconName];
+    const storage = getStorage();
+
+    const downloadFile = async () => {
+      const url = await getDownloadURL(ref(storage, `uploads/${item.name}`));
+      console.log("Paul" + item.name);
+      console.log(url);
+      try {
+        const downloadInstance = FileSystem.createDownloadResumable(
+          url,
+          FileSystem.documentDirectory + item.name
+        );
+
+        const result = await downloadInstance.downloadAsync();
+        const asset = await MediaLibrary.createAssetAsync(result.uri);
+
+        MediaLibrary.createAlbumAsync("Downloads", asset, false)
+          .then(() => console.log("File Saved Successfully"))
+          .catch(() => console.log("Error in saving file"));
+        console.log(result);
+
+        Alert.alert("Download erfolgreich", "Die Datei wurde heruntergeladen.");
+      } catch (error: any) {
+        console.error(error);
+      }
+    };
+
+    return (
+      <TouchableRipple
+      onPress={downloadFile}
+      rippleColor="rgba(0, 0, 0, .32)"
+      // Stellen Sie sicher, dass die TouchableRipple-Komponente sich über die gesamte Breite erstreckt
+      style={[styles.itemContainer, { width: '100%' }]} // Änderung hier, um den Stil anzupassen
+    >
+      {/* Die Verwendung von Fragment (<></>) wird entfernt, stattdessen direkt eine View als Kind */}
+      <View style={{flexDirection: 'column'}}> 
+        <View style={styles.nameContainer}>
+          <IconComponent style={styles.iconStyle} />
+          <Text style={styles.fileName}>{item.name}</Text>
+        </View>
+        <View style={styles.line} />
+      </View>
+    </TouchableRipple>
+    );
+  };
+
+  return (
+    <FlatList
+      data={files} // Begrenzen auf die ersten 4 Elemente
+      renderItem={ListItem}
+      keyExtractor={(item) => item.id}
+      style={styles.list}
+      scrollEnabled={false}
+      // create an event when clicking on an item
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {
+    // Stile für die Liste
+  },
+  itemContainer: {
+    flexDirection: "column",
+    // Stile für das Container-Element
+  },
+  nameContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 15,
+  },
+  iconStyle: {
+    marginRight: 10,
+    color: "gray",
+  },
+  fileName: {
+    fontSize: 16,
+  },
+  line: {
+    height: 1,
+    backgroundColor: "lightgrey",
+  },
+});
+
+function getFileTypeIconName(fileType) {
+  switch (fileType) {
+    case "docx":
+      return "DocumentText24Regular";
+    case "pdf":
+      return "DocumentPdf24Regular";
+    case "jepg":
+    case "jpg":
+    case "png":
+      return "Image24Regular";
+    case "mp4":
+      return "VideoClip24Regular";
+    default:
+      return "Document24Regular"; // Standard-Icon für Dokumente
+  }
+}
+
+export default FileList;