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?

Charmeuse

Check this answer here: https://mcmap.net/q/149823/-react-native-responsive-font-size It helped me a lot with responsive sizing of images & fonts. – Taenia

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.

Propositus

Thanks for your answer! A link to the documentation would be useful here :) – Parboil

Link here : reactnative.dev/docs/images#static-image-resources – Lobar