All right so let's talk about models.
So for this one we're going to create a new component because just putting it here it's going to be
a little bit messy.
So I'm gonna create a new file and I'm going to call this one models that J.S. actually could be model.
Sorry for that.
So model.
All right.
Of course we need to do the usual stuff.
So I'm going to copy the import if we act just like we did before.
And I'm going to leave the EU the button and text and style sheet.
So again we just need to create a class because I'm lazy.
I want to just copy this.
I'm gonna call this one model and then component and then at the bottom I'm gonna just maybe render
something so I'll render open close return we return something and we're going to return something simple
for now we're just gonna add maybe abuse we can use that view later and view and I made a mistake with
this.
Don't worry I'm gonna fix it in a second.
And it's a view and of course when we return the return some J is sex so we need to do this.
Sorry for that.
All right.
So we get a view and inside are gonna do text and I don't know.
Hello.
Of course then we too export this one so export default and Moto component and I'm gonna go and copy
these tiles and close this one and close it and close it and I'm going to comment this out for now.
All right.
So we pretty much get our model component.
All right.
So of course then we two imported at the top.
So import model say comp from DOT for Slash as our see we're going to go to model and there we go.
Now I'm going to copy this one and I'm gonna get rid of the other things image background and go here
and maybe paste it at the bottom.
So of course this project is going to go to you so you can download it and play around with this.
It's going to save it and let's see what we get.
So we're going to reload it and we get help.
That's good.
That's what we need to get.
It's gonna go and I'm gonna close this once.
I'm gonna go back to model.
So now what I want to do I went to click a button right here and show a model right.
The default model we get with with the platform.
You know what if I OS or Android.
So for this one I can I need a button that's why I'm using a button every time I click it I'm going
to swap the state to show or hide the model.
Pretty simple stuff.
You know I'm gonna go to the style I'm gonna add some inline style for now just a width of one hundred
percent.
I'm gonna go and just delete text I'm going to add just a button.
Right.
So the button we can force at a title we need to add a title and I'm gonna call it open model.
And what are we going to do.
So I'm gonna do unimpressed.
And whenever we press this I'm going to run a function called this handle model.
Of course we don't have this function we need to create it.
So the top of the render could go here and say I want to of course run a function.
OK now I'm going to bring the model right here to the top.
We're gonna use it in a minute.
So the component calls model and the handle model.
The only thing he's going to do is to change the state of the model.
So first I need to create a state with model.
You could call this whatever you want and the model starts as false.
So of course after we attach the model and we create everything we're going to check on the state if
we want to show the model or not since on the state the initial state it's false.
You know you're not going to show it.
All right.
I'm using this way.
We have new ways of doing this would react.
I'm using this one because it's pretty safe with the version we've got.
If you want to use initial prompts or initial state you can totally do it.
And this is of course assuming that your very comfortable would react.
So I'm gonna do this.
That said state I'm going to open and close and I'm gonna say model and model.
Of course we're going to do this dad state DOT model.
So if the model is of course true we're going to change it defaults and if it's false we're gonna change
it to true.
This is kind of a standard ternary operation right.
Pretty simple stuff.
If you click the button is gonna go here and say OK why does the state of model it's false.
OK.
So I'm gonna change it to two and if it's true I'm gonna change it to false.
This is pretty much what we are doing right here OK.
So now what do we need to do.
Well we need to bring the model right.
It's going to go at the bottom and they're going to bring the model open in close.
Now of course inside of the model we to at least get something.
So I'm going to create a view with some dumb component dumb content going to bring style and I'm going
to say that the margin top it's I don't know 50 you're almost done.
I know this is boring but we can do to do it and maybe a background color so we can tell the difference.
So we get a background color and inside I'm gonna say I know some text my modal content simple stuff.
All right.
So of course if the application starts nothing is going to really happen.
Right.
So we get the model content right but we know that and it's because we are not really using the state.
So this model needs to know what's going to happen when the application floats.
You know I am going to be visible at the beginning or I'm going to be heading Why am I gonna do.
Well this one you can manage this with a bicycle prop..
Let me do it.
All right visible.
There you go.
So of course this one takes a boolean right.
True false since we do have that on the state.
There's the state that model.
So this one starts at false.
If we reload the application we can it don't get it.
Now if of course we click it we're going to show the model and you know this is a model.
Now of course what the model is doing.
It's pretty much putting a pretty large container on top of the whole screen.
And that's you know how the model works.
It's just like a new screen on top of everything.
We just see the background red because we are using the blue.
Right.
The model is just by default white and you get everything that's at the top.
It's just like a new screen.
Now of course we can grab this view at a style of flex and make it kind of a full width.
And I'm going to do it because I want you to just move forward to the next thing and I want to show
you something else with this one.
Now I want to do I want to add a button right here the top of the bottom to close the model.
So this one is just going to be button.
And of course we need the title title equal to close model something like that.
And I'm doing on press and whatever we present we can pretty much do the same thing that we get a top.
Since we are going to toggle that state can open model clothes model and there we go.
Now of course this is pretty pretty simple.
Now with the model you get some properties and they are really cool.
So I'm going to go to model and these are the props you get.
So of course you get callbacks when whenever the orientation changes on the phone you get away to know
that that happened and you know maybe close to the model you get the the on request close if you know
we are closing it you get you know that and you know a lot of different properties but the one the more
most important one it's the animation type.
Let me just find it animation type and go here and the animation type gives you three ways of showing
that component you get the slide you get the fade or you know none.
Going to copy this property and I'm going to go to the model and say that now I want you know an animation
type.
So by default it takes a string right.
None slide or fade so default.
It's none.
That's why we when we you know loaded nothing really happens just like popping out so you can do slide
and then see what happens.
I can say it's like going to reloaded and if I click it we get that slide.
So you know it's a little bit better.
I would use that one if you ask me.
And then of course you get the fade.
I don't really like the fade.
I'm just gonna show you anyways it's going to reload it Let's reload it again.
Open the model and you know it's not ugly but I much prefer the SLI That's right.
That's the most important property all the other ones are just callback whenever you do on show.
You just you know do some things and say on show just like that.
Opening close and we just run a function so alert.
Just like the all the callbacks you know showing I don't know.
So I'm gonna go and reload it and open model.
And of course I'm not getting it.
So why is that so alert.
Pretty sure I did something wrong.
So.
All right.
I should be getting something so on show and then we just run the function.
So what's not working right.
Just let me just double check.
So on show it is a function and we pass the property so what is happening all right just look let me
just double check.
I'm pretty sure this is my mistake.
So let me just double check.
All right.
I'm sorry for that guys.
I'm embarrassed.
I was putting it on the button and this is you know what happens when you're talking and coding at the
same time sorry if that happens so I can save it and I'm going to reload the application open modal
and we get the alert.
You know that's called.
Yeah I was really confused why it's not working.
You know it's pretty simple so yeah.
It was my dumb mistake but it happens.
You know it's going to happen to you at one point.
OK.
So we are done with the most basic components we could get with React Native.
Now if you ask me you know are we going to use this components the whole time.
Well yeah most of the times you gonna just use this because they are the most basic ones and you can
just take this components and you could create whatever application you wash you wish and of course
we get more and more things of course to create more complex applications.
And then the next section we're going to talk about that.
Now when you use an application you create an application you're you create you're entering a different
application not your application.
You can get some kind of a navigation logic maybe you get a side draw maybe you click it and you go
to the next screen where you get the back and the title on the header or maybe a top based component
where you have the options in the tab right at the bottom of the screen and you top it and you go to
different section.
So by default you don't get this With React Native.
You don't get it right.
There's no way to do that which has to react native.
So what you can do you can install a third party library that will do this for you.
You have some options in the market and we are going to install the and use the one that React Native
suggests but where are we going to talk about all of this on the next on the next section.
So let's go to the next one and start with navigation and make sure you have time for this.
All right.