Exercise (Video): Modals

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

calificaciones

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

calificaciones

Curso 3 de 4 en SpecializationFull-Stack Web Development with React

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application

De la lección

React Native UI Elements and Redux

This module introduces you to various React Native UI elements. We will look at how we can make use of these elements in designing the various views of our application. You will get an overview of the Flux architecture and introduced to Redux as a way of realizing the Flux architecture

Forms and Modals7:35

Exercise (Video): Forms30:53

Exercise (Video): Modals13:50

Conoce a los instructores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Modals are a way of overlaying some content on top of your view,

and then showing some information.

In this exercise, we will add a modal to our application in the reservation component.

So, when the user submits the form,

the information that the user submits is shown in modal that covers the screen,

and then there is a way for us to dismiss the modal once we have seen the modal.

So, that is what we will implement in this exercise.

So, how do we add a modal to our application?

Again going to the reservation component that we have created earlier,

the modal is another react-native component that is supported by react-native.

So, we will import the modal from react-native here and then

configure the modal to show information to our user.

Now, the modal itself requires us to maintain

a piece of information in our local state of the component.

So, to use a modal you obviously need a component to be implemented as a class component,

and then will maintain

a Boolean variable which is initialized to false.

So, this showModal when set to true will show the modal,

and when it is set to false will hide the modal.

So, that's how we're going to be using this showModal here.

Now, in order to toggle the showModal value,

we will implement a function called as toggleModal whose main job is to

change the showModal value to whatever it is not currently.

That is to swap the showModal value.

So, if showModal is currently false you will set your modal to true,

if it is true then you'll set it to false.

So, that's what we are achieving by doing this here.

So, showModal is not this state showModal here.

Now, before we create the modal,

I will add in a few more styles for the modal.

So, for the model itself we will create the style as justifyContent, center,

margin of 20, and then in addition I'll

introduce another style called modalTitle bill for which we will set the fontSize is 24,

fontWeight as bold,

the background color as 512DA8,

and then text align center,

Color as white, and then margin bottom as 20.

Again these I've figured out

by trial and error there's nothing sacred about these numbers.

You can change the numbers and the values as is suited for you.

For the modal text I will set the margin as ten.

So, these three new styles I create here.

Let me add in the modal.

So, to add in the modal will go into our scrollview that we have

here and right below the form here,

inside the scrollview, I will create a modal by saying modal.

So, you would expect

the modal to be shown as here.

So, for the model what do we setup?

So, we can set up some properties, animation type.

How do you want the modal to be shown onto the screen,

and one of the choices is slides.

So, you'll slide the modal onto the screen here.

Then, do you want the modal to be transparent? We'll say no.

So, it'll be an opaque modal,

so it'll cover whatever is underneath.

Sometimes a transparent modal way something that you may be interested in,

and there is a flag called visible which you will set as this state show modal.

So, what this means is that if the show model is true,

then this modal will be visible.

If it is false then the modal will be hidden.

So, that's why this visible attribute is set to match the show modal, and then onDismiss.

So, this would be called when you dismiss the modal,

so you can have a button to dismiss the modal,

and when the modal is dismissed you may wish to trigger a function.

So, we'll say onDismiss they will just toggle the modal.

So when you click on dismissing the modal,

the modal will be hidden and also we

can reset form at this point.

So, this whole thing enclosed inside.

So, when you dismiss the modal also you will reset the form,

and then onRequestClose this

also when you dismiss the modal again will do exactly the same thing.

So, that's the setup for the modal,

and inside the modal we will use

a view with this tile as styles modal.

So, we'll set up what we are going to show inside the modal.

So, whatever we type here will be shown inside this modal.

So, I set up a view inside which I

will show styles.modal title.

So, we'll show the modal title here,

and then we'll say your reservation.

So, we'll show the text

with style as modalText,

and show number of guests and then the number of guests would be

given by this state guests.

So, that'll be the number of guests.

Then the next one,

we will let me just copy this,

they will show smoking, question mark,

and print out this state smoking

and then the third one it will print

out date and time

which is this stage date.

So, we are printing out the information from the model itself,

from what we have submitted in the form.

Then let me create a button here which when

pressed they will do

exactly the same thing as shown here.

So, let me copy that and then put it inside the button there.

We'll reset the form and for this button I will set the color as 512DA8,

and the title as 'Close'.

One thing that we've noticed is that we have

this reset form function which obviously we don't have at the moment.

So, I'm gonna go into this function here,

and then implement the reset form here.

Inside the reset form,

I'm just going to cut that out and then put it in here.

So, we're going to be resetting the form by doing this.

Now, then the user submits the reservation by clicking on the reservation button.

We'll toggle the modal to show the information.

So, this toggleModal will cause the modal to be shown,

and then you will show the information that you submitted through

the reservation form on top of the form there in the screen.

So, those are the changes that we will make to use the modal.

Let's save the changes and then go and take a look at our application.

Going to our application in the device.

Let's now pull up the reserve table,

and then you can see that you have the reservation form here.

Let me fill in some values to the reservation form,

it will select a date and a time.

I'm just going to use the default.

Then when I click on the reserve button,

you will immediately see that the modal pops up onto the screen.

So, you can see how the modal contains the information that I just submitted,

and when I click on the Close button the form is dismissed,

and the reservation form is again show and the reservation form is reset.

That is what we aim to achieve using this reservation form.

I just notice that here the smoking is not showing anything.

So, I need to go and fix that code there.

Now, here when we display the smoking here,

will say if this state smoking then we will

use a way to display a yes or no in the screen there.

So, with this modification to the smoking,

let's save the changes and go and take a look at our form.

Again, going back to our application,

let me click on the reserve table,

and select a value,

and select a date and a time,

and then when I click on the reserve modal.

Now you see that the modal is popped up with

the information that I submitted in the reservation form.

Then clicking on the Close button,

we'll dismiss the modal and then you'll form it's reset pin.

With this we complete this exercise,

where we have seen how we can add a modal to our application.

This is a good time for you to do a git commit with the message, modal.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play