Okay.
In this video, I will show you how we can actually use some images inside our application.
So it's very easy to do.
What I did is I import one asset here so I have an image of an apple like this and I have it inside
my assets.
So what we need to do to display this, what I will do is I will inject a new element here inside The
View and it will be an image.
So we also need to import it from the React Native.
We'll collapse it to have more space.
So we have image and it's a self-closing tag so I can have it like this.
So what we need to do here is we need to provide a source.
Here and that will be curly brackets there.
And then we will do something like require and then open parentheses and closing.
And inside here, inside the quotes, we can actually have our path.
So what I will need to do here is I'm inside the home.
JS So what I need to do is I need to step out one folder up so it will be dot dot, and then I will
go to assets and then I will pick my file.
So I will pick it Apple.
Jpeg.
Like this.
So if I will save it now.
You can see something is here, but it's actually so big that I'm not able to see that completely.
So what I can do is I can actually style style it so I can put some inline styles here, so styles style
equal to and then we can have another object inside.
So it will be double curly braces.
And then I can do width, let's say 100 and height, 100 like this.
And I have my apple here.
What I could also do is I could style it different way.
So if I would like to have it being able to stretch and to the entire width, what I could do is I could
wrap this inside the quotes and then put a percentage.
So let's say 100% and I would like to have it 250 pixels.
And you can see it's a full width here.
And then we have 250 pixels there.
And if we have the flat list here, only the list is scrollable.
As you can see here, this is kind of static image displayed there.
So you can handle the styling, whatever you like.
And the important part is the image.
Another option will be a background image, if you like to have it like this so you can do image background.
And then instead of image, we'll need to import this.
But it's not self-closing tag.
So what we'll need to do is we need to wrap something with that background image.
So I will finish that here.
So inside the background image, I will have my flat list here.
So basically this is the same as we had it before, but then I will need to do 100%, for example.
Uh, I misspelled the image background here.
So it's an image back ground like this.
So image background.
I need to also update it here.
And here.
And then what I have is I have an image background here.
And on top of that, whatever is in the inside, this tag and in our case, we have a flat list.
You can see the background image is covering everything there.
And I have on top of that my list.
So you have a different way to display images and you can go to references to documentation to discover
more.
But basically you don't need to have a static images here.
You can actually load them from the Internet as well.
So they might be dynamic, uh, from here.
So that will be the basics of images in React Native.