How to redirect the file path in react-native - react-native

I have no idea why Webstorm is not finding my pictures all ways to import the pictures but The simulator are telling me that none of my files exist

Don't worry about this. Editors generally don't suggest images while writing paths.
Just remove the import statement and directly access the image in the Image tag.
like this,
<Image source={require('./src/resources/images/Logo.png')}/>

Related

Opening a file with a PHAsset URI from a Webview

From the camera roll, I get a list of URIs in the ph://xxxxx format.
If I use these URIs in Image or ImageBackground components everything works as expected.
I want to show these photos in a webview. Adding to the html an img tag with that kind of URI doesn't work.
Am I missing something?
Is there any workaround to display such images in a webview?
For anyone interested, after trying various solutions, it doesn't seem to work at the time of writing.
I solved getting the absolute path of the image, which in my case meant copying the file from the cameraroll to the app document directory.

Is it possible to use .svg files with React Native without converting them?

I have found many answers about converting .svg files to rasterized formats, however I would prefer to keep it as a single svg file. I got excited when I found react-native-svg, but was then disappointed when I saw their image example used a .jpg file.
Is keeping my image as a vector possible? Am I trying to do something unwise?
Thank you for your help.
You need to convert your SVG's to use the react-native-svg library, this is a useful tool to do so: https://react-svgr.com/playground/
This does not rasterise the image, it will remain as a vector just in a format that the library can parse.

Images from Device storage custom path In React Native

I have an Image that I've downloaded and saved to the path /data/user/0/com.project/files/assets/image.png and I want to use this in my Image component in React-Native. Is there a way to use images stored in this path?
Ways to solve it that I have knowledge of but cannot use :
using require. which basically accepts literal strings that is not what I want for non-static images. names may change as per image for a single image source
using Native bundles, which is again I cannot use as the images are first being downloaded and then is being used.
using http links directly.which as again I cannot use as my feature states that the App cannot rely on network as it needs to render images in offline mode as well
If it's a file on your device, I think the way of displaying it is somewhat like this:
<Image source={{uri:'file:///data/user/0/com.project/files/assets/image.png'}} style={{width: 100, height: 100}}/>
Just make sure the file path is from the root. Hope it works for you.

React Native: Set Array Length to File Count

My React Native project root directory contains counter.js and a folder containing multiple images.
How do I use counter.js to count the number of images in the folder?
I think maybe you can use react-native-fs library to read your image from your system. You must have more effort to explore about that and you can also to read this for other reference to use it.
I hope this answer can give you idea.

How to get system icons in iOS

I want to use icons like opened/closed folder in my table (UITableView)?
UPD:
For example, in Java you can get a standard image "folder" and use it in the FileTree:
new
DefaultTreeCellRenderer().getDefaultClosedIcon()
And also can use the constants of L&F (colors, styles, icons).
In the iOS, I found only these standard icons.
But not folder icons...
I'm not quite sure exactly what you want - the folder icon from iOS? Could you explain a little better?
If it is a folder icon that you want, there's no quick way to get it from code - doing so would use private API's and your app is likely to be rejected from the app store.
If you want something like a folder icon, a good way to get it would be by taking a screenshot of the iPhone simulator and editing it to the right size etc.