render-method.js

render() {
    if (showSpinner) {
      return this.renderSpinner();
    }
  
    if (user) {
      return this.renderUserInfo();
    }

    return this.renderAuthScreen();
  }
  
  renderSpinner () {
    return <Spinner size="large" text="Logging" />;
  }

  renderUserInfo () {
    return <UserInfoBox />; // Notice name change!
  }

  renderAuthScreen () {
    return <AuthScreen {...this.props} />;
  }


class AuthScreen extends React.Component {
  render () {
    return (
      <View style={styles.viewStyle}>
        <Input
          autoCapitalize='none'
          autoFocus
          label="Email"
          onChangeText={(value) => this.setState({ email: value })}
          outerViewStyle={{ borderTopWidth: 1 }}
          placeholder="[email protected]"
          value={email}
        />
        <Input
          autoCapitalize='none'
          label="Password"
          onChangeText={(value) => this.setState({ password: value })}
          placeholder="password"
          secureTextEntry
          value={password}
        />
        <ErrorText message={error} />
        <Button onPress={this.onButtonPress.bind(this)}>Log in</Button>
      </View>
    );
  }
}