CODEWITHSUNDEEP
javascriptiosreactjsreact-native
Asif vora
Asif vora

Reputation: 3347

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

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" 
      }}
    />

Upvotes: 10

Views: 26810

Answers (4)

zap
zap

Reputation: 221

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 }} />

Upvotes: -2

Paolo Dell&#39;Aguzzo
Paolo Dell&#39;Aguzzo

Reputation: 1431

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.

Upvotes: 5

Prabhu
Prabhu

Reputation: 1057

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'}} />

Upvotes: 16

Prabhu
Prabhu

Reputation: 1057

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)} />

Upvotes: 0

Related Questions