So let's make sure we can see all the data we're working with. In the place
item, I already got a feel for the address,
I just need to make sure I fit that into there. So in the place list screen, when I use the place
item, instead of passing null for the address, of course we should pass itemData.item.address
in there because we should have the address stored.
So if we try that and this reloads, we see dummy address here and now if we add a new item which should
work as a title and then an image to take a nice image and we can even move around here a little bit
by pressing the key you see down there,
so now if I take an image here,
yes this looks good,
this one and confirm by clicking on crop up there,
that looks good.
Now get the user location maybe and then save this, this looks good.
This is the address of the Google headquarters,
this looks like the image I took
so that's nice.
Let's make sure that on the detail page, we also see a bit more about this and for that on the place detail
screen here, we of course can tweak this and add a scroll view so that we ensure that we can always see
everything, we don't need a flat list here because we'll not have an infinite amount of items, maybe just a
little bit of scrolling that is required based on the device size
and then in there, I definitely want to be able to output an image.
So here I'll output my image and below that,
I also want to be able to output my address and then also actually, a map preview,
so I'll import this as well and we'll need to tweak that component a little bit
therefore but for now I'll just import map preview from components map preview, like this and output
this below my text here.
Now in the text, I want to have my address text in the end and that's of course all data which I expect to
get passed as params or with the help of params,
so to be precise when we select an item, we already pass in the place ID here.
So in the place detail screen, I can get the place ID by accessing props.navigation.getParam place
ID is the identifier I used and then we can of course use use selector to get the fitting data from our Redux
store,
so from React Redux, that's where we import this from
and then here, we can get our selected place with the help of use selector, pass in a function and access
state.places.places and then the find method to find a specific place where the place ID should
be equal to the place ID we're extracting from our params, that's the place we loaded for this screen
and the selected place of course therefore has an address field which we can access because that follows
our place model in the end and for the image, we can of course then also bind the source and set the URI
on this object we pass the source to selectedPlace.imageUri because in my place
model there, I name this
image URI,
that's what I'm extracting here
and for the map preview, I want to pass in my location.
Good thing is my map preview of course takes a location,
it looks for this location prop so I can pass this in and this should be an object actually with lat
key, so we can use selectedPlace.lat for this and the lng key which is selectedPlace.lng.
So now we pass all of that in there.
Now I'll also wrap the text here into a view and then assign some stylings here,
so on the image here, I want to have a style of styles.image on this view here which wraps my entire
location based stuff,
I want to have a style of let's say location container. On this view here,
a style of
address container, on the text here, style of address and on the map preview, I'll also set a style and name
this map
preview, like this.
Now if you use the exact same names, attached you find some styling which I set up for you,
you can just replace your styles object with that
and this sets up styles for all these identifiers I just added to make that all look the way I want it
to look.
So that's attached and you can use that to make sure you get the same styling out of the box without
me writing all these styles because we've written so many styles throughout this course, here I really want
to focus on the native functionality and not write those all again.
Now one important thing, on the scroll view, you also should set the content container style and there
I'll use a quick and dirty inline styling to set align items here to centers so that everything is
nicely centered on the horizontal axis. With that we should be able to view the details about a place.
One important note, I use the colors constant in the styles I provided to you,
so you need to make sure to import that, import colors from Constants/colors and with that import added
here as well, if you save that and this reloads, you should be able to see these places on Android and
of course you could show a fallback text if you have no places
but now here, you see the places
and if I click on it, this is the detail screen.
Now the one problem I have with that is it looks nice,
that's good
but if I click on the map, nothing happens and of course there I want to go to the map screen as well
but in a non-editable way, so that I go to the map screen without being able to edit it there.
That's the remaining piece
we need to add.