1
00:00:02,230 --> 00:00:08,380
So we had a detailed look at dimensions, orientations and rendering different styles and layout based

2
00:00:08,380 --> 00:00:14,030
on the available width and height and also how to react to changes on width and height when you rotate

3
00:00:14,080 --> 00:00:17,010
the device for example, very important stuff.

4
00:00:17,680 --> 00:00:22,900
Let's now have a look at how you can actually render different styles or layouts or whatever you want

5
00:00:23,080 --> 00:00:25,660
based on the platform you're running on.

6
00:00:25,660 --> 00:00:31,120
Right now we have basically an identical app on both iOS and Android with one exception and that's our

7
00:00:31,120 --> 00:00:32,240
button here.

8
00:00:32,320 --> 00:00:38,320
The buttons look different because the button component which we're using is a component baked into

9
00:00:38,320 --> 00:00:46,060
React Native and it's one of the very rare, actually the only component React Native offers that automatically

10
00:00:46,060 --> 00:00:49,310
adjusts based on the platform your app is running on,

11
00:00:49,390 --> 00:00:56,290
no other component really does that but of course, you can write code to adjust your styles, layout logic,

12
00:00:56,320 --> 00:01:01,000
whatever you want based on the platform you're running on. To see an example,

13
00:01:01,000 --> 00:01:04,170
let's go to our header component and there,

14
00:01:04,180 --> 00:01:08,020
let's work on the way we present this header. On Android

15
00:01:08,020 --> 00:01:12,810
we might have this background color and then text in front of it, on iOS

16
00:01:12,820 --> 00:01:19,240
we might want to have a white background color and only have a thin border at the bottom and instead

17
00:01:19,240 --> 00:01:21,750
have the text in our primary color,

18
00:01:21,760 --> 00:01:25,270
that would be a more typical iOS look after all.

19
00:01:25,360 --> 00:01:31,810
Now to find out on which platform you're running, React Native has you covered, it has the platform object

20
00:01:32,110 --> 00:01:37,630
where dimensions helps you find out the dimensions of the device you're running on, platform helps you find

21
00:01:37,630 --> 00:01:41,750
out the platform of the device you're running on.

22
00:01:41,910 --> 00:01:45,270
So now here in the styles you were creating,

23
00:01:45,270 --> 00:01:48,660
we could render a different background colour based on that.

24
00:01:48,810 --> 00:01:53,310
We can use platform and now there, you have a couple of properties you can use and

25
00:01:53,310 --> 00:02:01,170
for example you have the OS property and OS is basically the operating system and it's one of the values

26
00:02:01,170 --> 00:02:02,220
you're seeing here,

27
00:02:02,220 --> 00:02:05,670
most importantly iOS or Android.

28
00:02:05,700 --> 00:02:12,000
So here we can check if that is equal to let's say Android and in this case, I set my background color

29
00:02:12,000 --> 00:02:13,570
to colours primary

30
00:02:13,770 --> 00:02:20,130
but if it's not Android and therefore if it's iOS, I set this to let's say white.

31
00:02:20,130 --> 00:02:28,800
Now if we do that and we save this, we see a white header here on the iOS device and a colored header

32
00:02:28,980 --> 00:02:31,090
on the Android device.

33
00:02:31,260 --> 00:02:36,960
Now of course you don't need to set up any listener on platform and it also doesn't offer such a functionality

34
00:02:37,140 --> 00:02:42,090
because the platform can't change whilst the app is running, it's the same operating system all the

35
00:02:42,090 --> 00:02:43,800
time of course.

36
00:02:43,830 --> 00:02:46,240
Now let's finish the styling for iOS.

37
00:02:46,650 --> 00:02:53,340
I said I want to have a thin border at the bottom, so we can add a border bottom color and check the

38
00:02:53,340 --> 00:03:01,410
platform and if the operating system there is equal to iOS, then I want to set the border bottom color

39
00:03:01,410 --> 00:03:07,950
to let's say this grayish color, otherwise I'll send it to white or to transparent actually so that

40
00:03:07,980 --> 00:03:16,350
we can't see it on Android and add a border bottom with of let's say and there we also make that check

41
00:03:16,770 --> 00:03:25,590
for iOS of let's say one pixel on iOS and zero on Android.

42
00:03:25,590 --> 00:03:31,410
So now we shouldn't see anything on Android but we have that thin border here on iOS.

43
00:03:31,530 --> 00:03:39,530
Last but not least, let's color the text by going to the title text here and title text does indeed

44
00:03:39,590 --> 00:03:42,400
merge in any styles we set on the style prop,

45
00:03:42,770 --> 00:03:48,950
so here on title text, we can add a style prop and point at styles.title

46
00:03:48,960 --> 00:03:55,440
here or whatever you want to name it and add such a title style object here in our stylesheet

47
00:03:55,860 --> 00:04:01,380
where we set the color which is the text color also based on the platform.

48
00:04:01,770 --> 00:04:08,970
If that is iOS, let's say we set this to colors.primary and otherwise, let's set it to white, it was

49
00:04:08,970 --> 00:04:09,830
black before,

50
00:04:09,840 --> 00:04:11,700
let's now set it to white.

51
00:04:11,700 --> 00:04:18,990
Now we have a white title here on Android but a colored title here on iOS and this is how easy you can

52
00:04:18,990 --> 00:04:22,600
set different styles based on the platform you're running on

53
00:04:22,620 --> 00:04:23,400
as you can see.