I.
I'm not going to go through all the different components that are available in React Native.
In this tutorial because that would be a huge tutorial itself.
So we want to have it very compressed and easy to digest.
But if you go to the React Native here to the API, you will have a list of components that are available
for you to use and we use a few of them, but you will have a full reference of the things that are
available straight away.
So we have a buttons, we have images, we have flatlist.
This is what we already talked about, but we have other things like a picker, for example, and you
have a snippets how you can use it.
We have, for example, modal and things like that.
So if you need to do something like this, then go to the API and you will find a probably something
already done.
So we don't need to do it by yourself.
So a thing that that will be a very good reference for you.
The last thing I would like to show you before we will jump into creating our own modal is actually
a platform specific code so we can run this on different platforms and actually we can specify what
needs to be done or how it is need to be displayed based on the condition on what platform we are running
that on.
So let me kind of clean up a little bit here because it started to be very messy.
So what do we have here is we have that.
Apple here.
Maybe I can actually make it even more simple.
I can do a simple text and we can have it here.
Our text.
And it is actually up here.
So what I can do is I can do
line item center
and justify content will do with center as well.
So there is our text here.
So we kind of get back to a very basic setup and I can remove this.
So what we will what we can actually do is we can specify a different things for different operating
systems.
So what I will do is I will import a platform here and that platform will contain all the information
about the platform we are running that on.
So for example, if we would like to have this background color white only when its OS.
So what I can do is I can do platform that OS and you can see here it will be either iOS or Android,
so I can do OS.
Equal to iOS.
Then do this.
Otherwise I'm writing here a ternary operator.
So otherwise I can do, let's say green.
So 00FF00.
So we can see here.
I'm checking if that's operating system is iOS.
Then do white.
Otherwise do green.
And this is not iOS.
This is Android.
So if I will do Android.
You can see on Android I have white.
So to demonstrate it, that is working fine.
I can actually run this simulator.
So I will run the simulator and I will have the same application display on both different on different
simulators.
And you can see they are actually different on each of this operating system.
And as you can see here, the same application running on two different devices will have two different
styles because we specify if you have operating system of iOS, then apply green, otherwise it will
be white.
So this is how you can actually manage and you don't need to limit yourself into the styles.
You can use it anywhere here.
So if you would like to have a different text here, we can also do it based on the platform.
So we can say here, I can do curly brackets here and then I can do similar thing as I've done here.
So we do a operator, ternary operator, and then we will do I am on Android or otherwise.
Otherwise I will do.
I am on iPhone.
So I'm saving this.
And you can see I'm on iPhone and I'm on Android here.
Based on the platform OS, you can decide what will be the content, what will be the different outputs
there.
Another option, what you could do is I will change this to I'm on Android, simple like that.
So it will be one style and it will be it will have both the same thing.
But what you can do is actually you can inject iOS or Android inside the files.
So what I will do is I will rename this and I will do home dot android dot JS, and then I will duplicate
this and paste it again.
So instead of copy, the second one will be.
iOS.
So we have two components.
One will be iOS, another one will be Android.
So I'm inside the home iOS here and this is home Android here.
So I'm an android in there and I can do I am on iOS.
I think this will need to have some kind of rewrite.
We'll need to go to Objs and then we load the home from the component and that home will be loaded from
this home based on the operating system we have.
So if I will save, I think I will need to stop my server.
So I'll go terminal.
I can do control C and then I will run it again.
Okay.
Let me try to do it on the simulator.
And we need to build a new JavaScript.
And you can see here I'm on iOS.
So this is working because we have that inside home iOS.
I'm on iOS, Inside Home, Android, I'm on Android, so it will be different.
So I am I will need to restart this thing to happen.
Whatever you change the name of the files, you need to stop and start your application.
So we'll need to go to emulator and then I will kill this application.
So clear all and then I need to go and build a new one.
So
coming back here.
You can see I'm on iOS and I'm on Android and the way we actually load this one, it's the same from
the App.js.
So we import home component from components home, but inside we have home android or home iOS and React
Native automatically detects our operating system and it will pick the correct file for us.
So we can have two different components.
We have a simple we've changed the simple text here, but the entire component can be different for
both platforms.
So this is the way you can actually distinguish in between two platforms if you need to, you can keep
both of the platforms the same, but if you need to do something different, then that will be the way
to do it.