What should be the resolution of an image in React Native?

Question

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?

Answer 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
    ├── [email protected]
    └── [email protected]

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.