React Native Expo ImagePicker - Getting undefined image.uri the first time but saving ok the second time

Question

I have a function to take a photo with android, with Expo-Image-Picker. I save the result in a local state pickedUri, then sending it to Redux state through dispatch. The first time I get pickedUri as undefined, but the second time it saves the first photo taken. I think the problem is the async function.

const handlerTakeImage = async () => {
    const isCameraOk = await verifyPermissions();
    if (!isCameraOk) return;

    const image = await ImagePicker.launchCameraAsync({
        allowsEditing: true,
        aspect: [16, 9],
        quality: 0.8,
    });

    setPickedUri(image.uri);
    console.log(pickedUri);

    pickedUri && dispatch(saveImage(pickedUri, props.itemId));
};

score 0 · Answer 1 · edited Jan 22 '23 at 13:51

0

I fixed it by sending to the dispatch the image.uri data directly, instead of saving it in a local state.

const handlerTakeImage = async () => {
    const isCameraOk = await verifyPermissions();
    if (!isCameraOk) return;

    const image = await ImagePicker.launchCameraAsync({
        allowsEditing: true,
        aspect: [16, 9],
        quality: 0.8,
    });

    dispatch(saveImage(image.uri, props.itemId))
};

I don't know if it's a good solution. I'm open to other options.

edited Jan 22 '23 at 13:51

Kirill Novikov

2,576
4
20
33

answered Dec 21 '21 at 17:27

Javier Arancibia Reyes

27
2

setting any data to the state is a async task. useState takes time to store the data. You were storing the data in setPickedUri, and on the next line you were trying to print that state, thus it was null. – Akshay Shenoy Dec 21 '21 at 17:30

React Native Expo ImagePicker - Getting undefined image.uri the first time but saving ok the second time

1 Answers1