1

I come here after two whole days without success. I want to increment my array with the pictures selected by the User, for return to my database a list of uri. But when the user choosed the first picture and re-open the android navigator for take a new picture, I saw the array doesn't increment. It takes the first value, and when I leave the selectImage() method it is back to empty.

Here is my main function :

EDIT :

const arrayImage = [];

const selectImage = () => {
    const options = {
      maxWidth: 2000,
      maxHeight: 2000,
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    };
    launchImageLibrary(options, response => {
        if (response.didCancel) {
            console.log('User cancelled image picker');
          } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
          } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
          } else {
             async(response);   
            }
    })

    function async(param) {
      setTimeout(function() {
          const source = { uri: param.assets[0].uri }
          array ?
          setImage(source)
         : arrayImage.push(source)
         console.log(arrayImage);  
      }, 2000);
  }

    console.log(arrayImage)
  };

I tried with promises, changing my function in async, with a SetTimeOut but I guess the probleme is not with the Asynchronous. Someone for help ? Thanks a lot.

User9572
  • 25
  • 5
  • `launchImageLibrary` takes a callback parameter, so surely that means it _is_ asynchronous? – CBroe May 03 '22 at 07:59
  • Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – evolutionxbox May 03 '22 at 08:04
  • yes it is asynchronous, but not the problem. Because I just want to push my data into my array, even if it is the last thing the program perform. But when I choose few pictures, the fact that the array has losed all the pushs , it isn't normal. – User9572 May 03 '22 at 08:06
  • _"but not the problem"_ - yes it is the problem. _"array has losed all the pushs , it isn't normal"_ - this is normal, because the async function hasn't finished by the time the function has been "left". – evolutionxbox May 03 '22 at 08:06
  • But I already tried with setTimeOut with a delay of 2000 mlsec, I don't see the way – User9572 May 03 '22 at 08:15
  • I checked your link, thanks a lot. But the response is already what I tried. – User9572 May 03 '22 at 08:15
  • A delay of an arbitrary time won't help. It's all about timings and when functions run. The array won't have been pushed to by the time the function is completed. The "async" function in the question won't help here – evolutionxbox May 03 '22 at 08:20
  • I have edited my code for show you how my edits. I used an other function, but the result stay the same. Can I have indication please ? – User9572 May 03 '22 at 08:24
  • Please read the question I've linked. It's the same issue you're facing. Setting a timeout here won't work since the `launchImageLibrary` could take any amount of time to return – evolutionxbox May 03 '22 at 08:26
  • I really guess my case is different, because I need the user action for go ahead. I tried with a launchImageLibrary encapsulated in a setTimeOut but it doesn't work too. And I already tried with a useState yesterday – User9572 May 03 '22 at 08:31
  • If your array is using a useState does it solves the problem ? const [array, setArray] = useState([]); – lmasneri May 03 '22 at 08:32
  • Please may you read https://stackoverflow.com/questions/68426239/use-data-from-async-function-on-react-state-with-jsx? – evolutionxbox May 03 '22 at 08:33
  • Thanks a lot i have read the topic. But still no understand the bind with the mine? I cannot use the useEffect because my function is called directly when the user push a button. So I also tried with a then() after the launchImageLibrary, same issue.. I got a lot of asynchronous issue for the moment, but this one is the lonely I can't fix. – User9572 May 03 '22 at 08:41
  • Still thanks for your waiting and trying to help me evolutionxbox ! – User9572 May 03 '22 at 09:23

1 Answers1

2

Use useState for your array to keep state even if you leave the screen:

import { useState } from "react";

const yourComponent = () => {
  const [array, setArray] = useState([]);
}

And in your function instead of array.push(source) you use it like that:

const newArray = [...array, source];
setArray(newArray);

And this should keep your result as I think the problem comes from the array and not the asynchronous function.

lmasneri
  • 589
  • 7
  • 17
  • 1
    Thanks so much !!!!! Of course I already tried with useState but not that way. Thanks ! – User9572 May 03 '22 at 08:59
  • Happy that it works, validate my answer so that if someone else has the same problem he can directly see the good answer :) @User9572 – lmasneri May 03 '22 at 09:01