Okay, we have our navigation prepared, so we have our roads prepared in in the application.
But at the moment we don't use them yet.
So the goal here will be to whenever we click on one of the items here listed as movies will be redirected
to our details page and we can actually pass some params into the new view.
So how can we do that?
We can go to the flatlist and inside we have a view normally we would like to use on press, but I have
to say on press is not available on all elements we have on React Native.
That needs to be a certain elements that will accept this callback on press.
So what we need to do is we need to use a certain elements to do we use on press on buttons already
because buttons will have on press.
But if you would like to use it on an element like this, then you need to actually wrap it with something
else.
So now what you will do is you have a various of options as untouchables and that's React native elements.
And I will use and one that is called touchable opacity.
And you can see here four of them listed.
So I will go for touchable opacity.
And what are the others?
So opacity will whatever we clicked, it will just change the opacity a little bit so it will become
a little bit more transparent for a second highlight will make it a little bit darker.
Native feedback.
It is inc kind of style, so it will circle that will go from from your click outside and that's available
only for Android and on without feedback you will have no visual effects to to this.
I will use opacity here and it doesn't really matter at this point which one.
It's purely a visual.
So once you you need to also import it.
And once you have it, it doesn't really change anything at this point.
Like we if we click it, you can see this is clickable and we have that like white feedback.
And that's because we use opacity.
It will go for opacity.
And I use opacity because we have a dark button here.
And if you have something light, then maybe you can use the touchable highlight.
So at this point on touchable, we have option to do on press and you can see here and then we can use
on press there.
So what I will do is I will use an arrow function here and and I can do movie clicked.
What I can do is I can pass an item to this method.
So I will have an access to the currently clicked item and let me create a new constant.
I will do constant because I am in the functional component.
So actually I will do an arrow function here.
I like that.
And we know we will receive an item and I can call it movie here as an argument in the function.
So we will have an access to the movie.
So what we can do with that movies is we need to use a props and from here we can use props and then
I can do a navigation navigate.
And that's a method that will accept detail.
So data like this and this detail is the same as we have here.
So basically, if I will click here, I'm in the details.
So navigation is working fine.
But what we would like to achieve here is to pass some information to our details.
So what we can do is, as a second argument, we can actually include some extra data.
So what I will do is I will open an object and I will do movie and then movie.
So the first one is the param that I would like to pass.
And then this one is the data and this data is coming from here.
So I will pass along with my changing navigation.
I will pass that data into new component.
So what I can do here in the component, what I can do is I can get that data from the params.
To do that I will do constant and then I can say my params and I can do props.
Actually I need to include that.
So props, navigation and then I can do get params and param and then we will get movie that's the name
of the param we specified here.
So that's the name of the param here and the movie.
And then we need to provide a default one.
So by default I can do a null one.
So at this point my params will actually have this data with it.
So what I can do is actually I can name it maybe something like a movie that will make more sense than
my param.
And because we are asking here and if you need to pass more information here, you can pass it a here
inside like separated by a comma and pass in something else.
And here you can have another one that will just get another param.
So that will be the way to handle multiple of them.
So and I can say about.
And then I can do movie that title.
So what I'm hoping is I'm passing the whole movie and that movie will I will get it from the parents
so it will be passed here and here I can actually print the name of it.
So if that will be accessible and then I will print a name.
So if I will save it now I'm clicking on Titanic and you can see details about Titanic going back,
details about Avatar two.
So you can see this.
This is already working.
We have the navigation and we know how to pass our information from one place to another.
So this is a very good example of how we can share some data in between the components using our navigation
here.