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, inject } from 'mobx-react/native'
import Icon from 'react-native-vector-icons/FontAwesome'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

import LoginForm from '../components/LoginForm'...