Resolution for responsive image in react native (not blurry on phone and tablet)

user_12480785 0
Viewed 3996

I want to display a square image in the background at 80% width of the device. Currently, I'm developing on a standard phone (MDPI) So from this page: https://developer.android.com/training/multiscreen/screendensities I have a 160dpi phone, I want my image to be about 2 inches, my image should have a resolution of 320x320 pixel. then the image @ 2x 640px and @ 3x 960px. For the moment, do I understand correctly?

But if I take a larger phone, 80% of the width may be 2.5 inches, my image is no longer large enough. Worse, 80% of a tablet represents a much larger size. On this page: https://developer.android.com/training/multiscreen/screensizes I understand they explain the size required for each screen size:

res/layout/main_activity.xml           # For handsets (smaller than 640dp x 480dp)
res/layout-large/main_activity.xml     # For small tablets (640dp x 480dp and bigger)
res/layout-xlarge/main_activity.xml    # For large tablets (960dp x 720dp and bigger)

So should I use this? But it's Android specific development, does it exist in react-native? If not, should I no longer use the @ 2x and @ 3x images? or should I do :

res/layout/main_activity.xml           # For handsets (smaller than 640dp x 480dp)
res/layout/main_activity@2x.xml
res/layout/main_activity@3x.xml
res/layout-large/main_activity.xml     # For small tablets (640dp x 480dp and bigger)
res/layout-large/main_activity@2.xml  
res/layout-large/main_activity@3.xml 
...

For this particular image, it's a .svg format. I saw that I could convert it from .xml from android studio and open it with the svg library? Is this the best option? (the answers to the previous questions still interest me, I'm not sure I'll only have .svg files)

And finally, when we use the 3 images formats (icon.png, icon@2x.png and icon@3x.png), are they all in the final apk? If so, why not just use the larger format and downsize it for smaller density screens?

I would have thought that these questions questions must be quite frequent, but impossible to find a clear answer...

Thanks

react-native responsive resolution size image
1 Answers

If you are using react-native;

1) Asset location:

Don't create your images in your Android project, use react-native instead. Put your files in your react-native project and use them in your components.

2) Using SVG

If you have the SVG type available in your project then use react-native-svg. react-native-svg uses native drawing libraries, so it will work on all devices. You need to create your SVG component with the correct sizes. If you scale them later, you will get a blurry output. You can test this by creating an SVG component with sizes of {width: 20, height: 20}. Then scale it to 3x or something, you will get a blurry output. So be careful with the sizes.

Prefer SVG over PNG files, the latter are always expensive to render. There are some disadvantages such as creating an SVG is not easy and react-native-svg doesn't support all SVG formats.

In your case, you need to get device width and height and calculate your SVG width and height. For example:

<YourSVGComponent 
  width={Dimensions.get('window').width * 0.8}
  height={Dimensions.get('window').height * 0.8} />

3) @2x and @3x suffixes

All assets in your project will be mapped to your iOS and Android projects when you create an IPA or APK, respectively. The purpose of having different resolutions is supporting different densities.

From React Native documentations:

└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png

For example, check@2x.png, will be used on an iPhone 7, while check@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.

user_12597750
Related