Okay.
We have our list of movies already dynamic in our application.
So if we go to the application now, it's not really functional that much because it's just a list of
the movies.
So what I would like to do in this video is whatever we click on one of the movies here, we'll go to
the details page and we can display some more information about this movie.
So how can we achieve that?
We first, we need to enable navigation.
Then we need to make it this list clickable and then redirect to the detail space and add a path.
Some props to the new view and I will show you how we can do that in this video.
So first thing first we need to go to App.js.
And in the same way as we've done it before in the previous section, we need to enable navigation.
So I will close the server here and I will do yarn, add, react navigation and React Navigation stack.
Okay, this is.
Hold on.
If I will open the package.json.
Here I have React navigation, React Navigation stack.
What I found is, is if you install gesture handler with a yarn or MPM, it might be buggy.
There's some bug open back here so I will insert with expo.
And that will install the proper version of it, which is 1.3.
Probably that will be resolved soon.
So you can do it with yarn or NPM.
At the moment the solution is with expo.
It doesn't really matter but will pick the version that is working for the uh for the current expo project.
React Native Gesture Handler.
And you can see Expo can also install things and this is what it has been installed and we have 1.3
version.
The latest is 1.4.
So if you installed that with yarn or NPM, you will have the version that is not really supported with
this expo.
So once we have that, then we can enable some application Json here.
So what we need to do is we need to create navigation here and this will be the same way as we've done
it before.
So import.
Create app container from React.
Navigation
and this supposed to be curly brackets here um like that from react navigation and then import.
Create Stack Navigator.
And that's going to be from React.
Navigation stack.
Okay, we have that.
So we will do this one.
So, So.
Constant App Navigator.
And that's going to be this method here.
And then inside object so we can have list or movie list and that's going to be screen movie list like
this.
Also, what I will need to do is I will duplicate it and I will do detail and then I will do detail.
So also I will need to create a new component here.
So I will do detail.
JS And then inside the list I can just quickly hack it so it will save me time for typing these things
up.
So I will leave it for now and just have inside view.
I can have a simple text and that's going to be.
Detail it out here.
I don't need to have that and then I can remove this one.
I will call it detail and then I can leave it for now, the rest of it.
So we have a new detail there.
What I need to do is I also need to import that in App.js from detail.
So I have this one and I have App Navigator, so I can remove this one.
Actually, I can remove this one.
And then I will add constant
up is equal to create app container.
And what I need to do is I need to pass up navigator there.
So that's it.
Let me do Expo start.
I can actually kill the application here and run it again.
Okay, this is still loading.
So we have our navigation kind of ready.
We haven't done yet the the full navigation.
Whenever we click this and move it to another component and we'll do that in the next video.