From the course: Learning React Native

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

The Image component

The Image component

From the course: Learning React Native

Start my 1-month free trial

The Image component

- [Instructor] Let's take a look at how we can add some images to our UI. In our local files, under the assets folder, you will find a couple of pictures of cats. There's a biscuit.jpg and a jungle.jpg. Let's go ahead and load and display these images. You can import a local image file just like you can import a component. So we'll go ahead and import our picture of Biscuit into a variable called picBiscuit. Now, instead of using this text component to display our to do message, I'm going to go ahead and replace it with an image component that we'll use to display the image. I'm also going to change this style class from text to image and remove all of the properties since these will eventually hold all of the styles for an image. Now all we need to do to display the image is use the image tag, change our style to reference styles.image and we can add our picture to the source attribute of the image tag. The image…

Contents