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' && ( <Login login={this.props.login} changeToRegister={() => this.setState({ display: 'register' })} loading={this.props.loading} ...