StarAppeal/matrix-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add image picker

Browse Source
This commit is contained in:
StarAppeal
2024-12-13 03:53:10 +01:00
parent 803143e764
commit 29a930c793
7 changed files with 161 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.json
+11 -1
View File
@@ -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
+14
View File
@@ -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
Generated
+76
View File
@@ -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
+2 -1
View File
@@ -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
+1 -1
View File
@@ -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
+56
View File
@@ -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
+1
View File
@@ -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);