When running my application in Expo all images look fine and lovely, it's just when I deploy to the app store suddenly my images are huge.
I made sure that I follow Expo's standard on image spec as written here;
https://docs.expo.io/versions/latest/react-native/images/
Even weirder is the images look fine on iPhone X but the size is off on iPhone 7 (but on that same iPhone 7 in Expo everything looks ok). So just wondering if anyone has experienced any issues going from Expo to App Store with images and if they did how did they solve them?
Note: I am yet to deploy to Google play so haven't been able to see the effects there yet.
All input greatly appreciated
Just try to use WIDTH and HEIGHT from Dimensions
And then set width to your image by multiplication of WIDTH on some coefficient.
Related
Im building multiple apps in React-native and I know that there its possible to put in multiple images that have a different density. React-native selects them automatically in the tag. I know for native Android and iOS they do the same.
I get it if you want to have some changes for lower density devices. Maybe a other design of a icon or something like that. But what if you have the 3x and then resize it to a 2x and 1x. Then you have the same image but with a smaller file.
Now my question is does it really matter to add the 2x and 1x if I already have the 3x? I don't see any performance of quality issues with that.
I guess (but not sure) it can give a RAM issues with large amount of images shows simultaneously.
Plus a famous android developer says that Android has an issue with downscale big images.
I have currently placed 1x, 2x, 3x images . It look fine in all Android & Ios Phones. But when it comes to tablet, all the images are looking small in size.
You have to make the 4x images too for the biggest like tablet
My advice for this is to use as much as possible the vector icons to avoid this kind of trouble at least for icons.
Check this post out : https://github.com/facebook/react-native/issues/4041
While making iOS Apps, we generally used to supply #x,#2x,#3x images. And based on my knowledge in case of android, there was some approx six different sizes
I have started working on react-native and came across the image issue.
My Question are: Do I need to provide images with all different sizes (i.e. approx 6-7 image sets by combining iOS and android) Or only 1 image and rest will be taken care internally? Will it look blurred on higher resolution phones?
Thanks.
You still need to provide multiple images. According to the Images documentation, if you are using an image named check.png, you also have to include check#2x.png and check#3x.png.
Quoting:
The packager will bundle and serve the image corresponding to device's
screen density. For example, check#2x.png, will be used on an iPhone
7, whilecheck#3x.png will be used on an iPhone 7 Plus or a Nexus 5. If
there is no image matching the screen density, the closest best option
will be selected.
I am developing an iOS application for iPad. Currently I am using images of resolution 2048×1536 px (iPad3 resolution). If I run this app on iPad2 or iPad1 will it get fitted to its resolution (1024×768 px)? Or should I use a 1024×768 images and specify image#2x for iPad3?
Since I only have iPad3 , cannot know how the images will be seen in the lower resolution devices. But it should work perfectly on them too.
Any help greatly appreciated. Please cite your sources.
You could try this in the simulator if you don't have a non-retina device.
It's certainly possible and will usually look fine (at least for photos, text and icons may look worse when scaled down), but you are wasting quite a lot of memory which is pretty scarce on an iPad 1 (it only has 256 MB), so you should usually also include non-retina images.
Automatically scaling down images typically results in visual artifacts, which is why the SDK includes an easy way to include different versions of any image, instead of just a single big one.
As far as I know, all iOS devices (within the same family) have resolutions that are multiples of each other so automatic scaling artifacts are somewhat mitigated, but it is still best to include the correct resolution.
I am developing an iPhone game with Cocos2d-iphone.
I want my game to only be available to the iPhone 4 AND iPad. Retina enabled for iPhone 4. I don't want the game to run on older devices.
Cocos2d will always ask me for -hd and non-hd files. If I don't provide the SD files, I get errors. I don't want that: is there a way to disable Cocos2d from trying to retrieve SD files, and only get -hd suffixed files by default?
Oh, and when the game is run by an iPad, the graphics will be the -hd ones as well. So the point is, I only want to have -hd files in my project.
What are the proper steps to edit Cocos2d's source for such?
If you are using cocos2d version >= 2.0, then you can change the value of a global variable found in CCFileUtils.h:
static NSString *__suffixiPad =#"-hd";
(Its default value is #"-ipad".)
If you are using cocos2d version < 2.0, then you can find here a category that I wrote to be able to transparently use -hd images created for the iPhone 4 on the iPad 1/2.
Actually, it does more than that, but if you add it to your project, then "-hd" images will be "automagically" used on the iPad 1/2 instead of their SD versions (which you could also not include in your project).
Let me know if you have any issues integrating this code.
If I would have been at your place.. I would have played with a trick.. Don't down vote the answer if you don't like.. But Its just a thing in my mind.
Use -hd images in the code directly.. iPhone 4 will handle it easily.. Older iPhones will show it much larger and it doesn't matter as you are not supporting them...
So instead of using Background.png , directly use Background-hd.png as it will work fine for iPhone 4.. Instead of wasting time on all these SD stuff.. I will directly use my -hd images for my work...
I can not say about new iPad.. But old iPad can easily use -hd images in code as you want.. For iPad I have directly used in my code earlier..
Hope this helps.. :)
This tutorial might help.
If you only provide -hd assets, you should only get errors regarding missing SD assets when running on iPad. The iPad doesn't have a Retina display, but it certainly is high resolution enough to be treated like one.
Since cocos2d passes all filename requests through the fullPathFromRelativePath function in CCFileUtils it may be enough to modify this function to treat the iPad like an HD device and force it to load -hd assets on iPad.
the 1st idea i can think of is to use #2x suffix for images (UIKit style) and you wont need to enable retina display in app.The problem is that on the ipad you'll have to write your own method to remove #2x suffix
the 2nd idea was to make a SD image..but only 1x1 pixels... it takes virtually no space at all ( 119 bytes with white pixel). Should work on ipad as-is
3rd idea:don't enable (or enable..doesn't make any difference) retina display but have the HD images as SD images.I've tested this on cocos2d v1.0.1 and it seems to work.Also..it should work on ipad
4th idea forcefully enable retina display in ccConfig.h (so that director won't ask you for the SD images on ipad) .I'm not sure about this one because there are quite a few tests that check for resolution, device and if it's retina and you'd have to edit all of them
these are just ideas off the top of my head..they may be wrong..but they're just ideas