- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.770 --> 00:00:03.140
We're just about done with our application
2
00:00:03.140 --> 00:00:05.230
In this guide I want to just integrate
3
00:00:05.230 --> 00:00:08.320
a few final UI refinements.
4
00:00:08.320 --> 00:00:12.200
So let's start with our account screen.
5
00:00:12.200 --> 00:00:13.340
So it's pretty basic,
6
00:00:13.340 --> 00:00:16.140
we don't really give the ability to update things
7
00:00:16.140 --> 00:00:18.320
like email addresses or anything like that.
8
00:00:18.320 --> 00:00:20.920
This is just where you'd sign out in the application.
9
00:00:20.920 --> 00:00:23.710
And I'd like to get rid of the text here
10
00:00:23.710 --> 00:00:25.010
that says AccountScreen,
11
00:00:25.010 --> 00:00:28.670
and put a border or some padding
12
00:00:28.670 --> 00:00:30.760
around our Sign Out button.
13
00:00:30.760 --> 00:00:33.190
So I'm gonna close all these out
14
00:00:33.190 --> 00:00:35.580
and open up our AccountScreen,
15
00:00:35.580 --> 00:00:36.970
and that's where we can do it.
16
00:00:36.970 --> 00:00:39.522
I can get rid of this text tag here.
17
00:00:39.522 --> 00:00:43.400
And then instead of marginTop for the view,
18
00:00:43.400 --> 00:00:47.080
and I can also actually get rid of these extra view tags.
19
00:00:47.080 --> 00:00:51.927
I'm just gonna switch this and say padding: 15,
20
00:00:51.927 --> 00:00:54.900
just so it matches everything else in our app.
21
00:00:54.900 --> 00:00:55.990
And that looks good.
22
00:00:55.990 --> 00:00:56.823
For some,
23
00:00:56.823 --> 00:00:59.170
for a screen that only does one thing,
24
00:00:59.170 --> 00:01:00.810
I think that looks pretty good.
25
00:01:00.810 --> 00:01:03.040
So let's see if there's anything else to delete.
26
00:01:03.040 --> 00:01:05.993
And yes, we can get rid of this text component up here.
27
00:01:07.360 --> 00:01:10.000
Hit Save and that's it.
28
00:01:10.000 --> 00:01:12.210
Okay, last thing we're gonna implement,
29
00:01:12.210 --> 00:01:13.720
I'm gonna click Sign Out.
30
00:01:13.720 --> 00:01:17.690
You notice here at the very top how our,
31
00:01:17.690 --> 00:01:19.880
where it says carrier and our battery,
32
00:01:19.880 --> 00:01:21.290
see where this is white?
33
00:01:21.290 --> 00:01:25.140
You may think that our status bar component
34
00:01:25.140 --> 00:01:27.400
isn't actually working but it is.
35
00:01:27.400 --> 00:01:30.350
This is an issue related to our styles,
36
00:01:30.350 --> 00:01:34.780
so let's open up our off screen styles.
37
00:01:34.780 --> 00:01:36.960
And do you notice here how I put
38
00:01:36.960 --> 00:01:40.290
marginTop: Constants.statusBarHeight?
39
00:01:40.290 --> 00:01:45.190
Well, if I change that from margin to paddingTop,
40
00:01:46.150 --> 00:01:47.770
you'll see that that gets fixed.
41
00:01:47.770 --> 00:01:49.090
So what was happening,
42
00:01:49.090 --> 00:01:52.210
the difference between margin and padding
43
00:01:52.210 --> 00:01:54.870
is that margin adds space,
44
00:01:54.870 --> 00:01:57.850
where padding simply adds space inside.
45
00:01:57.850 --> 00:02:00.660
So margin is going to add space outside,
46
00:02:00.660 --> 00:02:04.290
which is the reason why the StatusBarHeight
47
00:02:04.290 --> 00:02:05.950
was actually being pushed down,
48
00:02:05.950 --> 00:02:07.550
that's why it was white.
49
00:02:07.550 --> 00:02:10.710
And what we just did is we said no,
50
00:02:10.710 --> 00:02:13.630
it's simply the padding that we wanna have
51
00:02:13.630 --> 00:02:17.370
that extra space on and that's exactly what fixed it.
52
00:02:17.370 --> 00:02:18.740
So, that is it.
53
00:02:18.740 --> 00:02:21.130
Great job if you went through that course.
54
00:02:21.130 --> 00:02:23.360
That was a lot to learn.
55
00:02:23.360 --> 00:02:26.730
You learned everything from how to generate
56
00:02:26.730 --> 00:02:29.970
a React Native application with Expo,
57
00:02:29.970 --> 00:02:32.470
through how you can create forms,
58
00:02:32.470 --> 00:02:35.740
how you can work with routing, navigation,
59
00:02:35.740 --> 00:02:40.740
authentication, how you can create and send images
60
00:02:40.760 --> 00:02:42.500
up to an API,
61
00:02:42.500 --> 00:02:45.910
how you can retrieve records from a database,
62
00:02:45.910 --> 00:02:48.580
how you can work with the permissions
63
00:02:48.580 --> 00:02:51.560
inside of the device itself, such as being able
64
00:02:51.560 --> 00:02:55.700
to get the ability to access the camera roll.
65
00:02:55.700 --> 00:02:58.210
You've been able to navigate the user
66
00:02:58.210 --> 00:03:01.260
from one screen to another while passing data
67
00:03:01.260 --> 00:03:02.670
between the screens.
68
00:03:02.670 --> 00:03:05.980
And you learned quite a bit about how to
69
00:03:05.980 --> 00:03:09.210
refactor the application along the way.
70
00:03:09.210 --> 00:03:12.520
So as we're building, we continually look back
71
00:03:12.520 --> 00:03:14.820
to see how we could refine our code,
72
00:03:14.820 --> 00:03:16.980
to really match with best practices.
73
00:03:16.980 --> 00:03:19.620
And that's something that's not specific to React Native,
74
00:03:19.620 --> 00:03:21.080
that's something that you want to do
75
00:03:21.080 --> 00:03:24.810
in every type of application that you're working with.
76
00:03:24.810 --> 00:03:28.060
So excellent job in going through that, congratulations.
77
00:03:28.060 --> 00:03:31.393
And I wish you the best of luck on your development journey.