Friday 5/29/2026

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 worked on

import React, { useState } from 'react';
import { View, Text, Button, Image, StyleSheet, TouchableOpacity } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';

const API_URL = 'http://10.220.1.12:8001';

const UpdateProfileScreen = ({ route, navigation }) => {
  const [imageUri, setImageUri] = useState(route.params.profilePictureUrl);

  const requestPermissions = async () => {
    const { status: cameraStatus } = await Permissions.askAsync(Permissions.CAMERA);
    const { status: galleryStatus } = await Permissions.askAsync(Permissions.PHOTO_LIBRARY);

    if (cameraStatus !== 'granted' || galleryStatus !== 'granted') {
      alert('Sorry, we need camera and photo library permissions to make this work!');
    }
  };

  const handleChoosePhoto = async () => {
    console.log('Choosing photo...');
    try {
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaType,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });

      if (!result.cancelled) {
        setImageUri(result.uri);
        console.log('Selected image URI:', result.uri);
      } else {
        console.log('User cancelled image picker');
      }
    } catch (error) {
      console.error('Error choosing photo:', error);
    }
  };

  const handleCropImage = async () => {
    if (!imageUri) {
      console.error('No image selected');
      return;
    }

    try {
      const result = await ImageEditor.cropImageAsync(
        imageUri,
        {
          aspect: [4, 3], // Adjust the aspect ratio as needed
        }
      );

      setImageUri(result.uri);
      console.log('Cropped image URI:', result.uri);

      handleUpdateProfilePicture();
    } catch (error) {
      console.error('Error cropping image:', error);
    }
  };

  const handleUpdateProfilePicture = async () => {
    try {
      if (!imageUri) {
        console.error('No image selected');
        return;
      }

      const formData = new FormData();
      formData.append('file', {
        uri: imageUri,
        type: 'image/jpeg',
        name: 'profile_picture.jpg',
      });

      console.log('Updating profile picture...');
      await fetch(`${API_URL}/users/update-profile-picture`, {
        method: 'POST',
        body: formData,
        credentials: 'include',
      });

      console.log('Profile picture updated successfully');
      navigation.navigate('Home');
    } catch (error) {
      console.error('Error updating profile picture:', error);
    }
  };

  return (
    <View style={styles.container}>
      {imageUri && (
        <Image source={{ uri: imageUri }} style={styles.image} />
      )}
      <TouchableOpacity onPress={handleChoosePhoto} style={styles.button}>
        <Text style={styles.buttonText}>Choose New Profile Picture</Text>
      </TouchableOpacity>
      <Button title="Crop Image" onPress={() => {}} disabled={!imageUri} />
      <Button title="Update Profile" onPress={handleUpdateProfilePicture} disabled={!imageUri} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 100,
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#841584',
    padding: 10,
    marginVertical: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default UpdateProfileScreen;

The 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.