Now that we get these basics out of the way and before we dive way deeper into React Native and also
how we can style our apps in a little bit of a more beautiful way because obviously our styling here
definitely still has some upside potential to put it like this,
before we dive all of that, let me show you another exciting component that's built into React Native
and that also shows how easily you can add cool features to React Native apps
and that's the modal component.
You find it of course in the official docs in that components and APIs guide here and there, you will
find a modal down there.
Now it's under others and here, this modal is a nice component that allows you to add such a nice
overlay, full screen overlay with a little effort.
Now let's add a modal for actually hosting our goal input,
right now the goal input is here at the top and that's all right
but I actually want to move that into a modal so that we have it on a full screen overlay in the end
and we only have a button here at the top,
so in place of goal input which opens that modal.
So let's go to goal input and there,
I want to
wrap this into a modal. So I'll import modal from React Native because it's a component shipping with
React Native and there,
I want to use that modal around my view here,
so just like this for now and now let's save that and
let's see if that already changes something a bit
yes, our styling is off,
we're losing that padding which we set up originally,
right?
In app.js, we have that general padding on our screen view which is that outer view,
it's certainly not getting applied on the two platforms anymore, on the two devices because our
content is way outside of this screen, so that modal is already doing something and
of course we're not really seeing that much. Now for modal,
so for this modal component, you can set a visible key that defines whether this is currently
visible or not and that takes a boolean if we set this to false for example and thereafter if we have a
look at our applications,
we of course seen empty screen. By the way, in case Android shouldn't update for you after setting this to
false, simply close the app here with the help of the app drawer and thereafter in your process down
there, the npm start process, press a again to restart this on Android.
So now we have an empty screen when this is set to false,
now we obviously hardcoding this is not the solution.
Instead in app.js, I now want to have a button which allows us to open that modal and then we will close
the modal from inside the modal
when we press the add button there. Now we're already importing button here into app.js and now
that I see this, we can of course also get rid of these imports which we're not using here right
now,
so just leave the button import here along with the other imports we are using
and now here at the very top, we can add the button, that's a self closing tag though and set the
title to add new goal maybe, something like that. If we do that, we of course should see that button here
at the top
and here it is
and now when we press that button, we want to show that modal, right? Now for that, we need to manage more
state.
So in here besides managing the course goals, I will now also manage whether we're currently in course
add mode or if we're not.
So initially, we're not so the initial state I'm setting is false and I'll name my state here and of
course that is totally up to you,
I'll name it isAddMode and setIsAddMode.
Again these names are up to you,
I'm just having a convention here which you also find in the official React docs where here we try
to give the state we're controlling a fitting name and then we basically take that name and add set
in front of it to make it clear that this is the function to change that state.
So setIsAddMode is what we in the end need to call when this button is pressed
and here we can use an inline function or use a named function and just add the handler here, whatever
you want.
I'll go with the inline function and call set isAddMode and set this to true here
when this button is called so that we open the modal. Now we can take that isAddMode state we're
changing and pass this to goal input to then change the visibility of the modal in there. So here,
we could add a visible prop but that prop name is up to you because it's on our own component and I
pass the isAddMode,
so that's the state we're controlling, to visible mode,
so the value stored in isAddMode is passed as a value to the visible prop.
Now in goal input, we can therefore now use that visible prop,
so here we can use props visible,
now referring to the visible prop we got on the goal input which we then forward to the visible prop
of the modal. If we now save that and we have a look at our app,
if I press add new goal here, indeed you see that modal content up here again.
Now obviously, it's not looking that beautiful here,
so we should change this
and one other thing I want to change is that an animation would be nice here for opening the modal, right?
So here let's add animation type which is a nice property we can set here and you can set this to a string
and there you got three options - none is the default but you can set this to slide
and now the modal should actually appear by sliding up.
So if you press add new goal, now this slides up,
also on Android.
So that's a way better user experience I'd say, the next step is that we ensure that our content in the
modal is presented in a nicer way, maybe centered here in the middle of the modal.