CODEWITHSUNDEEP
androidreactjsimagereact-nativeresolution
chc
chc

Reputation: 209

How to integrate @2x @3x images to React Native Project (Both Android & IOS)?

I had added the same image's versions (@2x @3x)into src>asssets to work our platform in all devices. Here is the problem, VSCode only recognizes i.e path.png (it doesnt recognize @2x and @3x). How can we deal with this problem?

Upvotes: 15

Views: 12759

Answers (1)

abhikumar22
abhikumar22

Reputation: 1814

React native automatically pick up the desired image from the 3 options available i.e. 1x, 2x, 3x. We just have to provide the filename for the base image.

Example

.
├── button.js
└── img
    ├── check.png
    ├── [email protected]
    └── [email protected]

So, as stated above, when you have to use check image, just provide the image path for check.png and the rest will be automatically taken care by react native according to device screen density for both android and ios devices.
Use the image just like below and everything works like a charm. 

<Image source={require('./img/check.png')} />

More you can read here about the images from react native official docs.

I hope this helps.... Thanks :)

Upvotes: 27

Related Questions