1
00:00:02,070 --> 00:00:07,410
So in the places list screen, I want to output a list of places unsurprisingly

2
00:00:07,550 --> 00:00:09,780
and for that you know one component from React Native

3
00:00:09,780 --> 00:00:14,010
we can import and that's the flat list. Flat list of course is perfect for outputting

4
00:00:14,040 --> 00:00:15,620
a list.

5
00:00:15,780 --> 00:00:18,570
So here I will return flat list now

6
00:00:18,900 --> 00:00:21,890
and I want to get access to my places.

7
00:00:21,930 --> 00:00:23,970
These are stored in Redux so we can

8
00:00:23,970 --> 00:00:30,960
or with the help of Redux, so we can import React Redux here or to be precise, from that package, we import

9
00:00:30,960 --> 00:00:37,740
use selector because now in our component, we can use that to get access to data stored in Redux.

10
00:00:37,740 --> 00:00:41,630
So here, I want to get access to my places with the help of use selector,

11
00:00:41,640 --> 00:00:47,190
that's a breeze, we pass in that function which receives our Redux store, our Redux state which is stored

12
00:00:47,190 --> 00:00:53,490
in the store there and there I want to get access to the places slice and here I use places because in

13
00:00:53,490 --> 00:00:59,880
app.js, I used places as an identifier here, that takes us to the slice managed with the places reducer

14
00:01:00,240 --> 00:01:02,880
and in that reducer, we have another places key,

15
00:01:03,000 --> 00:01:09,870
so in the end here I want to access state.places.places and with that, we know which kind of

16
00:01:09,870 --> 00:01:12,660
data we want to feed into the flat list.

17
00:01:12,660 --> 00:01:19,800
Now again, I will also add a key extractor here to tell the flat list where to find a unique ID for

18
00:01:19,800 --> 00:01:23,480
every item and for me that's in the ID property of every place

19
00:01:23,490 --> 00:01:29,820
and of course we need to add render item, so that we get our item data data and then output a component

20
00:01:29,820 --> 00:01:32,920
for every item which we want to output.

21
00:01:33,060 --> 00:01:38,730
Now for that, I'll actually create a brand new component in the components folder and that's the 

22
00:01:38,790 --> 00:01:47,910
PlaceItem.js file. Now to save some time, I attached my PlaceItem.js file to this lecture and you can just

23
00:01:48,180 --> 00:01:53,040
replace yours or the content of yours with mine but I'll of course walk you through what I'm doing in

24
00:01:53,040 --> 00:01:53,790
there.

25
00:01:53,910 --> 00:01:59,520
This is a basic component as we also built it multiple times throughout this course, I just have my

26
00:01:59,520 --> 00:02:05,460
own component here which is able to output an image because we'll need that later, which then has a view

27
00:02:05,520 --> 00:02:09,240
with two pieces of text that will sit next to this image,

28
00:02:09,270 --> 00:02:15,930
thanks to the styling which I applied down there. There, I output the title and the address of that place, of

29
00:02:15,930 --> 00:02:21,900
course that's information we don't have yet but we'll add this throughout this module and we have a touchable

30
00:02:21,900 --> 00:02:27,720
opacity component around this so that we can press every place and when we do press it, we trigger a

31
00:02:27,720 --> 00:02:31,400
function that we expect to get on the on select prop.

32
00:02:31,440 --> 00:02:36,990
Now in my styling here, I set this up such that the image and this text block sit next to each other

33
00:02:36,990 --> 00:02:43,230
in a row here with flex direction row, the image is then the rounded image,

34
00:02:43,230 --> 00:02:49,860
so it's a rounded image, it's a circle with a full background colour in case we have no image yet which

35
00:02:49,860 --> 00:02:56,310
you of course also can change to for example this grayish colour. Then we have the info container which

36
00:02:56,310 --> 00:03:01,590
is the container holding the two pieces of text which now are organised in a column above each other

37
00:03:02,010 --> 00:03:07,290
and then we have the title which is a little bit bigger than the address and there, I actually also want

38
00:03:07,290 --> 00:03:14,210
to use black as a text colour. That's the setup I'll use here and that's the place item which we can

39
00:03:14,210 --> 00:03:17,330
now import into the places list screen,

40
00:03:17,330 --> 00:03:27,850
so there we can import place item from components place item and output this here in render items.

41
00:03:27,850 --> 00:03:34,780
So there I want to output place item as a self closing component and now place item, this new component

42
00:03:34,780 --> 00:03:40,630
needs some input data. We need to pass in an on select prop which points at a function that should be executed

43
00:03:40,630 --> 00:03:47,560
when we tap an icon. We need to pass in an image prop, a title prop and an address prop, so four props which

44
00:03:47,560 --> 00:03:53,730
need to be provided. So let's do that here. For the image, we got no image yet,

45
00:03:53,740 --> 00:03:59,500
so here I'll just pass in null for the moment. For the title, we can do that of course, we can point at

46
00:03:59,590 --> 00:04:06,010
itemData.item.title because a single item is just an item following our place model and that

47
00:04:06,010 --> 00:04:13,100
of course has a title prop, so we can safely access that. For the address, we don't have that yet so I'll

48
00:04:13,100 --> 00:04:14,470
set this to null

49
00:04:14,780 --> 00:04:16,260
and for on select,

50
00:04:16,280 --> 00:04:18,440
well we can of course set this, there

51
00:04:18,440 --> 00:04:19,940
I want to go to a new page

52
00:04:19,970 --> 00:04:25,070
after all. So we can do this with an anonymous inline function here or with a named function stored in

53
00:04:25,070 --> 00:04:26,750
a separate constant, whatever you want,

54
00:04:27,200 --> 00:04:28,300
I'll do it inline

55
00:04:28,610 --> 00:04:35,440
and there I can use props.navigation.navigate and go to the place detail screen with the place

56
00:04:35,450 --> 00:04:40,580
detail identifier which of course in my navigator is this identifier here

57
00:04:43,380 --> 00:04:43,950
and there

58
00:04:43,980 --> 00:04:50,610
I also want to pass some extra data, some param, so I'll pass a second argument here to navigate and there

59
00:04:50,610 --> 00:04:52,860
are two pieces of information I want to pass,

60
00:04:52,860 --> 00:04:57,680
that's the place title and that of course is itemData.item.title,

61
00:04:57,750 --> 00:05:01,770
so the exact same thing I'm feeding into the title prop here

62
00:05:01,770 --> 00:05:06,650
and that's also the place ID which is itemData.item.id and

63
00:05:06,720 --> 00:05:08,890
we have that ID also already,

64
00:05:08,910 --> 00:05:14,640
so that's already something we're generating when we add a new place. With that, we have a place item which

65
00:05:14,640 --> 00:05:19,800
takes us to the place detail screen and since we already have some basic skeleton in that screen,

66
00:05:19,950 --> 00:05:21,890
we should be able to see that.

67
00:05:21,960 --> 00:05:28,170
One thing I will add to the place detail screen however is my navigation options configuration where

68
00:05:28,170 --> 00:05:34,950
I need that dynamic function which then returns a configuration object because there I want to set the

69
00:05:34,950 --> 00:05:41,040
header title based on the params I'm getting because in the place list screen, I'm passing in a place title

70
00:05:41,040 --> 00:05:47,070
and place ID parameter to this new screen. Place title is what I want to extract and set here in my

71
00:05:47,070 --> 00:05:47,890
header,

72
00:05:47,940 --> 00:05:56,040
so there I can set the header title to navData.navigation.getParam place title so that

73
00:05:56,070 --> 00:06:02,910
we have this title in the header. And now with that, let's give it a try, let's save everything and add

74
00:06:02,910 --> 00:06:11,230
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

75
00:06:11,230 --> 00:06:18,100
detail screen where we see that in the header. Let's also give it a try on Android with a test, save this,

76
00:06:18,700 --> 00:06:26,070
click on it and that all works. So that's the basic flow for this but one thing we still haven't done

77
00:06:26,070 --> 00:06:30,300
of course is use some native functionality.

78
00:06:30,570 --> 00:06:34,710
So now it's really time that we do that and I want to start with the camera.