add image picker

app.json

@@ -16,7 +16,11 @@
         "foregroundImage": "./assets/images/racoon-icon.jpg",
         "backgroundColor": "#FFFFFF"
       },
-      "package": "de.starappeal.ledmatrix"
+      "package": "de.starappeal.ledmatrix",
+      "permissions": [
+        "android.permission.RECORD_AUDIO",
+        "android.permission.RECORD_AUDIO"
+      ]
     },
     "web": {
       "bundler": "metro",
@@ -51,6 +55,12 @@
       "eas": {
         "projectId": "6c7ada5a-fcc7-4d36-a056-c542c6d13dac"
       }
+    },
+    "runtimeVersion": {
+      "policy": "appVersion"
+    },
+    "updates": {
+      "url": "https://u.expo.dev/6c7ada5a-fcc7-4d36-a056-c542c6d13dac"
     }
   }
 }

app/(tabs)/modes/image.tsx

@@ -1,13 +1,27 @@
 import ThemedHeader from "@/src/components/themed/ThemedHeader";
 import React from "react";
 import ThemedBackground from "@/src/components/themed/ThemedBackground";
+import CustomImagePicker from "@/src/components/ImagePicker";
+import {ImagePickerSuccessResult} from "expo-image-picker";
 
 export default function ImageScreen() {
+    const onSuccess = (result: ImagePickerSuccessResult) => {
+        console.log("Image picked successfully", result);
+    }
+    const onFailure = (error: Error) => {
+        console.error("Error picking image", error);
+    }
+
+    const onCanceled = () => {
+        console.log("Image picking canceled");
+    }
+
     return (
         <ThemedBackground>
             <ThemedHeader>
                 Image Mode
             </ThemedHeader>
+            <CustomImagePicker onSuccess={onSuccess} onFailure={onFailure} onCanceled={onCanceled}/>
         </ThemedBackground>
     );
 }

package-lock.json

@@ -26,6 +26,7 @@
         "expo-status-bar": "^2.0.0",
         "expo-symbols": "^0.2.0",
         "expo-system-ui": "^4.0.6",
+        "expo-updates": "~0.26.10",
         "expo-web-browser": "~14.0.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -9329,6 +9330,12 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-eas-client": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/expo-eas-client/-/expo-eas-client-0.13.1.tgz",
+      "integrity": "sha512-IyeDiM6YSJG0c45kbuEo0qt76z0KTEZtisEFEtle+b+vfn9I3N+r3jbPscaI4yS3P6gpuoDyHv81YDVC6Dmkhw==",
+      "license": "MIT"
+    },
     "node_modules/expo-file-system": {
       "version": "18.0.5",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.0.5.tgz",
@@ -9402,6 +9409,12 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-json-utils": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.14.0.tgz",
+      "integrity": "sha512-xjGfK9dL0B1wLnOqNkX0jM9p48Y0I5xEPzHude28LY67UmamUyAACkqhZGaPClyPNfdzczk7Ej6WaRMT3HfXvw==",
+      "license": "MIT"
+    },
     "node_modules/expo-keep-awake": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-14.0.1.tgz",
@@ -9426,6 +9439,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-manifests": {
+      "version": "0.15.4",
+      "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.15.4.tgz",
+      "integrity": "sha512-Ki6+twRbm+HTX3L8larhOdDbSYPG3ojGnZepR/+TGg3JF/5yyscosDVY6c6z8xEGjKIjs1F813yq9yAfiPh8/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@expo/config": "~10.0.4",
+        "expo-json-utils": "~0.14.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.4.tgz",
@@ -9574,6 +9600,12 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-structured-headers": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-4.0.0.tgz",
+      "integrity": "sha512-uPiwZjWq3AdFGgY52+I2nGPrNa6izxAglymPXHUZLekZW290GqIUOk7MBNDD4sg4JwUbSi3gdxEurpEvuq+FSg==",
+      "license": "MIT"
+    },
     "node_modules/expo-symbols": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/expo-symbols/-/expo-symbols-0.2.0.tgz",
@@ -9606,6 +9638,50 @@
         }
       }
     },
+    "node_modules/expo-updates": {
+      "version": "0.26.10",
+      "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-0.26.10.tgz",
+      "integrity": "sha512-ETGUaSZRL7x72RH6MbZWRpyU9GFzCixIPNUT0kf/hcD07ojyHlW5hcwgc5ve565THSvhgiumz3yImKLbKBv2JA==",
+      "license": "MIT",
+      "dependencies": {
+        "@expo/code-signing-certificates": "0.0.5",
+        "@expo/config": "~10.0.4",
+        "@expo/config-plugins": "~9.0.10",
+        "@expo/spawn-async": "^1.7.2",
+        "arg": "4.1.0",
+        "chalk": "^4.1.2",
+        "expo-eas-client": "~0.13.0",
+        "expo-manifests": "~0.15.0",
+        "expo-structured-headers": "~4.0.0",
+        "expo-updates-interface": "~1.0.0",
+        "fast-glob": "^3.3.2",
+        "fbemitter": "^3.0.0",
+        "ignore": "^5.3.1",
+        "resolve-from": "^5.0.0"
+      },
+      "bin": {
+        "expo-updates": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*"
+      }
+    },
+    "node_modules/expo-updates-interface": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-1.0.0.tgz",
+      "integrity": "sha512-93oWtvULJOj+Pp+N/lpTcFfuREX1wNeHtp7Lwn8EbzYYmdn37MvZU3TPW2tYYCZuhzmKEXnUblYcruYoDu7IrQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-updates/node_modules/arg": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
+      "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==",
+      "license": "MIT"
+    },
     "node_modules/expo-web-browser": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/expo-web-browser/-/expo-web-browser-14.0.1.tgz",

package.json

@@ -51,7 +51,8 @@
     "react-native-switch-with-icons": "^3.0.1",
     "react-native-web": "~0.19.13",
     "react-native-webview": "^13.12.5",
-    "sharp": "^0.33.5"
+    "sharp": "^0.33.5",
+    "expo-updates": "~0.26.10"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

src/components/ChangePasswordModal.tsx

@@ -65,7 +65,7 @@ export default function ChangePasswordModal() {
                     />
                     <PasswordInput
                         label="Passwort bestätigen"
-                        returnKeyType="done"
+                        returnKeyType="go"
                         value={confirmPassword}
                         onChangeText={setConfirmPassword}
                     />

src/components/ImagePicker.tsx

@@ -0,0 +1,56 @@
+import React, {useState} from 'react';
+import {Button, StyleSheet, View} from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import ImageViewer from "@/src/components/ImageViewer";
+import {ImagePickerSuccessResult} from "expo-image-picker/src/ImagePicker.types";
+
+export interface Props {
+    onSuccess: (result: ImagePickerSuccessResult) => void;
+    onFailure: (error: Error) => void;
+    onCanceled: () => void;
+}
+
+
+export default function CustomImagePicker({onSuccess, onFailure, onCanceled}: Props) {
+    const [image, setImage] = useState<string | null>(null);
+
+    const pickImage = async () => {
+        // No permissions request is necessary for launching the image library
+        let result = ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images', 'videos'],
+            allowsEditing: true,
+            aspect: [4, 3],
+            quality: 1,
+            base64: true,
+        }).then((result) => {
+            if (result.canceled) {
+                onCanceled();
+            } else {
+                setImage(result.assets[0].uri);
+                onSuccess(result);
+            }
+        }).catch((error) => {
+            onFailure(error);
+        });
+        console.log(result);
+    }
+
+    return (
+        <View style={styles.container}>
+            <Button title="Pick an image from camera roll" onPress={pickImage}/>
+            {image && <ImageViewer imgSource={{uri: image}}/>}
+        </View>);
+};
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    image: {
+        width: 200,
+        height: 200,
+    },
+});

src/components/PasswordInput.tsx

@@ -40,6 +40,7 @@ export default function PasswordInput(props: ThemedTextInputProps) {
             onChangeText={(input) => {
                 setText(input);
             }}
+            autoCapitalize="none"
             onSelectionChange={(e) => {
                 // Cursor-Position speichern
                 setCursorPosition(e.nativeEvent.selection.start);