WEBVTT

00:00:00.160 --> 00:00:02.940
Hey, everyone, and welcome back
to our React Native course.

00:00:02.970 --> 00:00:08.060
Today, we have a super important topic to
discuss, which is platform-specific code.

00:00:08.080 --> 00:00:09.240
I know that you've been building

00:00:09.270 --> 00:00:13.200
the application with me for a while,
and there might have been a time when you

00:00:13.230 --> 00:00:18.020
noticed differences between the design
elements on iOS and Android.

00:00:18.040 --> 00:00:20.240
Especially if you're running on Windows

00:00:20.240 --> 00:00:22.720
operating system,
this might have been something visible

00:00:22.740 --> 00:00:27.420
to you on one of the component
lessons in this course.

00:00:27.440 --> 00:00:29.700
Specifically, I'm talking
about the switch components.

00:00:29.730 --> 00:00:31.880
Today, we're going to use this component

00:00:31.900 --> 00:00:37.580
to display how different elements
might look on iOS and Android.

00:00:37.610 --> 00:00:40.220
I would like to say that this
is completely normal.

00:00:40.250 --> 00:00:41.980
Ios and Android

00:00:42.010 --> 00:00:45.720
have different design guidelines,
and it's crucial to respect those

00:00:45.750 --> 00:00:49.980
differences to provide the best
user experience on both platforms.

00:00:50.010 --> 00:00:55.000
What I want to show you is how different
switch component looks on Android and iOS.

00:00:55.030 --> 00:00:58.980
This is why I have both
of the simulators opened.

00:00:59.010 --> 00:01:02.120
This is something that Mac OS
users can definitely do.

00:01:02.150 --> 00:01:04.340
You can open up both of their simulators.

00:01:04.370 --> 00:01:07.820
For Windows users, I'm so sorry,
but this is not possible.

00:01:07.850 --> 00:01:09.050
But that's okay though.

00:01:09.080 --> 00:01:10.640
The main idea here is to understand

00:01:10.670 --> 00:01:15.440
that some components might look
different on iOS and Android device.

00:01:15.470 --> 00:01:19.900
I will teach you how to handle
that if you wish to.

00:01:19.930 --> 00:01:22.240
Now, let's import the switch component

00:01:22.270 --> 00:01:26.140
right here and then let's try to use
it somewhere at a visible place.

00:01:26.170 --> 00:01:33.340
For example, we could place our switch
component right here and let's use a view

00:01:33.370 --> 00:01:38.780
component here and place our switch
component right inside here.

00:01:38.800 --> 00:01:40.980
There might be some stylings
that we might need.

00:01:41.010 --> 00:01:44.560
Yes, as you see for Android,
this is visible right here.

00:01:44.590 --> 00:01:47.920
So let's make sure that for styling,

00:01:47.950 --> 00:01:52.570
here we write up something that would
show this component at the same place.

00:01:52.600 --> 00:01:56.210
Let's use flex one and let's use flex
direction row,

00:01:56.240 --> 00:02:00.900
and let's make sure that justified
content is set to the flex start.

00:02:00.930 --> 00:02:05.820
So both of these appear at the left
side of the simulator.

00:02:05.850 --> 00:02:08.520
Even if you take one glance at this item

00:02:08.550 --> 00:02:13.610
on Android versus iOS, you're
already going to see the difference.

00:02:13.640 --> 00:02:15.120
But there is more.

00:02:15.150 --> 00:02:17.640
I would like to turn on this switch

00:02:17.670 --> 00:02:21.340
component for which we
might actually need useState.

00:02:21.370 --> 00:02:24.480
Let's just quickly create it
for the sake of this example.

00:02:24.510 --> 00:02:29.820
I'm going to use
isOn right here and setIsOn.

00:02:29.850 --> 00:02:32.860
I'm going to say that
initially this is false.

00:02:32.890 --> 00:02:37.000
Then I'm going to use it on this switch
component and I'm going to say that its

00:02:37.030 --> 00:02:42.220
value initially is whatever
the value of isOn was.

00:02:42.250 --> 00:02:46.020
Then on value change,
I will grab this value and

00:02:46.050 --> 00:02:52.480
I will make sure that this new value is
inputted in the isOn variable.

00:02:52.510 --> 00:02:54.780
Let's pass this value right here.

00:02:54.810 --> 00:02:59.680
Now if I were to turn this on,
you would see how it looks on Android.

00:02:59.710 --> 00:03:01.680
If I were to turn it on on iOS,

00:03:01.710 --> 00:03:05.380
you're going to see that it
looks a little bit different.

00:03:05.410 --> 00:03:07.760
This is completely fine since Android

00:03:07.790 --> 00:03:11.660
users are already used to seeing switch
components that look like this,

00:03:11.690 --> 00:03:16.820
and iOS users might be used to looking
at switch components that look like this.

00:03:16.850 --> 00:03:19.180
Now, for example, if you wanted to make

00:03:19.210 --> 00:03:25.580
sure that switch component is not so small
on Android and you want it to be as big as

00:03:25.610 --> 00:03:28.480
it is on iOS, we can see
the difference here.

00:03:28.510 --> 00:03:31.420
This is way smaller than iOS.

00:03:31.450 --> 00:03:36.860
What you could do is use the platform
module that React Native offers.

00:03:36.890 --> 00:03:43.780
Here inside of the React Native Imports,
we're going to import platform.

00:03:43.810 --> 00:03:49.380
Just for fun, let's look inside of it
and see what information it contains.

00:03:49.410 --> 00:03:53.610
Let's console log this
and use our Metro Bundler.

00:03:53.640 --> 00:03:55.720
Here you're going to see that a bunch

00:03:55.750 --> 00:03:58.000
of items have been outputted
from me already.

00:03:58.030 --> 00:04:02.340
This is because I'm running
on two different devices.

00:04:02.370 --> 00:04:09.120
There is this OS property that says
that this is iOS, and here it says Android

00:04:09.150 --> 00:04:12.820
for Android, and it has some information
about the version,

00:04:12.850 --> 00:04:16.400
probably the version of the operating
system that we're running here.

00:04:16.420 --> 00:04:22.120
There is some other items that this also
contains that is not really important

00:04:22.150 --> 00:04:26.540
right now because we're not going
to delve too deep into this topic.

00:04:26.570 --> 00:04:30.680
I just want to show you how
to handle mere design differences.

00:04:30.710 --> 00:04:33.080
But if you ever need to use

00:04:33.080 --> 00:04:36.980
platform-specific code and you're looking
for more information about the device,

00:04:37.010 --> 00:04:39.900
this is something that you
can definitely use.

00:04:39.920 --> 00:04:40.300
Great.

00:04:40.330 --> 00:04:45.340
Now let's say that we want to make
this bigger only on Android.

00:04:45.360 --> 00:04:47.060
For switch components, actually

00:04:47.090 --> 00:04:50.640
styling and making sure that this looks
a little bit bigger,

00:04:50.660 --> 00:04:55.260
it is handled a little differently
than what you might expect.

00:04:55.280 --> 00:04:58.460
We have no width and height
properties here.

00:04:58.480 --> 00:05:03.260
What we can do is tad is make
sure that we have a style.

00:05:03.280 --> 00:05:06.180
For example, we use this platform OS

00:05:06.210 --> 00:05:11.760
property and we check, okay,
if this Android, can you add a new style

00:05:11.780 --> 00:05:18.540
and make sure that this style is created
to make this switch component bigger?

00:05:18.570 --> 00:05:20.660
We definitely can.

00:05:20.690 --> 00:05:24.860
Specifically for switch component,
you would use something called transform.

00:05:24.890 --> 00:05:28.320
This transform takes in an array and it's

00:05:28.350 --> 00:05:33.100
going to take in the axis
that you're trying to scale first.

00:05:33.130 --> 00:05:38.160
Let's say that we're scaling X-axis,
it will have X-axis and it will have

00:05:38.190 --> 00:05:41.360
Y-axis, and X-axis is
going to be horizontal.

00:05:41.390 --> 00:05:43.980
Let's say that we set this to one.

00:05:44.000 --> 00:05:46.200
If we do this,
you're going to see that nothing's going

00:05:46.230 --> 00:05:50.300
to change because by default,
its value is already one.

00:05:50.330 --> 00:05:55.420
If we want to make it bigger, then we have
to say something like 1.5, let's say.

00:05:55.450 --> 00:05:59.580
Now you're going to see that this
is stretched horizontally.

00:05:59.600 --> 00:06:03.420
If you want to do the same on the Y-axis,

00:06:03.450 --> 00:06:06.560
which means vertically,
what you would have to do is create

00:06:06.590 --> 00:06:12.940
another object in this array and say
that scale Y should be 1.5 as well.

00:06:12.970 --> 00:06:15.040
Now you see that this is a little bit

00:06:15.070 --> 00:06:19.300
bigger and is something similar
to what's given on iOS.

00:06:19.330 --> 00:06:26.860
Moreover, you could also use something
like track color here and say that

00:06:26.890 --> 00:06:36.880
for specifically Android platform, you
can write a new object here and say

00:06:36.910 --> 00:06:42.540
that if the switch component is off,
which means that if it is false,

00:06:42.570 --> 00:06:47.020
then maybe you want
the track color to be gray.

00:06:47.040 --> 00:06:54.160
If it is on, which would mean true,
then maybe you want it to be red,

00:06:54.190 --> 00:06:57.020
let's say, because this is
going to be easily visible.

00:06:57.040 --> 00:07:00.940
Let's save this and you see
the track color here is red.

00:07:00.970 --> 00:07:05.320
If I turn this off,
it will be gray and the track color will

00:07:05.350 --> 00:07:08.640
have a different gray if I
were to comment this out.

00:07:08.670 --> 00:07:10.620
You can watch that happen right here.

00:07:10.650 --> 00:07:12.160
It will be a lighter gray.

00:07:12.190 --> 00:07:17.020
This is something that can definitely
be used for switch component.

00:07:17.040 --> 00:07:21.420
But unfortunately, track color
cannot be defined for iOS.

00:07:21.450 --> 00:07:24.540
You have to use iOS background color

00:07:24.570 --> 00:07:27.640
instead, which means that it
will definitely only target IOS.

00:07:27.670 --> 00:07:29.880
We can do that right here,

00:07:29.910 --> 00:07:38.280
IOS background color, and we can say,
for example, that it is of color black.

00:07:38.600 --> 00:07:41.160
If we do this, you're going to see that if

00:07:41.190 --> 00:07:44.740
this is off, it's going
to have a black color.

00:07:44.770 --> 00:07:47.100
If you're more interested into this topic,

00:07:47.130 --> 00:07:53.200
I have linked the platform documentation
of React Native to this video inside

00:07:53.230 --> 00:07:56.020
the resources folder,
so you can always look there.

00:07:56.040 --> 00:07:58.460
I will also link the Switch Component

00:07:58.480 --> 00:08:02.480
documentation so that you can
look a little bit more into this.

00:08:02.510 --> 00:08:05.200
But for now, what I wanted to do is just

00:08:05.230 --> 00:08:11.260
show you that on two different platforms,
your similar code might look different

00:08:11.290 --> 00:08:16.300
because this is just normal user
experience for different platforms.

00:08:16.330 --> 00:08:19.600
I hope that you can use this for building

00:08:19.630 --> 00:08:27.460
very cool user experiences for any
platform, whether it is iOS or Android.

00:08:27.480 --> 00:08:30.560
Now you know how to use platform module

00:08:30.590 --> 00:08:35.280
to determine what platform
is your device using and what changes you

00:08:35.310 --> 00:08:37.740
might need to make
for that specific device.

00:08:37.760 --> 00:08:40.560
Thank you so much for watching
and I'll see you in the next video.