Display Local and Remote Images in React Native
Images in React Native can be displayed with the built in Image component, which is similar the the img tag on the web. We’ll use Image to show both local images (included in the source of the app), and remote images (fetched from a web address).
Instructor: [00:00] Let's name a new folder in Source called Images and a new package.json file in the images folder. Specify a name of images, which will allow us to use an absolute import path to import images from this folder.
[00:19] Into that folder, we'll paste the images of a pizza slice at 1X, 2X, and 3X resolution. Note that the naming is important here. All three files should have the exact same basename, and the 2X and 3X files are differentiated with @2X and @3X before the file extension.
[00:41] Then in app.js, we can import that image like any other component, except that we must ensure to add the file extension. Even though the @2X or @3X isn't included in that import statement, React Native will automatically detect the proper file to use for the current device.
[01:00] We can't use that image directly. First, we have to impact the image component from React Native. Then in the render method, we'll use the image component and set the source prop to the pizza image that we imported. We can add a wrapping view for a bit of styling. When we load now, we have that image, which will be included in the app bundle and displayed automatically at the proper resolution for the current device.
[01:28] To look at remote images, that is, images that aren't in our bundle and that we'll have to download from a server, let's switch to restaurantRow.js and log the values of the places coming from the server. For every place, the server is also sending an image name. We can get those images from the server.
[01:49] Let's import image into restaurantRow.js and use image in the info component of the row. We're going to set the source prop like before, but with remote images, we have to supply an object to that prop and include a URI key. That URI is where we can get the image, just like with an image tag on the Web.
[02:13] Remember that in the in iOS simulator using localhost is OK, but that won't work on the Android emulator. Use your computer's local network IP address instead.
[02:25] If we reload the app now, nothing is showing up where we would expect the image to be. That's because it's important in React Native to specify the image dimensions for remote images, at least to specify what dimensions you'd like the image to be on screen.
[02:42] We can go back to image and in the same object where you specify the URI, you can also specify a height and a width. Then when we reload, we can see the image.
[02:55] We could also specify the height and width as a style prop instead of in the source prop, but if we specify the wrong aspect ratio, say we try to make the image wider than it is tall for this square image, React Native will automatically fill the width and height and clip the image that doesn't fit.
[03:14] You can keep that setting or specify a different one by specifying the resize mode prop on the image component. For example, we could stretch the image, which will deform the image -- probably not what we want to do in this case -- or we can set the resize mode to contain, which ensures the entire image will be displayed within the width and the height, which is probably what we want for this image.
[03:39] If we don't know wide the image is, but we want it to fill the space, we can also set flex 1 on an image instead of a width. The image will flex just like a view does, but still obey the resize mode to prop that we give it.