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.

Answer 3

The image file must exist in the same folder as the .js file requiring it.

<Image source={require('./Logo.png')} />

or

The image file in your project folder and requiring it.

import Logo from '..' // set image path 

<Image source={require(Logo)} />

Answer 4

Use isStatic and uri in source match your need

const localUri = "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" ;
<Image source={{ isStatic: true, uri: localUri }} />