Okay.
In this video, I will show you how we can actually add some controls into our top bar.
And we'll introduce a new component for editing our movies.
So what we will need to do first, let's create a new button in the top bar.
So I will go to details, navigation options here.
And what I can do here is I can have a header header right like this.
And then what I can do here is I can include some element there.
So what I will do is I will include a button and also what I will need to do is I will need to import
that button there so we don't use the image and flatlist on this screen so I can remove it for now.
And then we have a button there.
So basically what I can have on a button is I can have a title.
So this title will be added.
So this whenever we click on this, we will add it.
And also I will do a color and I can do color color white like this.
So I will close it here and then save it.
And then we have a problem with some styles.
Probably.
I miss a character.
This shouldn't be a curly braces, this should be a parentheses.
So I will change it like this and then save it.
Unfortunately, my my thing starts because it failed building the JavaScript.
So it kind of froze.
So I'll do control C and I will start it again.
So I will need to run it again.
Unfortunately, that sometimes freeze.
So we'll kill it and I will run it in simulator again.
Okay, so clicking here, you can see I have a button here that is called edit and it is white so I
can click it and nothing happens.
Nothing happens because we haven't add any action to it.
So what we need to do first is I will create a new component.
So inside the components I will do edit.
JS And what I can do is actually basically basically I will copy all the details here and I can put
it in the edit and that will speed up the the process.
So in this time we'll, it will use the edit.
So let me put a simple text here.
I will remove most of it and I will clean it in a second.
So I will do edit movie just to have something to display and then we can actually, uh, leave some
of it now.
So I'll have edit And also this needs to have edit navigation options.
We'll use it as well.
And then we have a styles that we can clear after.
So basically what we have here is we also trying to accept the movie because whenever we want to edit,
we want to edit a specific movie.
So basically what we will need to do is we need to pass from the details here, the edit this movie
from the details to into edit component.
So also before we will go this we need to also so I will duplicate this and import a new component from
edit and then I can also duplicate this and then I will have another one.
So edit will go edit like this.
So we'll have another component there ready for us.
And then what I can do is inside the details, I will go to the header right button and then inside
here I can add on press.
So if we on press and I can do it inline here, so whatever we press, I will do an arrow function and
then we can use the same screen props here.
So screen props like this and then navigation and then I can do navigate.
And we've done it before with the in the, in the list component.
So we'll use the same kind of method here.
And then I will navigate to edit.
So if I will test it.
Now you can see here I have this and I click edit and I have edit movie.
At the moment I don't pass anything there, so we don't do specific movie there.
So I can come back here and then we can actually pass some extra parameters.
So what I can pass, I'm expecting in the edit, I'm expecting movie as well.
So what I do is I will do movie and then I can do screen props like this and then navigation Getparam
and then I will take I will get the movie from here.
So basically what I'm, what I'm doing there is I have screen props, navigation, navigate.
This is the same method as we used here, you can see here.
And then I navigate to edit and I take the this movie that has been passed here.
You can see we already in this component.
We have a movie and I will pass it forward to our edit.
So I'm passing that here at the moment.
We don't use it yet, so what I can do is edit and then instead of the movie, I can do a movie dot
title.
So let's see if that's working fine.
So Titanic and then I will do edit and you can see, edit Titanic will come back here and inside the
Titanic.
And so let me come back to the avatar here.
Edit And we can see I have another one.
So what we did is we basically we pass our data from one component to another with some props.
So I will do a clean up here.
We don't use this anymore.
So at the moment I, I can, I can have it here because we'll use the this later on and then I will
do a little bit of cleanup.
We can leave the styling as it is here and then we will remove from the edit, we'll remove the this
button there because we don't want to edit edit again.
So I will leave it like this.
And at the moment we use only container and description here.
So I will do container, I can remove the those and then I have a description and we don't need to have
any styles like this.
And I will save it.
So it's much more.
So we have a new edit component here and we can use it with some forms to actually edit the movie and
install it in our database.