title: react-native-image-picker - persistent storage after rebuild
body: <p>I've been hitting my head on the screen for some time and just can't get it to work despite all the information I've found on git or stackoverflow.</p>
  
  <p><strong>What I'm trying to achieve:</strong></p>
  
  <p>Persistence of the images selected (from library or camera). Persistence also when I rebuild my app, which means when I run <code>react-native run-ios</code> for iOS, or <code>react-native run-android</code> for Android.</p>
  
  <p><strong>What I've implemented</strong></p>
  
  <p>Here is my function that is called when I add an image.</p>
  
  <pre><code>ImagePicker.showImagePicker({
     storageOptions: {
        path: 'myCustomPath',
        waitUntilSaved: true,
        cameraRoll: true,
        skipBackup : true
     },
     noData: true
  }, res =&gt; {
     if (res.didCancel) {
        console.log("User cancelled");
     } else if (res.error) {
        console.log("Error", res.error);
     } else {
        console.log("Picker Response:", res);
        // Getting the fileName as for iOS the fileName is incorrect even with waitUntilSaved to true.
        const path = res.uri.split("/");
        const fileName = path[path.length-1]; 
        let uri = "file://" + Platform.select({
           android: RNFS.ExternalStorageDirectoryPath + "/Pictures/",
           ios: RNFS.DocumentDirectoryPath+"/"
           })
           + "myCustomPath/" + fileName
  
        this.setState({
           pickedImage: {
              uri: uri,
           }
        });
        this.props.onImagePicked({ uri: res.uri }); 
     }
  });
  </code></pre>
  
  <p>And in my home page, I display the image in <code>&lt;Thumbnail square style={{width:50, height:50}} source={info.item.image} /&gt;</code></p>
  
  <p>---- EDIT START -----
  ---- SOLUTION ----</p>
  
  <p>The solution was to reconstruct the path where I want to display the image using the fileName:
  <code>&lt;Thumbnail square style={{width:50, height:50}} source={{uri : RNFS.DocumentDirectoryPath+"/"+info.item.image.fileName}} /&gt;</code></p>
  
  <p>---- EDIT ENDS -----</p>
  
  <p><strong>The Result</strong></p>
  
  <p>So here are the results, you'll see works well on Android, but not on iOS.
  I selected an image on the library using the <code>react-native-image-picker</code>.</p>
  
  <p><strong>Android</strong></p>
  
  <p>"Picker Response":</p>
  
  <pre><code>fileName: "image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg"
  fileSize: 235728
  height: 1440
  isVertical: true
  originalRotation: 0
  path: "/storage/emulated/0/Pictures/myCustomPath/image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg"
  type: "image/jpeg"
  uri: "file:///storage/emulated/0/Pictures/myCustomPath/image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg"
  width: 1080
  </code></pre>
  
  <p>the save "uri" for my image is : <code>file:///storage/emulated/0/Pictures/myCustomPath/image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg</code></p>
  
  <p>Behavior is as below :</p>
  
  <ul>
  <li>left screenshot is after saving my image, </li>
  <li>right screenshot is after a rebuild, opening the app, I still see my image!</li>
  </ul>
  
  <p>--> Happy!</p>
  
  <p><a href="https://i.stack.imgur.com/mt1TH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mt1TH.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/7gd77.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7gd77.png" alt="enter image description here"></a></p>
  
  <p><strong>Now on iOS</strong></p>
  
  <p>"Picker Response" :</p>
  
  <pre><code>fileName: "IMG_0004.JPG"
  fileSize: 470300
  height: 1618
  isVertical: true
  latitude: 64.752895
  longitude: -14.538611666666666
  origURL: "assets-library://asset/asset.JPG?id=99D53A1F-FEEF-40E1-8BB3-7DD55A43C8B7&amp;ext=JPG"
  timestamp: "2012-08-08T21:29:49Z"
  type: "image/jpeg"
  uri: "file:///Users/[name]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/4756F0A2-9CCC-4F9A-9315-D55434328FD9/Documents/myCustomPath/6A5C27E3-89F7-465F-A855-66749C92D086.jpg"
  width: 1080
  </code></pre>
  
  <p>the save "uri" for my image is : <code>file:///Users/[name]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/4756F0A2-9CCC-4F9A-9315-D55434328FD9/Documents/myCustomPath/6A5C27E3-89F7-465F-A855-66749C92D086.jpg</code></p>
  
  <p>Behavior is as below :</p>
  
  <ul>
  <li>left screenshot is after saving my image, </li>
  <li>right screenshot is after a rebuild, opening the app, I still see my image!</li>
  </ul>
  
  <p>--> <strong>NOT HAPPY!</strong></p>
  
  <p><a href="https://i.stack.imgur.com/uvFa1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uvFa1.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/V20Ur.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V20Ur.png" alt="enter image description here"></a></p>
  
  <p><strong>My issue</strong></p>
  
  <p>I've read all about the temporary aspect of the returned uri and see what <code>react-native-image-picker</code> says about it: </p>
  
  <blockquote>
    <p>On iOS, don't assume that the absolute uri returned will persist.</p>
  </blockquote>
  
  <p>I've found also this <a href="https://stackoverflow.com/questions/39286211/react-native-ios-read-image-from-apps-documents-folder%5D">thread</a> which had a similar issue, but none worked:</p>
  
  <ul>
  <li><code>RNFS.DocumentDirectoryPath</code> after a rebuild had a different UUID in the path, so the file was not found as it was saved with the previous UUID</li>
  <li>I tried saving for iOS the uri as '~/Documents/myCustomPath/myfilename.jpg' had the same behavior. Displayed when added, blank after rebuild.</li>
  </ul>
  
  <p>I had before the rebuild:</p>
  
  <p>Document directory path being :
   <code>file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/466CAF1A-AF8D-423C-9BF6-F0A242AF8038/Documents/</code></p>
  
  <p>and my saved picture uri :</p>
  
  <p><code>file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/466CAF1A-AF8D-423C-9BF6-F0A242AF8038/Documents/myCustomPath/20969988-633B-46BD-8558-E39C3ADD6D12.jpg</code></p>
  
  <p>but after the rebuild the Application UUID changed to <code>BEE128C8-5FCF-483C-A829-8F7A0BB4E966</code> making now my document directory to be</p>
  
  <p><code>file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Bundle/Application/BEE128C8-5FCF-483C-A829-8F7A0BB4E966/Documents</code></p>
  
  <p>but still looking the picture in the uri :</p>
  
  <p><code>file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/466CAF1A-AF8D-423C-9BF6-F0A242AF8038/Documents/myCustomPath/20969988-633B-46BD-8558-E39C3ADD6D12.jpg</code></p>
  
  <p>When the image is actually now located under:</p>
  
  <p><code>file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/BEE128C8-5FCF-483C-A829-8F7A0BB4E966/Documents/myCustomPath/20969988-633B-46BD-8558-E39C3ADD6D12.jpg</code></p>
  
  <p>So how can I cope for that App UUID change after a rebuild as paths are dynamic on iOS.</p>
  
  <p><strong>Versions I use:</strong></p>
  
  <ul>
  <li>"react-native": "0.57.8",</li>
  <li>"react-native-fs": "^2.13.2",</li>
  <li>"react-native-image-picker": "^0.28.0"</li>
  </ul>