ImageInputList.js - Error reading an image [TypeError: onChangeImage is not a function

React Native
1

I’m in the “Building ImageInputList - Basics” lecture.
I’ve followed the exact steps as Mosh did, also wrote the code several times, and yet whenever I try to pick an image from the gallery I see this error on the console.

Error reading an image [TypeError: onChangeImage is not a function. (In ‘onChangeImage(result.uri)’, ‘onChangeImage’ is undefined)]

Probably, there’s an issue rising the onChangeImage event from the ImageInput component because if I use component in isolation it picks and renders an Image with no issue or warning on the console.

Any help will be much appreciated
Thanx !!

2

I think you’re close to the answer. Double-check your export statement in ImageInput.js and the corresponding import statement in ImageInputList.js.

And, check your syntax for the onChangeImage function calls in the returned JSX.

It’s been a while since I finished that part of the course. And, being honest, Mosh made a few points about some tricky things with the image uri stuff – I didn’t fully understand it. One of those tricky things might be why the “undefined” error is showing up.

3

Hi, dpickut,

Thank you very much for your comments!
I’ve checked the exports and they seem to be ok but I’m not sure why that would be the issue here if that’ll be the case either ImageInputList or ImageInput would be undefined.
Here’s my ImageInput code.

import React, { useEffect } from "react";
import {
  View,
  StyleSheet,
  Image,
  TouchableWithoutFeedback,
  Alert,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";

import colors from "../config/colors";

function ImageInput({ imageUri, onChangeImage }) {
  useEffect(() => {
    requestPermission();
  }, []);
  const requestPermission = async () => {
    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
  };

  const selectImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        quality: 0.5,
      });
      **if (!result.cancelled) onChangeImage(result.uri);** The Error seems to be triggered here which means that the component is instantiated correctly but the function that's been passed through the props is not found.
    } catch (error) {
      console.log("Error reading an image", error);
    }
  };

  const handelPress = () => {
    if (!imageUri) selectImage();
    else
      Alert.alert("Delete", "Are you sure you want to delete this image?", [
        { text: "Yes", onPress: () => onChangeImage(null) },
        { text: "No" },
      ]);
  };

  return (
    <TouchableWithoutFeedback onPress={handelPress}>
      <View style={styles.container}>
        {!imageUri && (
          <MaterialCommunityIcons
            name="camera"
            size={40}
            color={colors.medium}
          />
        )}
        {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
      </View>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    backgroundColor: colors.light,
    borderRadius: 15,
    height: 100,
    justifyContent: "center",
    width: 100,
  },
  image: {
    height: "100%",
    width: "100%",
  },
});
export default ImageInput;

Looking forward to your comments.
regards

4

Since the error message is “onChangeImage’ is undefined” check if you are really passing an onChangeImage prop when using your ImageInput component.

5

make a new folder copy your app into it. open source code he provided, and overwrite the new app with either section 1 end code or section 2 begin code. no idea what is messing that up but i had it very similar issue. good luck

6

Hie guys I am experiencing the same issue. Did any of you guys find a solution to it?. I know the issue is in the onChangeImage part but I have no idea how to resolve it

7

From your App.js change line <ImageInput to <ImageInputList and then import ImageInputList.

9

Hello Guys,

Had the exact same problem but fixed it:

The result is the state line in the App.js file:

const [imageUris, setImageUris] = useState(**[ ]**);

Please pay attention that there are **[ ]** brackets in the useState: useState(**[ ]**);

This will solve this problem.

10

My advice double check you property name e.g onchange might be Onchange somewhere in the code