1
00:00:02,200 --> 00:00:07,450
Now that you had a thorough introduction to how you generally work with React Native and build React

2
00:00:07,480 --> 00:00:09,120
Native applications,

3
00:00:09,170 --> 00:00:10,000
it's of course

4
00:00:10,090 --> 00:00:17,350
time to dig a bit deeper and also learn how we can build applications that look great on both platforms,

5
00:00:17,350 --> 00:00:22,510
on both iOS and Android and that maybe also have kind of the default look you would expect there

6
00:00:22,960 --> 00:00:29,690
and of course, that also look great on different devices, different device sizes.

7
00:00:29,740 --> 00:00:36,220
That's what's called responsive design, your app should be designed such that it automatically looks

8
00:00:36,220 --> 00:00:42,400
great on all possible device sizes and therefore in this module, you will learn all about the tools you

9
00:00:42,400 --> 00:00:44,490
need for that. Specifically

10
00:00:44,800 --> 00:00:49,320
we'll have a look at how you can find out how big the device is on which you're running,

11
00:00:49,330 --> 00:00:55,180
so how broad it is, how much width you have, how much height you have and maybe which orientation it has

12
00:00:55,210 --> 00:01:01,270
because maybe you also want to present a different layout for different orientations, for portrait mode

13
00:01:01,270 --> 00:01:06,130
and for landscape mode and therefore we'll also have a look at how you can adjust your styles and your

14
00:01:06,130 --> 00:01:11,500
layouts based on the size and orientation because there are a couple of different tools you get by React

15
00:01:11,500 --> 00:01:11,890
Native.

16
00:01:12,700 --> 00:01:15,220
Now the sizes are one thing,

17
00:01:15,250 --> 00:01:20,670
the other obvious thing which you might want to cover is the platform you're running on.

18
00:01:20,680 --> 00:01:26,170
You're building an app that you typically want to distribute to both iOS and Android because that is

19
00:01:26,170 --> 00:01:27,880
the cool thing with React Native,

20
00:01:27,880 --> 00:01:34,120
you use Javascript to get an app for multiple platforms and still sometimes you need to adjust your

21
00:01:34,120 --> 00:01:40,870
styling or your layout or maybe even some business logic based on the platform you're running on.

22
00:01:40,900 --> 00:01:47,140
So you want to have a certain layout or a certain color on iOS and you might have a different color

23
00:01:47,140 --> 00:01:48,280
on Android,

24
00:01:48,280 --> 00:01:54,130
in this module, you'll learn how you can adjust your code or your user interface in general based on

25
00:01:54,130 --> 00:01:54,880
the platform.

26
00:01:54,880 --> 00:02:00,190
So these are the big topics we'll dive in in this module and for this, I'm back on the app

27
00:02:00,200 --> 00:02:03,620
we worked on, this is the app we saw there,

28
00:02:03,680 --> 00:02:10,550
this basic quiz we worked on and I want to now step-by-step make sure that this looks good on different

29
00:02:10,550 --> 00:02:16,130
device sizes, that we maybe also learn how we can switch around the layout based on the space we have

30
00:02:16,130 --> 00:02:22,610
available and I of course also want to make sure that we maybe also have some different looks based on

31
00:02:22,640 --> 00:02:24,200
the platform we're running on.