Hey, everyone, and welcome back to our React Native course.
Today, we have a super important topic to discuss, which is platform-specific code.
I know that you've been building
the application with me for a while, and there might have been a time when you
noticed differences between the design elements on iOS and Android.
Especially if you're running on Windows
operating system, this might have been something visible
to you on one of the component lessons in this course.
Specifically, I'm talking about the switch components.
Today, we're going to use this component
to display how different elements might look on iOS and Android.
I would like to say that this is completely normal.
Ios and Android
have different design guidelines, and it's crucial to respect those
differences to provide the best user experience on both platforms.
What I want to show you is how different switch component looks on Android and iOS.
This is why I have both of the simulators opened.
This is something that Mac OS users can definitely do.
You can open up both of their simulators.
For Windows users, I'm so sorry, but this is not possible.
But that's okay though.
The main idea here is to understand
that some components might look different on iOS and Android device.
I will teach you how to handle that if you wish to.
Now, let's import the switch component
right here and then let's try to use it somewhere at a visible place.
For example, we could place our switch component right here and let's use a view
component here and place our switch component right inside here.
There might be some stylings that we might need.
Yes, as you see for Android, this is visible right here.
So let's make sure that for styling,
here we write up something that would show this component at the same place.
Let's use flex one and let's use flex direction row,
and let's make sure that justified content is set to the flex start.
So both of these appear at the left side of the simulator.
Even if you take one glance at this item
on Android versus iOS, you're already going to see the difference.
But there is more.
I would like to turn on this switch
component for which we might actually need useState.
Let's just quickly create it for the sake of this example.
I'm going to use isOn right here and setIsOn.
I'm going to say that initially this is false.
Then I'm going to use it on this switch component and I'm going to say that its
value initially is whatever the value of isOn was.
Then on value change, I will grab this value and
I will make sure that this new value is inputted in the isOn variable.
Let's pass this value right here.
Now if I were to turn this on, you would see how it looks on Android.
If I were to turn it on on iOS,
you're going to see that it looks a little bit different.
This is completely fine since Android
users are already used to seeing switch components that look like this,
and iOS users might be used to looking at switch components that look like this.
Now, for example, if you wanted to make
sure that switch component is not so small on Android and you want it to be as big as
it is on iOS, we can see the difference here.
This is way smaller than iOS.
What you could do is use the platform module that React Native offers.
Here inside of the React Native Imports, we're going to import platform.
Just for fun, let's look inside of it and see what information it contains.
Let's console log this and use our Metro Bundler.
Here you're going to see that a bunch
of items have been outputted from me already.
This is because I'm running on two different devices.
There is this OS property that says that this is iOS, and here it says Android
for Android, and it has some information about the version,
probably the version of the operating system that we're running here.
There is some other items that this also contains that is not really important
right now because we're not going to delve too deep into this topic.
I just want to show you how to handle mere design differences.
But if you ever need to use
platform-specific code and you're looking for more information about the device,
this is something that you can definitely use.
Great.
Now let's say that we want to make this bigger only on Android.
For switch components, actually
styling and making sure that this looks a little bit bigger,
it is handled a little differently than what you might expect.
We have no width and height properties here.
What we can do is tad is make sure that we have a style.
For example, we use this platform OS
property and we check, okay, if this Android, can you add a new style
and make sure that this style is created to make this switch component bigger?
We definitely can.
Specifically for switch component, you would use something called transform.
This transform takes in an array and it's
going to take in the axis that you're trying to scale first.
Let's say that we're scaling X-axis, it will have X-axis and it will have
Y-axis, and X-axis is going to be horizontal.
Let's say that we set this to one.
If we do this, you're going to see that nothing's going
to change because by default, its value is already one.
If we want to make it bigger, then we have to say something like 1.5, let's say.
Now you're going to see that this is stretched horizontally.
If you want to do the same on the Y-axis,
which means vertically, what you would have to do is create
another object in this array and say that scale Y should be 1.5 as well.
Now you see that this is a little bit
bigger and is something similar to what's given on iOS.
Moreover, you could also use something like track color here and say that
for specifically Android platform, you can write a new object here and say
that if the switch component is off, which means that if it is false,
then maybe you want the track color to be gray.
If it is on, which would mean true, then maybe you want it to be red,
let's say, because this is going to be easily visible.
Let's save this and you see the track color here is red.
If I turn this off, it will be gray and the track color will
have a different gray if I were to comment this out.
You can watch that happen right here.
It will be a lighter gray.
This is something that can definitely be used for switch component.
But unfortunately, track color cannot be defined for iOS.
You have to use iOS background color
instead, which means that it will definitely only target IOS.
We can do that right here,
IOS background color, and we can say, for example, that it is of color black.
If we do this, you're going to see that if
this is off, it's going to have a black color.
If you're more interested into this topic,
I have linked the platform documentation of React Native to this video inside
the resources folder, so you can always look there.
I will also link the Switch Component
documentation so that you can look a little bit more into this.
But for now, what I wanted to do is just
show you that on two different platforms, your similar code might look different
because this is just normal user experience for different platforms.
I hope that you can use this for building
very cool user experiences for any platform, whether it is iOS or Android.
Now you know how to use platform module
to determine what platform is your device using and what changes you
might need to make for that specific device.
Thank you so much for watching and I'll see you in the next video.