4

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?

Milan Gajera
  • 962
  • 2
  • 14
  • 41
  • You create your images with an `@2x` and `@3x` suffix to support the different densities - https://facebook.github.io/react-native/docs/images.html – Dan Aug 29 '17 at 07:50

2 Answers2

6

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

eis
  • 51,991
  • 13
  • 150
  • 199
1

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')

Dusk
  • 1,729
  • 10
  • 17
  • for example i have 5 image namely logo.png with different dimention. Where should i need to put all 5 images? I mean inside the my application directory or in android/app/src/res/drawable directory? – Milan Gajera Aug 29 '17 at 08:45
  • Thanx for you replay. I think the 2x and 3x it is for iOS what about for the android? – Milan Gajera Aug 29 '17 at 08:48
  • @MilanGajera The easy way is to put them in your drawable folders yourself just as you do normally. You can also do the same for ios and have your resources be handeled natively – Dusk Aug 30 '17 at 13:09