Swipe Option Buttons and Alerts

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 Alerts, Animations, Gestures, and Persist Redux Store

In this module we look at enhancing the user experience through the use of animations and support for gesture-based interaction. We also look at persisting the redux state, and alerting the users

Swipe Option Buttons and Alerts4:24

Exercise (Video): Favorites14:05

Exercise (Video): Swipeout and Deleting Favorites10:59

Exercise (Video): Alert8:16

Conoce a los instructores

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

[MUSIC]

Swipe option buttons and alerts are minor UX enhancements that

you can add to your application to make your user experience better.

A swipe option button typically is added to items in a list.

When you swipe on a item in a list, either to the left or to the right, the option

buttons are revealed, which when clicked may trigger additional actions.

Similarly, alerts are a easy way of

popping up information to confirm an operation from the user.

Let's look at an example and

then understand how we can make use of it within our React Native application.

Taking a look at our application,

let me show you a couple of ways that we can reveal the swipe option buttons.

Let's go to the list of our favorites.

In our favorites, when we do a right-to-left gesture, then we can reveal

buttons like this, which we can click in order to perform a Delete operation.

And when you do so, you can easily make use of an alert

to confirm that the user intends to do that operation.

So, an alert dialog can be popped up to overlay on top of your screen,

and can show a message to the user, and

provide a Cancel and a Confirm button, and even a Neutral button, if you so require.

And when the user clicks on one of these buttons,

then you will either proceed ahead with the operation or cancel the operation.

So, for example, in this case, I can simply click on the Cancel and

then cancel the operation.

Similarly, I can reveal the other dialog, delete the item, and

then when I click on OK, then the item is deleted from my list of favorites.

So swipe option buttons and alerts add an easy way of adding to the user experience.

Now, how do we implement this?

So as we have seen, alert dialogs allow you to display an overlay on top

of your current screen with some message and provide option buttons there,

which can be clicked in order to either proceed ahead with the operation or

cancel the operation.

Now, the alert dialogs are supported in React Native

using the Alert, and this can be easily configured within your application.

So, the Alert API allows you to configure various options for the alert dialog.

This in turn uses the alerting mechanism supported by

both Android and iOS in order to pop up the dialog boxes on top.

The buttons that you include in the alert dialog can either be neutral,

negative, or positive choices.

So, the positive choice,

typically labeled as OK, to proceed ahead with the operation.

The negative choice, typically given as Cancel,

to cancel the operation, and so on.

The use of the option buttons that are revealed when you swipe on

an item is added through an additional NPM package called React-native-swipeout.

So, the React-native-swipeout allows you to add iOS-style

option buttons that are hidden by default, and when you swipe on an item,

then these buttons will be revealed.

You can either do right-to-left gesture to reveal buttons to the right side, or

left-to-right gesture to reveal buttons on the left side.

So both options are supported using the React-native-swipeout.

There are many other such packages that are available for

React Native that allow you to add similar kind of functionality.

I chose to use this particular version to illustrate to you

that such features can be easily added to your application.

So this allows you to add these swipe buttons

very easily to your React Native application.

[MUSIC]

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