Image

    Image is used to render images. Images may either be downloaded from the web, or imported as files, which are then bundled with the app.

    To bundle an image in the app, import the image file by its path, including the file extension. When loading bundled images, the same images are used to render on both iOS and Android. Writing import './test.png' will choose the most appropriate image for the device size: test.png, test@2x.png, or test@3x.png.

    Layout works differently for images downloaded from the web and those imported as files.

    • Imported images: the image file is scanned at build-time, and the image's dimensions are included as metadata in the app bundle. The dimensions of an Image component are then set to image's dimensions by default.
    • Images from the web: the dimensions of the image aren't known at build-time, so the width and height of the Image are set to 0 by default. In order for the image to show up on the screen, we need to either set the width and height or a flex value in the style of the Image. If the dimensions are known ahead-of-time, then they may be passed in the source prop along with the uri.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!