Let's make sure we can go to the product detail screen, this screen here
and for that first of all in the product detail screen component,
well I'll set up a component by importing React from
React. Then
in there, we probably also need some things from React Native,
for example it can't really hurt to have a view and a text in here and also a stylesheet
and also the image component, by the way the order of these imports here of course does not matter.
I also want to have a button in there because I want to have an add to cart button in here as well and
actually also a scroll view because this detail page could have a very long product description or could
be viewed on a very small device and therefore, it should definitely be scrollable so that we can always see all
the content. With that
here, I'll add my product detail screen component, again a functional component where we receive props,
I'll set up my stylesheet here with stylesheet.create and store it in a styles constant
and of course export the product detail screen as a default. With that,
let's start simple and return a view here with a text where we say the product detail screen which is
just there so that we can see that we successfully navigated there
and so that we can actually use this because we have to return jsx to have a valid component because
the first thing I want to do is adjust the navigation and for that in the ShopNavigator.js file in the
navigation folder,
we can import the product detail screen here from our screens folder, the shop folder and there the product
detail screen,
so that's the file we just worked in of course and map this to an identifier here, I'll name it product
detail here.
These keys as you learned in the navigation section are always up to you,
so now we mapped this screen.
This will be our starting screen because this is the first key-value pair,
this is a screen we can go to though, we can navigate to and to go there,
we need to go to our products overview screen and when we click on view detail, this is in the end the signal
that we want to go to that product detail screen.
So here in this function, we can call props navigation navigate, this navigate function which you learned
about in the navigation section and then there,
I showed you one syntax where you pass in a Javascript object where you set up a route
name, that could be product detail and that will take you to the screen.
So now we save this and
we click on view details, indeed we go to the product detail screen. Now as an annotation in the navigation
section,
I also showed you of course that the alternative syntax to that is that you just pass in the screen
name as a first argument to navigate,
so you can do that as well and it will just work as well. If we also test this on Android,
this is how we can go there.
Now obviously, the goal is not just to go there but to also forward our data or our ID of the product
at least so that we can load the product data inside of the component. Hence as a second argument here,
I pass in a Javascript object which will be my params for this navigation action
and there you can have any key-value pairs you want, I'll add a product ID field here, again this name
is totally up to you though and this will be itemData.item.id because itemData.item
points at a single product which has the look we set up here in models and this has ID prop, so
of course we can access this here and forward it. With that, in the product detail screen, we can extract
this of course, that's also something you learned earlier and which you can just practice here.
We can get our product ID here by simply calling props navigation get param product ID and this
will extract our product ID from the parameters we received.
Now we can use that ID to get our product and of course our products are stored in Redux.
So in the end we need to import use selector here from React Redux, so that we can use it to select a
single product,
our let's say selected product, this constant name is of course also up to you, is now selected with the
help of use selector which receives our state, our Redux state and then we can drill into the products
slice, again that slice name is what you use here in combined reducers products in my case and there
we can get an access to all available products
but of course here I don't want to load all available products but instead, I can use the find method
to find a single product with that function that I pass to find which runs on every item in the array where
we get the product where this function returns true and it should return true if the ID of the product
I'm looking at is equal to the product ID I extracted from the route parameters.
This is how we select a single product and this single product can then be used here,
so here we could output selectedProduct.title for example. If we now save that and we view the
details,
indeed here I see red shirt, if I do that for the blue carpet, I see blue carpet here,
so that's working. It would be nice to see that in the header as well
and there are two options,
we could now use props.navigation set param here and also wrap this in the use
effect call of course,
that would be better to set our title with set param and use it here in the navigation options which
we have to add to products detail to extract it or actually a bit easier,
we go to the product overview which is where we go to that page and besides passing the product ID, we
also pass the product title because here we have that easily available and
we get it with the help of itemData.item.title.
Now we set this param as well and this makes it super easy to extract it in the product detail screen,
there in the navigation options, we can just now add product detail screen navigation
options and this is now the functional form because we need to extract this in a dynamic way from our
route params. 06:41.730 -- 06:48.390 So here we get this nav data object which also has a navigation prop, we need to return our Javascript
object, our navigation options config object here, this should be options of course and in there,
we can set the header title to navData.navigation.getParam product title or whatever you chose
as an identifier for this.
So here I'm using product title because in the product overview screen, I'm setting this to product title.
With that, we're setting this header, let's see whether that works, if we try to go to that screen,
that's looking good,
now we also see the the title of the product here in the header. That is working.
Now I mentioned earlier that we should not just be able to go there by pressing view details but maybe
also by pressing the product in general
and for that, we can go to the product item and there of course, we have the view detail button
but now we can wrap the entire item of course in a touchable
and there we can use touchable opacity and wrap this entire item with touchable opacity,
so wrap this around our entire view here,
these buttons still will be triggered standalone but now we can also press anywhere else and there
onPress,
I now also want to trigger the same, the view details button does, I want to trigger the function we receive
on on view detail, so I will simply forward this to on view detail. And that with that simple change, we
can press anywhere on this item to be taken to the detail screen, also on Android where this however
looks a bit ugly and in general, it would be nice to have this ripple effect there.
Now you also learned how you can implement this,
we need to import touchable native feedback for that and the platform API, so this platform object
and now here in product item, we can set up our touchable component here or whatever you want to name
it, should have a capital character though so that we can use it as a jsx element and this by default
points at touchable opacity let's say
but if platform OS is equal to Android and the platform version is greater or equal than 21 which
is the Android version we need to support the ripple effect,
we can set touchable cmp equal to touchable native feedback and now we can replace touchable opacity
down there
with touchable cmp
so with that variable which holds two different kinds of components depending on where it's running
and now if we do this, we still have that opacity effect here but we have a ripple effect on Android.
However only down there, not on the image and also not respecting our rounded corners as you can maybe
see.
Now to fix the issue that is not on the image,
all we have to do is we have to change some configuration there,
we just have to add the use foreground prop here.
Now on touchable opacity, this will have no effect but on touchable native feedback, this makes sure that
the ripple effect does not apply to the background but actually to the foreground which means
also to elements that are placed on top of our touchable or inside of our touchable component.
So therefore now, this is also on the image and to respect the corners, the rounded corners, I'll actually
do this a bit differently,
I'll add a touchable component inside of my surrounding view instead of outside, like that
and now here I'll add overflow hidden on that product style which is on that view which is now around
my touchable component. With that however, my shadow is lost as you can tell
and here I now even get an error that I need a single React child. Therefore let's actually tweak this
a little bit and let's add an extra view in here, an extra view that wraps everything, my entire touchable
component inside of that outer view and on that extra view, I'll add a style of styles touchable or whatever
you want to name it and this touchable style is now added down here in my stylesheet.
This now gets the overflow
hidden prop, so we add this here and this now also receives the same border radius we have on the
entire cart, so border radius of 10 here and this will now make sure that we keep our shadow, so that still
works because overflow hidden would have cropped this and now to get rid of that other error here as
well, we can simply wrap yet another view around all the content inside of touchable component so that
we'll fulfill this criteria of having only one child item in touchable component
and now with that, we have the same behavior as before on iOS. To cart by the way does not trigger this
details navigation which is good and on Android,
we now also have that ripple effect which respects our rounded corners which takes us to the detail view
and to cart also does not do that which it shouldn't.
So with that, now we have the navigation we need,
we have the look we need here.
Now we can go to the detail page and we should now maybe make sure that this detail page also looks the way
it should look.