RN load different sizes for Image from remote URL

user_990598 0
Viewed 119

From the docs of react native :

You can also use the @2x and @3x suffixes to provide images for different screen densities. If you have the following file structure:

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

So how does the same thing can be done for different remote URLs?

(eg. "http://aaa.com/a@2x.png", "http://aaa.com/a@3x.png")

react-native
1 Answers

For network Images, many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down.

Unlike with static resources, you will need to manually specify the dimensions of your image.

// GOOD
<Image source={{uri: 'http://aaa.com/a.png'}} style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'http://aaa.com/a.png'}} />
user_82608270
Related