From 29a930c79307571dfce6da5dec67df61671857dd Mon Sep 17 00:00:00 2001 From: StarAppeal Date: Fri, 13 Dec 2024 03:53:10 +0100 Subject: [PATCH] add image picker --- app.json | 12 +++- app/(tabs)/modes/image.tsx | 14 +++++ package-lock.json | 76 ++++++++++++++++++++++++++ package.json | 3 +- src/components/ChangePasswordModal.tsx | 2 +- src/components/ImagePicker.tsx | 56 +++++++++++++++++++ src/components/PasswordInput.tsx | 1 + 7 files changed, 161 insertions(+), 3 deletions(-) create mode 100644 src/components/ImagePicker.tsx diff --git a/app.json b/app.json index f57bf5e..e493a7b 100644 --- a/app.json +++ b/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" } } } diff --git a/app/(tabs)/modes/image.tsx b/app/(tabs)/modes/image.tsx index 9196bec..fecfd66 100644 --- a/app/(tabs)/modes/image.tsx +++ b/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 ( Image Mode + ); } diff --git a/package-lock.json b/package-lock.json index cdab3cc..c21dbcd 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 44b9ab6..a30b627 100644 --- a/package.json +++ b/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", diff --git a/src/components/ChangePasswordModal.tsx b/src/components/ChangePasswordModal.tsx index 8f0c0ee..cf4c386 100644 --- a/src/components/ChangePasswordModal.tsx +++ b/src/components/ChangePasswordModal.tsx @@ -65,7 +65,7 @@ export default function ChangePasswordModal() { /> diff --git a/src/components/ImagePicker.tsx b/src/components/ImagePicker.tsx new file mode 100644 index 0000000..d9e6914 --- /dev/null +++ b/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(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 ( + +