WEBVTT

1
00:00:00.170 --> 00:00:01.992
In this lesson, we're gonna take care

2
00:00:01.992 --> 00:00:04.660
of a few of the warnings that we've seen

3
00:00:04.660 --> 00:00:06.260
over the last few guides.

4
00:00:06.260 --> 00:00:09.060
We're gonna start with one that we just created

5
00:00:09.060 --> 00:00:10.370
in the last guide.

6
00:00:10.370 --> 00:00:12.990
And you can see it right here on the screen.

7
00:00:12.990 --> 00:00:17.240
And if you happened to have clicked Dismiss All,

8
00:00:17.240 --> 00:00:20.240
then you'll have to restart the simulator to see it now.

9
00:00:20.240 --> 00:00:22.250
But the very first one said

10
00:00:22.250 --> 00:00:26.400
each child in a list should have a unique key prop.

11
00:00:26.400 --> 00:00:31.100
So if you remember, we used a key prop on the post item.

12
00:00:31.100 --> 00:00:33.042
But with the way React works

13
00:00:33.042 --> 00:00:35.860
when it's looking for a key,

14
00:00:35.860 --> 00:00:38.930
it has to be on the outermost component

15
00:00:38.930 --> 00:00:41.470
whenever you're iterating over a collection.

16
00:00:41.470 --> 00:00:43.250
So, to fix that warning,

17
00:00:43.250 --> 00:00:48.250
all we have to do is cut this key prop from the post item,

18
00:00:48.700 --> 00:00:53.700
and then paste it in the touchable opacity component.

19
00:00:53.760 --> 00:00:55.480
And that will fix that one.

20
00:00:55.480 --> 00:00:57.300
It doesn't remove that warning,

21
00:00:57.300 --> 00:01:00.705
but it you wanted, you could simply refresh,

22
00:01:00.705 --> 00:01:03.930
and you'll see that that's no longer popping up.

23
00:01:03.930 --> 00:01:05.840
That's the first one.

24
00:01:05.840 --> 00:01:08.920
Now the next one is a little bit trickier.

25
00:01:08.920 --> 00:01:10.143
If you click right here,

26
00:01:10.143 --> 00:01:12.630
and go to the Post Detail screen,

27
00:01:12.630 --> 00:01:14.427
you'll see a warning that says,

28
00:01:14.427 --> 00:01:17.820
"Deprecation in navigation options."

29
00:01:17.820 --> 00:01:20.254
Now this is something very similar to what happened

30
00:01:20.254 --> 00:01:22.290
earlier on in the course.

31
00:01:22.290 --> 00:01:23.900
But the fix is different.

32
00:01:23.900 --> 00:01:25.101
So that's why I wanted to focus on it.

33
00:01:25.101 --> 00:01:28.407
So it says, it's kind of hard to read here, but it says,

34
00:01:28.407 --> 00:01:30.917
"Deprecation in navigation options.

35
00:01:30.917 --> 00:01:32.397
"Header left.

36
00:01:32.397 --> 00:01:34.327
"Some element will be removed

37
00:01:34.327 --> 00:01:35.437
"in a future version.

38
00:01:35.437 --> 00:01:36.547
"Use HeaderLeft."

39
00:01:37.390 --> 00:01:40.000
And then it actually says to pass in

40
00:01:40.000 --> 00:01:44.260
a function that results in some element

41
00:01:44.260 --> 00:01:45.830
in order to fix it.

42
00:01:45.830 --> 00:01:50.140
So that's just more of a syntax requirement,

43
00:01:50.140 --> 00:01:53.740
that React navigation is adding in.

44
00:01:53.740 --> 00:01:56.860
So let's open up our router here,

45
00:01:56.860 --> 00:01:59.240
yeah it will be in our router,

46
00:01:59.240 --> 00:02:04.240
and go up to where it says HeaderLeft.

47
00:02:04.380 --> 00:02:05.213
So this is in

48
00:02:05.213 --> 00:02:08.700
Post Detail, Navigation Options, HeaderLeft.

49
00:02:08.700 --> 00:02:10.560
We're passing null.

50
00:02:10.560 --> 00:02:12.650
But what it's actually asking for,

51
00:02:12.650 --> 00:02:16.028
is for us to pass in a anonymous function.

52
00:02:16.028 --> 00:02:17.804
So there's a couple options here.

53
00:02:17.804 --> 00:02:20.000
This is relatively new.

54
00:02:20.000 --> 00:02:22.940
This was probably one of the latest changes.

55
00:02:22.940 --> 00:02:25.522
So, I'm just gonna test out a few options here.

56
00:02:25.522 --> 00:02:27.560
It says it has to be a function.

57
00:02:27.560 --> 00:02:30.600
I'm gonna see if the function can return null.

58
00:02:30.600 --> 00:02:33.460
This is gonna be, if this was happening to me,

59
00:02:33.460 --> 00:02:35.840
which it is, this would be the first thing I would do.

60
00:02:35.840 --> 00:02:38.210
I try to go with the most basic option.

61
00:02:38.210 --> 00:02:40.870
I'm gonna switch HeaderLeft and pass in

62
00:02:40.870 --> 00:02:42.660
an anonymous function.

63
00:02:42.660 --> 00:02:45.850
And then I'm gonna see if null will fix it.

64
00:02:45.850 --> 00:02:49.790
Now this right here, this warning, is not gonna go away.

65
00:02:49.790 --> 00:02:53.690
So I'm just gonna quit out of it.

66
00:02:53.690 --> 00:02:56.589
And then I'm gonna open up the simulator again

67
00:02:56.589 --> 00:02:59.260
to see if it's triggered or not.

68
00:02:59.260 --> 00:03:02.660
So I'm also gonna open up Visual Studio code,

69
00:03:02.660 --> 00:03:04.060
'cause what our two options are,

70
00:03:04.060 --> 00:03:06.022
based on the example they gave in the warning,

71
00:03:06.022 --> 00:03:07.850
one is that it may just require a function,

72
00:03:07.850 --> 00:03:12.100
and that function could return null.

73
00:03:12.100 --> 00:03:17.100
But it may require us to return some type of component,

74
00:03:17.100 --> 00:03:19.530
in which case, what we could do is just pass in

75
00:03:19.530 --> 00:03:22.880
a view tag that doesn't have anything inside of it.

76
00:03:22.880 --> 00:03:25.210
And that would give us the exact same result.

77
00:03:25.210 --> 00:03:27.880
The end result here, just as a reminder,

78
00:03:27.880 --> 00:03:30.572
is that we do not want the detail component

79
00:03:30.572 --> 00:03:33.430
to have the little Back button up here

80
00:03:33.430 --> 00:03:34.490
on the left hand side.

81
00:03:34.490 --> 00:03:35.960
That's all we're looking to do.

82
00:03:35.960 --> 00:03:37.900
So now if I click on this,

83
00:03:37.900 --> 00:03:40.180
you can see that that worked perfectly fine.

84
00:03:40.180 --> 00:03:44.400
So, that was just a syntax that has changed

85
00:03:44.400 --> 00:03:46.210
from one version to another.

86
00:03:46.210 --> 00:03:48.340
HeaderLeft used to have the option

87
00:03:48.340 --> 00:03:49.740
where you could just pass a null.

88
00:03:49.740 --> 00:03:51.300
Now it's looking for a function.

89
00:03:51.300 --> 00:03:52.840
So those are gonna be things,

90
00:03:52.840 --> 00:03:56.980
as you go along on your development journey,

91
00:03:56.980 --> 00:03:58.890
this isn't specific to React Native,

92
00:03:58.890 --> 00:04:01.791
this is in any type of application,

93
00:04:01.791 --> 00:04:03.941
any framework, any code library.

94
00:04:03.941 --> 00:04:05.330
They're gonna have changes.

95
00:04:05.330 --> 00:04:07.027
As they add new features,

96
00:04:07.027 --> 00:04:10.620
and as they refactor their own performance,

97
00:04:10.620 --> 00:04:11.790
they're gonna have changes

98
00:04:11.790 --> 00:04:13.760
with how you can interact with them.

99
00:04:13.760 --> 00:04:16.000
And so it's very good to read the warnings,

100
00:04:16.000 --> 00:04:17.360
just like we've been doing,

101
00:04:17.360 --> 00:04:20.310
and update your code base accordingly.

102
00:04:20.310 --> 00:04:23.820
And that's gonna make sure that as you progress,

103
00:04:23.820 --> 00:04:25.370
and as you add more features,

104
00:04:25.370 --> 00:04:27.770
and as you maintain your systems,

105
00:04:27.770 --> 00:04:31.190
that when you update to newer packages of the library,

106
00:04:31.190 --> 00:04:33.420
you're entire app will not crash.

107
00:04:33.420 --> 00:04:35.643
And it's gonna be much easier to upgrade

108
00:04:35.643 --> 00:04:38.022
all of your dependencies,

109
00:04:38.022 --> 00:04:40.680
and each of the features that you've build in.

110
00:04:40.680 --> 00:04:42.008
So, hopefully that makes sense.

111
00:04:42.008 --> 00:04:45.537
And now we have fixed all of our warnings here.

112
00:04:45.537 --> 00:04:49.170
And in the next guide, we're gonna start populating

113
00:04:49.170 --> 00:04:51.703
our Post Detail screen with content.

Resources

• Source code