LoginOrRegister

Actually, this component is compounded by two sub-components: <Login /> and <Register />. The only task of <LoginOrRegister /> is to save the state of which component (<Login /> or <Register />) should be displayed, showing it accordingly.

/*** src/components/LoginOrRegister.js ***/

import React from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';

import Login from './Login';
import Register from './Register';

export default class LoginOrRegister extends React.Component {
  state = {
    display: 'login',
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignSelf: 'stretch',
        }}
      >
        {this.state.display === 'login' &&amp...