So we had a detailed look at dimensions, orientations and rendering different styles and layout based
on the available width and height and also how to react to changes on width and height when you rotate
the device for example, very important stuff.
Let's now have a look at how you can actually render different styles or layouts or whatever you want
based on the platform you're running on.
Right now we have basically an identical app on both iOS and Android with one exception and that's our
button here.
The buttons look different because the button component which we're using is a component baked into
React Native and it's one of the very rare, actually the only component React Native offers that automatically
adjusts based on the platform your app is running on,
no other component really does that but of course, you can write code to adjust your styles, layout logic,
whatever you want based on the platform you're running on. To see an example,
let's go to our header component and there,
let's work on the way we present this header. On Android
we might have this background color and then text in front of it, on iOS
we might want to have a white background color and only have a thin border at the bottom and instead
have the text in our primary color,
that would be a more typical iOS look after all.
Now to find out on which platform you're running, React Native has you covered, it has the platform object
where dimensions helps you find out the dimensions of the device you're running on, platform helps you find
out the platform of the device you're running on.
So now here in the styles you were creating,
we could render a different background colour based on that.
We can use platform and now there, you have a couple of properties you can use and
for example you have the OS property and OS is basically the operating system and it's one of the values
you're seeing here,
most importantly iOS or Android.
So here we can check if that is equal to let's say Android and in this case, I set my background color
to colours primary
but if it's not Android and therefore if it's iOS, I set this to let's say white.
Now if we do that and we save this, we see a white header here on the iOS device and a colored header
on the Android device.
Now of course you don't need to set up any listener on platform and it also doesn't offer such a functionality
because the platform can't change whilst the app is running, it's the same operating system all the
time of course.
Now let's finish the styling for iOS.
I said I want to have a thin border at the bottom, so we can add a border bottom color and check the
platform and if the operating system there is equal to iOS, then I want to set the border bottom color
to let's say this grayish color, otherwise I'll send it to white or to transparent actually so that
we can't see it on Android and add a border bottom with of let's say and there we also make that check
for iOS of let's say one pixel on iOS and zero on Android.
So now we shouldn't see anything on Android but we have that thin border here on iOS.
Last but not least, let's color the text by going to the title text here and title text does indeed
merge in any styles we set on the style prop,
so here on title text, we can add a style prop and point at styles.title
here or whatever you want to name it and add such a title style object here in our stylesheet
where we set the color which is the text color also based on the platform.
If that is iOS, let's say we set this to colors.primary and otherwise, let's set it to white, it was
black before,
let's now set it to white.
Now we have a white title here on Android but a colored title here on iOS and this is how easy you can
set different styles based on the platform you're running on
as you can see.