Quick Notes

Quick Notes

Static Image Resources

You can 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

...and button.js code contains:

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

...the bundler will bundle and serve the image corresponding to device's screen density. For example, check@2x.png, will be used on an iPhone 7, whilecheck@3x.png will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.

Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set {width: undefined, height: undefined} on the style attribute.