This is going to be product images.
And the root will be in the admin we will create.
Product Images
RFC save.
Product images.
It is auto imported?
I think so.
Yeah, it is.
If I open the this.
Okay, we have something wrong here.
And again I did RC instead I want to do Rafi Right.
So let's go again inside admin panel in the edit and manage image.
So yeah, this is where we will manage the images of our product.
So whenever we will create a product, you see we have an image option.
So this is to add the product image, only single image.
And in the edit we can add multiple images, right?
We can actually make a new plate, all the images.
So this is where we will render all the images.
We can delete each images or we can add more images, right?
So let's create this.
So inside this view, we will simply do style and let's spread the default style.
So default size, it is all imported, right?
And now we will change the background color to color five.
So colors dot color, five regular, basically.
Yeah.
And after this, we will add a header.
Make sure to add back button.
So back will be true.
Yeah.
And let's copy heading from any other let's say new product.
Let's copy the heading.
And we need to import the foam heading side.
Right.
If I'll go again in the management.
So here.
Edit manage images and we can see new product.
So let's change this to images or you can say product images.
So it's up to you.
I'm going to leave this two images.
Now.
I will add a scroll view here.
So this is the scroll wheel.
Let's add margin bottom.
This is going to be 20.
Let's close the terminal.
And inside this, we will add a view here, first of all.
So
this will be the background, color and colors.
Note color to
padding will be 40.
Minimum height will be 400.
Right.
You can see the view right now.
Inside this view, we will render all the images.
Right.
So let's create a temporary variable called images and set images.
So this will be a variable from you just set.
And if I'm not wrong, we have already sent this.
Let me check.
Okay.
We are already sending the images.
Right.
So there's no need of doing that.
We will have root.
Let's do a control over root dot params and let's see what we will get if we have images error.
So let's do
cause images is equal to user state
root dot params dot images and we'll copy paste for the id.
So this is going to be ID dot ID, right.
So this is the idea of product.
Remember, because we are in the update section of a product, right.
So we'll map on this image area.
Right.
And we will do a map
and we will return a component called image Card.
We'll create this component in a minute.
But for now, let's create a file simply inside this.
Let's create a file image card as our and for this time, save this, close this and let's do our auto
import.
Okay.
We have to do it manually.
Image card.
And this is also image card.
Yeah.
So we will simply do a map while passing through things.
So this is going to be image URL.
I mean, I wrote you URL and the ID will be I don't I don't underscore ID.
Remember, this is the idea of image, not product.
Right?
So that's why we are doing either to underscore ID, we will also pass a delete handler.
So let's create a delete handler and we will also pass a key of course keys mandatory.
I want underscore ID.
I think this will be the key.
Yeah.
And of course it is not showing any error because error is empty, so it's not mapping actually.
So we will create some images in a minute.
But let's come to the bottom of the section after this scroll view.
We will add a view here.
So this is view with some styling.
So styling will be padding 20
border radius, 20, border radius ten.
And then the background color, this will be colors, dot color, three.
You can see in the bottom right after this, we will add an image.
So let's import image from React Native.
Right.
Let's give this some property.
First of all, is tile okay?
I think it is not imported.
So from React native.
Okay, let's import manually image.
Yeah.
Let's give this some property.
First of all is styling.
So this tile, this will be very straightforward background color first.
So this will be the color too.
So color dot color two width hundred.
Height hundred.
Alina.
Well, this is going to be center resize mode.
This is going to be also center, of course, not center.
This is going to be contain.
Right.
And one more thing.
We need to pass this over.
So source, this is going to be UI will be image.
So we'll create a variable.
This is the variable image.
So this will be the URI, right?
After the image, we will add another view.
In this view, we will say style, flight direction.
A row flight direction is a row and justify content.
This will be center because in this view will first add touchable opacity.
Touchable opacity.
Let's import from React Native.
Right inside this we will have an icon of the dot icon.
Let's use of that icon first.
Pass the icon name.
So icon.
This will be the icon off camera.
So we can also copy this from the new right.
So this is our looks quite similar right Also change the color to
black color three and also styling background color colors or color to.
Right.
And also, let's add some margin.
Margin is ten.
And on the opacity, let's pass some information on press
navigation.
Let's take navigation.
We have taken navigation.
Now.
Let's do navigation, dot navigate navigation, dot navigation, dot navigate.
And we will navigate this to camera while passing update product, Update product.
This will be true.
Okay.
Make sure to pass in as option as object.
Right.
So I am not clicking, I'm just holding.
So we will also reduce the table opacity effect.
So active opacity, this will be 0.9 or eight.
So let's try.
Yeah, this is exactly what we want.
Right.
I'm holding again, I wasn't clicking because if I click it will react to the camera page.
Yeah.
So let's come out of this view and now let's create a button here from the paper.
This is add.
Simply add now pass some properties.
So first, so the button will have the background color,
color, dot color, one red color, of course, padding six and text color change the text color to
white, obviously colors dot color two.
Yeah.
And also let's add two things.
Loading will have loading of visually and on press.
We'll have
on price will have some handler.
Let's simply pass the summit handler because we don't need to pass any argument.
And we will also do one more thing that.
We will disable the button.
If you make change, we will create a image change variable will disable the button if image change
is not true.
All right.
So will only allow if image is changed.
Right.
So if image does not change, then we will disable the button.
Right.
So let's create the variable.
Let's go to the top.
Here we have images.
Right.
And change the ID to product ID because we will use the ID keyword to reference the image ID.
So the ID here is product ID, right.
And then we will have an image insert image.
So I will remove the image from bottom.
This is initially is you can say null.
Let's remove from the bottom.
So this is the image.
And then we will have a variable called image change.
Image change insert image change
user set.
Initially it is false, right?
If I'll say you can see we we don't have any loading here.
Yeah.
So let's create a loading.
If I'll do loading is equal to true and I'll go again in the update product and inside my images.
Okay, let's create a summit handler.
Again.
Go here, go here.
EDIT You see manage images and it is loading.
So let's change this to false.
Yeah, this all looks.
Also we need to create a delete handler console log.
This image ID will console.log the image ID and bottom.
We will add a product ID.
Product ID with the product ID?
Yeah, just like that.
Now let's create the image card component because we can't see anything.
Right?
Of course.
So we have sent these three things, right?
Let's open the image card handler and inside this we have source ID and delete the three things RC ID
and delete handler.
Let's use them.
So first of all, of course this is going to be a view, so we will add some styling.
So let's create a variable.
Of course, account style is equal to a weight.
Not of course not.
A weight is equal to a stylesheet.
It is a temporary dot create and we'll use a word container.
Let's pass all the information.
So background color, this is going to be colors, dot color to white color and elevation will be five
and margin will be ten.
Banning will be 15.
Online items will be sent to
border.
This will be ten.
Height will be 300.
And let's pass this information.
Let's use this style in here.
So styles dot container.
All right.
So this will have a container and then image.
So let's import our image from React Native.
It is not importing.
Let's import manually image.
Now, inside this image, first of all, we need to pass the source.
So source will be the URI, which will be the SRI, which we have taken from the above.
And inside this we will add some styling.
So which will be 100%.
Height will be 80% and the resize mode.
This will be the contain three things.
Okay.
Now, after this image, we will simply add a touchable opacity opacity.
So let's import touchable opacity.
Inside this we will have outer of the icon.
Inside this we will add the size 30 I can delete will have a style called background, and the background
color will be the color one.
Right.
So if I'll say you can't see anything of course is still so basically this is for delete deleting product
and we will also use delete handler here on press.
We will call the delete handler while passing the ID idea of the image basically.
Right.
So now we have already created this image guard.
Now open the product, update product.
And last passed the array in in the many images we have taken the empty array.
So let's add some object.
I will create this array above.
So if the property and value same, then simply we need to pass the images and we will create the array
on the top.
So MDF basically.
So let's imagine this is the images.
So this is the image that we are passing.
Now let's add some property.
So I'll copy a URL image URL from, let's say if I'll open the cart in the top.
We have this image, right?
Let's take this image.
I will copy this.
And remember in the images are what we have.
We have three things You are l and the idea of image basically two things, right?
So you all will be this that I have copied.
And another thing will be the ID.
Underscore ID basically that MongoDB will generate for us.
So this is the first copy paste second and change the ID simply that manage images.
And you can see we have two images here, right?
You can clearly see both of them.
So this is how all of our images will look.
We can see all the images of product.
We can delete any images, right?
If I click this, nothing will happen because in the product images we have created this image handler
delete basically.
So after clicking this it should have printed the idea of both.
So yeah, image id in product.
So it is working.
If I'll delete this one, then you can see the ID and the image of this product.
Right?
So it is working fine correctly.
So everything is working as we expected.
Right.
And we will create this now because this is the only thing that is remaining to change the camera,
basic camera route.
So let's do this.
And one more thing here.
We have used the image and in the new product, if you go in the new product, we have used the avatar.
So it's up to you, your choice.
You can also use the image here because of course, the product image will be in the square, Right?
So it's up to you.
Now.
You must be wondering when we will use these two.
We will use them in the use effects.
Okay.
So I'll show you in a minute.
Let's now create the camera component.