So in the places list screen, I want to output a list of places unsurprisingly
and for that you know one component from React Native
we can import and that's the flat list. Flat list of course is perfect for outputting
a list.
So here I will return flat list now
and I want to get access to my places.
These are stored in Redux so we can
or with the help of Redux, so we can import React Redux here or to be precise, from that package, we import
use selector because now in our component, we can use that to get access to data stored in Redux.
So here, I want to get access to my places with the help of use selector,
that's a breeze, we pass in that function which receives our Redux store, our Redux state which is stored
in the store there and there I want to get access to the places slice and here I use places because in
app.js, I used places as an identifier here, that takes us to the slice managed with the places reducer
and in that reducer, we have another places key,
so in the end here I want to access state.places.places and with that, we know which kind of
data we want to feed into the flat list.
Now again, I will also add a key extractor here to tell the flat list where to find a unique ID for
every item and for me that's in the ID property of every place
and of course we need to add render item, so that we get our item data data and then output a component
for every item which we want to output.
Now for that, I'll actually create a brand new component in the components folder and that's the
PlaceItem.js file. Now to save some time, I attached my PlaceItem.js file to this lecture and you can just
replace yours or the content of yours with mine but I'll of course walk you through what I'm doing in
there.
This is a basic component as we also built it multiple times throughout this course, I just have my
own component here which is able to output an image because we'll need that later, which then has a view
with two pieces of text that will sit next to this image,
thanks to the styling which I applied down there. There, I output the title and the address of that place, of
course that's information we don't have yet but we'll add this throughout this module and we have a touchable
opacity component around this so that we can press every place and when we do press it, we trigger a
function that we expect to get on the on select prop.
Now in my styling here, I set this up such that the image and this text block sit next to each other
in a row here with flex direction row, the image is then the rounded image,
so it's a rounded image, it's a circle with a full background colour in case we have no image yet which
you of course also can change to for example this grayish colour. Then we have the info container which
is the container holding the two pieces of text which now are organised in a column above each other
and then we have the title which is a little bit bigger than the address and there, I actually also want
to use black as a text colour. That's the setup I'll use here and that's the place item which we can
now import into the places list screen,
so there we can import place item from components place item and output this here in render items.
So there I want to output place item as a self closing component and now place item, this new component
needs some input data. We need to pass in an on select prop which points at a function that should be executed
when we tap an icon. We need to pass in an image prop, a title prop and an address prop, so four props which
need to be provided. So let's do that here. For the image, we got no image yet,
so here I'll just pass in null for the moment. For the title, we can do that of course, we can point at
itemData.item.title because a single item is just an item following our place model and that
of course has a title prop, so we can safely access that. For the address, we don't have that yet so I'll
set this to null
and for on select,
well we can of course set this, there
I want to go to a new page
after all. So we can do this with an anonymous inline function here or with a named function stored in
a separate constant, whatever you want,
I'll do it inline
and there I can use props.navigation.navigate and go to the place detail screen with the place
detail identifier which of course in my navigator is this identifier here
and there
I also want to pass some extra data, some param, so I'll pass a second argument here to navigate and there
are two pieces of information I want to pass,
that's the place title and that of course is itemData.item.title,
so the exact same thing I'm feeding into the title prop here
and that's also the place ID which is itemData.item.id and
we have that ID also already,
so that's already something we're generating when we add a new place. With that, we have a place item which
takes us to the place detail screen and since we already have some basic skeleton in that screen,
we should be able to see that.
One thing I will add to the place detail screen however is my navigation options configuration where
I need that dynamic function which then returns a configuration object because there I want to set the
header title based on the params I'm getting because in the place list screen, I'm passing in a place title
and place ID parameter to this new screen. Place title is what I want to extract and set here in my
header,
so there I can set the header title to navData.navigation.getParam place title so that
we have this title in the header. And now with that, let's give it a try, let's save everything and add
a new place, a test. Click save place, we're taken back and we're seeing that here if I tap it, we go to the
detail screen where we see that in the header. Let's also give it a try on Android with a test, save this,
click on it and that all works. So that's the basic flow for this but one thing we still haven't done
of course is use some native functionality.
So now it's really time that we do that and I want to start with the camera.