Okay, let's work a little bit on the edit component here.
We already have an information from the movie, so what we'll need to do is we'll need to create some
kind of a form here that will fit in the movie details inside and we'll be able to edit the title and
description.
So what we have so far is we have a simple text, as you can see here.
What we would like to have basically is we would like to have a text input.
So I will do text input here and also so text input.
And this is already imported from no, sorry, not from the gesture handler.
And I would like to import that from the React native component here.
So it was imported automatically but from a wrong place.
So what we have is we have a text input here and then we can have in the text input.
I will self-close it first and then we can have a few few things here.
So first thing first, what I can do is I can do a style and because, uh, the basic style, it's nothing.
It doesn't even look like a text field.
So we need to kind of style it in the, um, proper way.
So I will do styles and then I can do input and I will create a placeholder for now.
So that's going to be input and we'll come back to to this in a second.
And so this is the first thing we need to do.
Another thing is we can have a placeholder, so placeholder can be anything you like.
I will name it title and this is only appear when you don't have any anything inside.
So whatever you click edit, you should have the title of the current movie there so the placeholder
won't be visible at this point.
What we can do is we can do on change text.
And that's going to be a function.
And then we can use the arrow function.
So the text coming from this will be something that we don't have it yet.
So before we'll finish this text input, what we'll need to do is we'll need to use a state.
So for each of the of the fields we'll have will have a new state.
So we'll store it in a in a state.
And we've done that before many times.
So I will have one for title and then we'll have a set title.
And then I will use use state.
And basically what we can do here is we can provide a default.
So default will be movie title.
So movie is already there, so we can use the movie title there and the title is here.
So what we can do is we can do set title here and pass a text.
So that's going to be on change text.
It will store it in in this variable here in a state.
Also, we'll provide a value there.
So our initial value will be title this, this variable here.
So whatever we open, this component will have a value title there and that's coming from the state
and that will be default set to movie title from the param and then set title.
Whatever.
We change it, we fill it back to this variable.
So I will save it now.
And let me edit this.
And you can see here it's a black Titanic here, so it is working, but it doesn't even look like a
input.
So what we will do is we'll go back here in the input and we can style it a little bit.
So font size, I'll make it nice and big.
So 24 and then I can do background color, background color, and then I can do white.
So f or white doesn't really matter.
It's whatever you prefer.
And then I will add some padding of ten and then I can do some margin as well to push it away.
Ten So if we save it now, add it.
You can see Avatar two is here.
That's a nice big input.
What I can also do is I can create this, this text.
I will make it as a label and then we can have just a simple label title like this.
And then I will create a label.
Here because this is not a description, so I've changed it for the label.
I can have it 24 here.
I will do a white, which is fine and then I can leave it ten.
So I haven't changed much, but at least it's consistent with whatever we see here.
So we have a title and then we have the name of the of the movie that we are passing.
So we have the Titanic here.
So what do we need to do is we need to do the same for description.
So I will do this description and then I can do set description like this.
I will fill it on default description.
And what we need to do is I will just take this.
I will duplicate it.
Uh, we don't need another container, so we'll have another label and that's going to be description
with the same style and then we will have another one.
So I will do description here.
It's basically the same thing.
So set description.
I'm just pasting the description.
It is faster and then it will be description like this.
So if I will save it now, I should have.
You can see this, the title and the description here.
If I will pick another one here, I should have a new one.
So we already have that.
The last thing what we can add to this view is the button and then I can do on press.
Our function here, we don't need to pass.
And then I can do save movie like this.
And then what I can do is I can also pass a title here, and the title will be Save so I can save close
it here and then I will need to create this save movie function.
So I will do constant because we are in the functional component.
So save movie here and then I can do another arrow function.
Up arrow function and then I can do props.
We have the props here passed and then I can do a navigation and then I can use a method to go back,
go back like this.
So at the moment we don't do much with with this.
It's just whatever we click it, we go back to the previous page.
So I will save it now and then come back here and then add it and then you can find variable button
we forgot to import.
So I have a button here I need to import from React native and it should be okay now.
So we have the button here and then we have a save it.
So if I click it save I'm back to this page here.
I don't do anything now.
It's just I'm coming back here.
But my layout for the edit is ready at this point.
So this is everything.
Prepared to edit our first video?