Today I worked on a react native app class project. I was attempting to make it possible to update user profile pictures, but I ran into a small wall where I am logging that the selected image has an undefined URI, which is an issue. <\/p>\n\n\n\n
This is the more interesting portion of the code I worked on<\/p>\n\n\n\n
import React, { useState } from 'react';\nimport { View, Text, Button, Image, StyleSheet, TouchableOpacity } from 'react-native';\nimport * as ImagePicker from 'expo-image-picker';\nimport * as Permissions from 'expo-permissions';\n\nconst API_URL = 'http:\/\/10.220.1.12:8001';\n\nconst UpdateProfileScreen = ({ route, navigation }) => {\n const [imageUri, setImageUri] = useState(route.params.profilePictureUrl);\n\n const requestPermissions = async () => {\n const { status: cameraStatus } = await Permissions.askAsync(Permissions.CAMERA);\n const { status: galleryStatus } = await Permissions.askAsync(Permissions.PHOTO_LIBRARY);\n\n if (cameraStatus !== 'granted' || galleryStatus !== 'granted') {\n alert('Sorry, we need camera and photo library permissions to make this work!');\n }\n };\n\n const handleChoosePhoto = async () => {\n console.log('Choosing photo...');\n try {\n let result = await ImagePicker.launchImageLibraryAsync({\n mediaTypes: ImagePicker.MediaType,\n allowsEditing: true,\n aspect: [4, 3],\n quality: 1,\n });\n\n if (!result.cancelled) {\n setImageUri(result.uri);\n console.log('Selected image URI:', result.uri);\n } else {\n console.log('User cancelled image picker');\n }\n } catch (error) {\n console.error('Error choosing photo:', error);\n }\n };\n\n const handleCropImage = async () => {\n if (!imageUri) {\n console.error('No image selected');\n return;\n }\n\n try {\n const result = await ImageEditor.cropImageAsync(\n imageUri,\n {\n aspect: [4, 3], \/\/ Adjust the aspect ratio as needed\n }\n );\n\n setImageUri(result.uri);\n console.log('Cropped image URI:', result.uri);\n\n handleUpdateProfilePicture();\n } catch (error) {\n console.error('Error cropping image:', error);\n }\n };\n\n const handleUpdateProfilePicture = async () => {\n try {\n if (!imageUri) {\n console.error('No image selected');\n return;\n }\n\n const formData = new FormData();\n formData.append('file', {\n uri: imageUri,\n type: 'image\/jpeg',\n name: 'profile_picture.jpg',\n });\n\n console.log('Updating profile picture...');\n await fetch(`${API_URL}\/users\/update-profile-picture`, {\n method: 'POST',\n body: formData,\n credentials: 'include',\n });\n\n console.log('Profile picture updated successfully');\n navigation.navigate('Home');\n } catch (error) {\n console.error('Error updating profile picture:', error);\n }\n };\n\n return (\n <View style={styles.container}>\n {imageUri && (\n <Image source={{ uri: imageUri }} style={styles.image} \/>\n )}\n <TouchableOpacity onPress={handleChoosePhoto} style={styles.button}>\n <Text style={styles.buttonText}>Choose New Profile Picture<\/Text>\n <\/TouchableOpacity>\n <Button title=\"Crop Image\" onPress={() => {}} disabled={!imageUri} \/>\n <Button title=\"Update Profile\" onPress={handleUpdateProfilePicture} disabled={!imageUri} \/>\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n image: {\n width: 200,\n height: 200,\n borderRadius: 100,\n marginBottom: 20,\n },\n button: {\n backgroundColor: '#841584',\n padding: 10,\n marginVertical: 10,\n borderRadius: 5,\n },\n buttonText: {\n color: 'white',\n fontSize: 16,\n },\n});\n\nexport default UpdateProfileScreen;\n<\/code><\/pre>\n\n\n\nThe rest of the code I made was very boring, just adding dependencies to a json file so I would prefer to not muck the post with it though I also suppose that is what I am doing with this short tangent. School is almost over, but I am quite taken with this project so I may continue work on it over the summer.<\/p>\n","protected":false},"excerpt":{"rendered":"
Today I worked on a react native app class project. I was attempting to make it possible to update user profile pictures, but I ran into a small wall where I am logging that the selected image has an undefined URI, which is an issue. This is the more interesting portion of the code I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-210","post","type-post","status-publish","format-standard","hentry","category-friday"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/posts\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/comments?post=210"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/posts\/210\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/posts\/210\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/media?parent=210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/categories?post=210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_carpenter\/wp-json\/wp\/v2\/tags?post=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}