If we want to use an image in React-Native js from Images.xcassets, we simply provide the image name as URI - for eg.
<Image style = {styles.someStyle} source = {{uri:'addImage.png'}}>
But what if we have a custom created .xcassets ? How can that imageset be accessed from the RN js ?
It's considered as legacy code, but can be imported like:
<Image source={require('image!custom')} />
Related
I am trying give img src path from outside of angular project .please resolve my problem as soon as possible.
My folder structure were look like
ProjectName
\backend
\assets
\images\test.png
angularprojectroot
\app
\src
\component files
In file paths you can go up a step with ..
<img src="../../../../backend/assets/images/test.png" />
Definitely for development only. In production serve the test.png from your server.
In your specific case using angular.json add this to your assets:
// assets is an array. Keep the other items in the array but add the one displayed below
"assets": ["../../../backend/assets/images/test.png"]
Then I believe you can just refer to the image as test.png:
<img src="test.png" />
I'm trying to display a downloaded pdf inside a WebView. I'm using react-native-webview (https://github.com/react-native-community/react-native-webview) and rn-fetch-blob to download it.
Basically i have a render that's just a WebView component:
if(this.state.path)
return
<WebView
source={{ uri: this.state.path }}
style={{ flex: 1 }}
/>
else return <Loader />
This component won't get rendered until the PDF is downloaded. After the download is complete i save the path into the state and show the WebView.
The PDF is downloaded correctly, i can manually go to the path i get in the state and open the PDF.
If i put the URL where i download the pdf from inside the uri like this (as example this is the google policy):
source = {{ uri : "https://static.googleusercontent.com/media/www.google.com/it//intl/it/policies/privacy/google_privacy_policy_it.pdf" }}
It works correctly and displays the pdf inside the WebView.
If i put my path to the pdf doing :
source = {{ uri : path/to/file.pdf}}
I get a blank screen.
Is there a way to display a file system pdf into the WebView ?
Note that i need to use the WebView, react-native-pdf and react-native-pdf-view are not the solution
After some tries i found a solution that let me download the PDF trough a fetch and use the local path to display the PDF. Basically when downloading i had to give the saved file a path .pdf and add the props useWebKit and originWhitelist.
<WebView
source={{ uri: this.state.path }}
style={{ flex: 1 }}
originWhitelist={["*"]}
useWebKit
/>
When i fetched trough rn-fetch-blob I had to specify a path in the fetchConfig and use the path property.
path: path/to/download/dir/file.pdf
Use something like
source={require('path of your local html file')}
instead of
source = {{ uri : path/to/file.pdf}}
NOTICE: On the iOS platform, the directory path will be changed every time you access the file system. So if you need to read the file on iOS, you need to get dir path first and concat file name with it.
let arr = fileResp.uri.split('file://');
PATH_TO_THE_FILE = arr[1];
Reference to Source
Images with spaces in their name won't load in IOS, for android it worked by replacing the spaces with %20, but this solution didn't work on ios. React native.
I m loading the images remotely using uri, in a normal Image container. images without space load fine.
<Image source={{uri: fileName.replace(/ /g, '%20')}} style={styles.image} />
works on react-native#0.59.5
encodeURI("http://www.yourdomain.tld/sample image.jpg")
Output
http://www.yourdomain.tld/sample image.jpg
to
http://www.yourdomain.tld/sample%20image.jpg
Usage
<Image source={{uri: encodeURI(fileUri)}} />
the best way is to use the js builtin javascript function encodeURI
because we also have to convert some special characters in URLs
var imageSource = require('./images/test.png')
<Image source={imageSource} style={s.userPic} />
That works great, but I need to show local photos just taken with the device (iPad) camera, so I won't know the local file location, stored in "user.imageLoc"...
var imageSource = eval("require('" + user.imageLoc + "')")
<Image source={imageSource} style={s.userPic} />
But that doesn't work. "Unknown module named (insert file location here)"
How can I display local images if I don't know their file name/address before runtime?
Pass image source as prop to your component :)
<MyCustomImageComponent imageSource={require(user.imageLoc)} />
If you want to access photos from your gallery or taken with the camera, maybe the best approach is to use the CameraRoll API from RN. v
This is the documentation:
https://facebook.github.io/react-native/docs/cameraroll.html
If that doesn't work or it's not what you want, we can try to find other solutions.
I have to download images to my iOS apps local file system and read them back.
On my simulator I can see file system of my app with directories
/Library/Developer/CoreSimulator/Devices/[UUID]/data/Containers/Data/Application/[UUID]/
/Documents
/Library
/tmp
To try out I copied foo.png to /Documents folder and then tried
<Image source={{uri: "file://Documents/foo.png"}} style={{width:100, height:100}}/>
This does not work, any idea whats a way to do this.
This also took me ages... with better info it would have been 5 minutes!
I use react-native-fs to get directories (which works for ios and android):
var RNFS = require('react-native-fs');
RNFS.DocumentDirectoryPath then returns something like '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents' on iOS
My Image element looks like:
<Image
style={{width:100, height:100}}
source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1}}
/>
My problem was that I did not set width and height first, which is not needed for urls or paths to assets. When using a base64 uri the width and height are also mandatory (that actually led me to the solution!).
Try tilda (~). React Native should expand that.
<Image
style={{width:100, height:100}}
source={{uri: '~/Documents/myAwesomeSubDir/my.png', scale:1}}
/>