O'Reilly logo

React Native Blueprints by Emilio Rodriguez Martinez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Login

The <Login /> component heavily relies on the users store for logic, as it is mostly focused on rendering two forms for login and registration. All the validation for the forms is done by Firebase, so we only need to focus on rendering the UI elements and calling the proper store methods. 

In this screen, we will be using the react-native-keyboard-aware-scroll view, which is a module providing a self-scrolling <Scrollview />, which reacts to any focused <TextInput /> so they are not hidden when the keyboard pops up. 

Let's take a look at the code:

/*** src/screens/Login.js ***/import React, { PropTypes } from 'react' import { ScrollView, TextInput, Button, Text, View, Image, ActivityIndicator } from 'react-native'; import { observer, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required