React native Unable to use local tmp file path for Image.source iOS

Question

Unable to use local temp file path for Image.source iOS.

    <Image 
      style={styles.containerRightCakeImageTag}
      source={{ 
        isStatic: true,
        uri: "file:///Users/md_007/Library/Developer/CoreSimulator/Devices/B450EF4D-7A43-4F2E-AE39-7D92427EBC7E/data/Containers/Data/Application/C2204990-8808-43C0-9678-F6A9CBA74998/Documents/6b66bfab94acc2d89d4c533a1d7ba767.jpeg" 
      }}
    />

Answer 1

You can use react-native-fs to get directories (which works for ios and android)

var RNFS = require('react-native-fs');

Image element looks like:

<Image source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/directory/my.png'}} /> 

Answer 2

When you read local files or images (for example images cached with react-native-cached-image) you have to add the "file://" only for Android platform and not for the iOS platform.

Here is some code in one of my apps:

let path = Platform.OS === "android" ? ('file://' + imageLocalUrl) : imageLocalUrl;

However, you'd better to use "react-native-fs" to read the file path and not use the simulator path as is in your code.