7

React Native components are unitless, and represent density-independent pixels according this page.

However, when I create an image, what should be its ideal resolution, in pixels? Let's say I have a tag like this:

<Image style={{width: 100, height: 100}} source={require('./img/myimage.png')} />

How big should I make my image to make sure it renders well in all devices?

laurent
  • 88,262
  • 77
  • 290
  • 428
  • Check this answer here: https://stackoverflow.com/a/42971004/2405689 It helped me a lot with responsive sizing of images & fonts. – ArchNoob Jul 22 '17 at 10:05

1 Answers1

1

In react-native documentation it says that you can name your images with the suffixes @2.x and @3.x to make the images look right on every device. In your images folder, you should do something like this:

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

Also, remind to don't use other values than @2.x amd @3.x, because when you run ./gradlew bundleRelease to build your production app, it will get an error, and it quite doesn't tell your that the problem is the suffixes that aren't recognized.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Pedro Henrique Bufulin
  • 729
  • 6
  • 14