How to handle multiple resources in react native?

Question

Explanation: I want to display an image using tag in react native.I put a single image in my src directory and load local image from it in my tag.It working fine.

Issue

If we compare this structure with our android drawable directories then i there is some doubts i have.

In android, There are five drawable directory. There are five different drawable directories which is list below:

drawable-mdpi drawable-hdpi drawable-xhdpi drawable-xxhdpi drawable-xxxhpi

In all the directories an image file lies with the same name. According to the device density it used the resources which we put into the drawable directories.

Question

My question is if we create an application using react native. What is the structure of the drawable directories to satisfy the requirement of the different densities devices?

Answer 1

To further clarify, the image sizes correspond like this:

• 1x: mdpi Android devices (160 dpi)
• 1.5x: hdpi Android devices (240 dpi)
• 2x: Phone 4, 4S, 5, 5c, 5s, 6, xhdpi Android devices (320 dpi)
• 3x: iPhone 6 plus, xxhdpi Android devices (480 dpi)
• 3.5x: Nexus 6 (560dpi): in-between xxhdpi and xxxhdpi, will scale down xxxhdpi, see this discussion
• I presume 4x would be xxxhdpi

Information source: https://facebook.github.io/react-native/docs/pixelratio

Answer 2

As already suggested in this link: https://facebook.github.io/react-native/docs/images.html

if you want to have different picture sizes for different density levels you can mark them with @2x, @3x, etc

Also you can add -ios and -android to use them only in their respective devices.

if you already have a native app and want to integrate React-Native pages in it, then it would be no problem as you already have drawable folders and can access their pictures by just calling the picture name (without its relative path e.g. call 'icon' NOT './android/drawable/icon')