react-native-image-picker - persistent storage after rebuild

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.

What I'm trying to achieve:

Persistence of the images selected (from library or camera). Persistence also when I rebuild my app, which means when I run react-native run-ios for iOS, or react-native run-android for Android.

What I've implemented

Here is my function that is called when I add an image.

ImagePicker.showImagePicker({   storageOptions: {      path: 'myCustomPath',      waitUntilSaved: true,      cameraRoll: true,      skipBackup : true   },   noData: true}, res => {   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 });    }});

And in my home page, I display the image in <Thumbnail square style={{width:50, height:50}} source={info.item.image} />

---- EDIT START --------- SOLUTION ----

The solution was to reconstruct the path where I want to display the image using the fileName:<Thumbnail square style={{width:50, height:50}} source={{uri : RNFS.DocumentDirectoryPath+"/"+info.item.image.fileName}} />

---- EDIT ENDS -----

The Result

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 react-native-image-picker.

Android

"Picker Response":

fileName: "image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg"fileSize: 235728height: 1440isVertical: trueoriginalRotation: 0path: "/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

the save "uri" for my image is : file:///storage/emulated/0/Pictures/myCustomPath/image-d53839d1-fa89-4a61-b648-f74dace53f83.jpg

Behavior is as below :

• left screenshot is after saving my image,
• right screenshot is after a rebuild, opening the app, I still see my image!

--> Happy!

Now on iOS

"Picker Response" :

fileName: "IMG_0004.JPG"fileSize: 470300height: 1618isVertical: truelatitude: 64.752895longitude: -14.538611666666666origURL: "assets-library://asset/asset.JPG?id=99D53A1F-FEEF-40E1-8BB3-7DD55A43C8B7&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

the save "uri" for my image is : 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

Behavior is as below :

• left screenshot is after saving my image,
• right screenshot is after a rebuild, opening the app, I still see my image!

-->NOT HAPPY!

My issue

I've read all about the temporary aspect of the returned uri and see what react-native-image-picker says about it:

On iOS, don't assume that the absolute uri returned will persist.

I've found also this thread which had a similar issue, but none worked:

• RNFS.DocumentDirectoryPath after a rebuild had a different UUID in the path, so the file was not found as it was saved with the previous UUID
• I tried saving for iOS the uri as '~/Documents/myCustomPath/myfilename.jpg' had the same behavior. Displayed when added, blank after rebuild.

I had before the rebuild:

Document directory path being :file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Data/Application/466CAF1A-AF8D-423C-9BF6-F0A242AF8038/Documents/

and my saved picture uri :

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

but after the rebuild the Application UUID changed to BEE128C8-5FCF-483C-A829-8F7A0BB4E966 making now my document directory to be

file:///Users/[user]/Library/Developer/CoreSimulator/Devices/33076AD2-C989-47E9-A803-3E56CC4B09D6/data/Containers/Bundle/Application/BEE128C8-5FCF-483C-A829-8F7A0BB4E966/Documents

but still looking the picture in the uri :

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

When the image is actually now located under:

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

So how can I cope for that App UUID change after a rebuild as paths are dynamic on iOS.

Versions I use:

• "react-native": "0.57.8",
• "react-native-fs": "^2.13.2",
• "react-native-image-picker": "^0.28.0"