react-navigation#NavigationEvents JavaScript Examples

render() {
    try {
      const { loading } = this.props;
      const { currentTab, endPos } = this.state;
      const notifications = this.filterItems();
      const renderingNotifications = take(notifications, endPos);
      return (
        <View style={{ flex: 1 }}>
          <NavigationEvents onDidFocus={this.handleNavigationFocus} />
          <Tabs
            currentTab={currentTab}
            tabs={this.getTabs()}
            onChange={this.onChangeTab}
          />
          <FlatList
            contentContainerStyle={styles.wrapper}
            data={renderingNotifications}
            renderItem={this.renderItem}
            ListEmptyComponent={this.renderEmptyState()}
            keyExtractor={this.keyExtractor}
            onEndReachedThreshold={0.9}
            onEndReached={this.loadMore}
            extraData={endPos}
            onRefresh={this.onRefresh}
            refreshing={loading}
          />
        </View>
      );
    } catch (error) {
      return false;
    }
  }

render() {
    const { options } = this.state;
    return (
      <View style={screenWrapper.wrapper}>
        <NavigationEvents onDidFocus={this.handleNavigationFocus} />
        <Header
          left={<NavBackButton />}
          onLeft={this.handleBack}
          title="Manage Variants"
          right={<LinkText text="Save" />}
          onRight={this.handleSave}
        />
        <VariantEditor
          ref={this.setVariantEditorRef}
          options={options}
          onChangeOptions={this.handleChangeOptions}
          addVariant={this.handleNewVariant}
        />
      </View>
    );
  }

render() {
    const { navigation, getFilteredList } = this.props;
    const { filter, sort } = this.state;
    const feedList = getFilteredList(filter, sort);
    return (
      <View style={{ flex: 1, backgroundColor: 'white' }}>
        <NavigationEvents onDidFocus={this.handleFocus} />
        <TabHeader
          left={<NavPlusButton />}
          onLeft={this.toNewFeed}
          title="Social"
          navigation={navigation}
        />
        { Platform.OS === 'android' && (
          <Tabs
            currentTab={filter}
            tabs={filterOptions}
            onChange={this.handleChangeFilter}
          />
        )}
        <GlobalFeedTemplate
          filter={filter}
          sort={sort}
          feedList={feedList}
          onRef={this.setGlobalFeedRef}
          onChangeSortOption={this.handleChangeSort}
        />
      </View>
    );
  }

render() {
    const { getFilteredList } = this.props;
    const { sort, hashtag } = this.state;
    const feedList = getFilteredList('hashtag', sort);
    return (
      <View style={screenWrapper.wrapper}>
        <NavigationEvents onDidFocus={this.handleFocus} />
        <HashtagHeader
          hashtag={hashtag}
          onBack={this.handleBack}
          doSearch={this.handleChangeHash}
        />
        <GlobalFeedTemplate
          filter="hashtag"
          sort={sort}
          hashtag={hashtag}
          feedList={feedList}
          onRef={this.setGlobalFeedRef}
          onChangeSortOption={this.handleChangeSort}
        />
      </View>
    );
  }

render() {
    return (
      <View style={screenWrapper.wrapper}>
        <Header
          left={<NavBackButton />}
          onLeft={this.handleBack}
          title="Notifications"
        />
        <NavigationEvents onDidFocus={this.handleNavigationFocus} onDidBlur={this.markAllAsRead} />
        <NotificationTemplate />
      </View>
    );
  }

render() {
    return (
      <View style={styles.container}>
        <NavigationEvents onDidFocus={() => this.componentDidMount()} />
        {/* <View style={styles.header}>
          <Text style={styles.headerText}>Shopping Cart</Text>
        </View> */}
        {this.renderContent()}
      </View>
    );
  }

render() {
    return (
      <SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
        <NavigationEvents onWillBlur={this.props.unloadAuthScreen} />
        <StatusBar barStyle="dark-content" />
        <RequestTokenForm
          tokenPurpose="reset-password"
          title="Send Password Reset Email"
          onSubmit={this.props.requestPasswordReset}
        />
      </SafeAreaView>
    );
  }

render() {
    return (
      <SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
        <NavigationEvents onWillBlur={this.props.unloadAuthScreen} />
        <StatusBar barStyle="dark-content" />
        <RequestTokenForm
          tokenPurpose="verify-email"
          title="Resend Verification Email"
          onSubmit={this.props.requestVerificationEmail}
        />
      </SafeAreaView>
    );
  }

render() {
    const { navigation, paymentMethod } = this.props;
    const { paidOrderInfo } = this.state;

    const orderData = navigation.getParam('orderData');
    const price = navigation.getParam('price');

    const {
      paymentState, reason, percentage, tipAmount,
    } = this.state;
    const { localCurrency, localLabelFromBCH } = this.props;
    const { paymentCoin } = orderData;
    const coinInfo = getGeneralCoinInfo(paymentCoin);
    const dispAmount = localLabelFromBCH(price, paymentCoin);
    return (
      <View style={screenWrapper.wrapper}>
        <NavigationEvents onDidFocus={this.handleFocus} />
        <Header left={<NavBackButton />} onLeft={this.handleGoBack} />
        <PurchaseStateTemplate
          paymentState={paymentState}
          reason={reason}
          localCurrency={localCurrency}
          coinInfo={coinInfo}
          dispAmount={dispAmount}
          onRetry={this.doPurchase}
          navigation={navigation}
          percentage={percentage}
          onFinish={this.finishLoading}
          paidOrderInfo={paidOrderInfo}
          onAmountSelected={this.handleShowPanel}
        />
        <OBSlidingPanel ref={this.setSlidingPanel}>
          <PayPanel
            amount={tipAmount}
            paymentMethod={paymentMethod}
            onInternal={this.handleInternalTipPay}
            onExternal={this.handleExternalTipPay}
          />
        </OBSlidingPanel>

      </View>
    );
  }

render() {
    const {
      search_result,
      navigation,
    } = this.props;
    const isFromTag = navigation.getParam('isFromTag');
    const {
      showRecent, keyword, currentTab,
    } = this.state;
    return (
      <View style={screenWrapper.wrapper}>
        <NavigationEvents
          onWillFocus={this.onNavigationFocus}
        />
        <SearchHeader
          ref={this.setSearchHeaderRef}
          showRecent={showRecent}
          showQRButton={false}
          onFocus={this.onFocusSearchField}
          onBack={this.hideRecent}
          doSearch={this.doSearch}
          onChange={this.onChangeKeyword}
          keyword={keyword}
          navigation={navigation}
          autoFocus={!isFromTag}
          toFilter={!isEmpty(search_result) && this.toFilter}
          disableFilter={currentTab === 'users'}
        />
        <Tabs
          currentTab={currentTab}
          tabs={tabs}
          onChange={this.onChangeTab}
        />
        { this.renderTabContents() }
        {showRecent && (
          <RecentSearch
            onSelectKeyword={this.onSelectKeyword}
            onRemoveKeyword={this.onRemoveKeyword}
          />
        )}
      </View>
    );
  }

render() {
    const { navigation, currentStatus } = this.props;
    const { loading } = this.state;
    const activityId = navigation.getParam('activityId');
    const {
      imagesForModal, currentTab, reported,
    } = this.state;

    if (_.isEmpty(this.getActivity())) {
      return this.renderLoadingState();
    }

    return (
      <View style={styles.wrapper}>
        <NavigationEvents
          onDidFocus={this.handleNavigationFocus}
        />
        <ScrollView
          style={styles.content}
          ref={this.setScrollRef}
          refreshControl={
            <RefreshControl
              refreshing={loading && currentStatus === streamActions.fetchFeedItems}
              onRefresh={this.handleRefresh}
            />
          }
        >
          <FeedItem
            key={`${activityId}`}
            activityId={activityId}
            onPress={() => {}}
            onComment={this.handleComment}
            navigation={navigation}
            onViewImages={this.handleViewImages}
            noSeparator
            repost={this.handleRepost}
            reportUser={this.reportUser}
            deleteRepost={this.handleDeleteRepost}
            onRef={this.setFeedItemRef}
            hideMoreButton
          />
          <Tabs
            currentTab={currentTab}
            tabs={tabs}
            onChange={this.handleChangeTab}
          />
          {this.renderTab()}
        </ScrollView>
        {currentTab === 'comment' && (
          <CommentInput
            ref={this.setCommentInputRef}
            submitComment={this.submitComment}
          />
        )}
        {reported && (
          <View style={styles.overlay}>
            <Text style={styles.overlayText}>
              Reported
            </Text>
          </View>
        )}
        <OBDarkModal
          onRequestClose={this.handleClose}
          visible={imagesForModal.length > 0}
          darkContent
        >
          <ImageViewer
            imageUrls={imagesForModal}
            enableSwipeDown
            enablePreload
            onCancel={this.handleClose}
          />
          <ModalBackButton onPress={this.handleClose} />
        </OBDarkModal>
        <RepostTemplate
          ref={this.setRepostTemplateRef}
          onDeleteRepost={this.loadReposts}
          onAddRepost={this.loadReposts}
        />
        <ReportTemplate ref={this.setReportTemplateRef} submit={this.submitReport} />
      </View>
    );
  }

render() {
    const {
      getPeerIDFromOrder, navigation, peerID, fetching,
    } = this.props;
    const orderType = navigation.getParam('orderType');
    const orderId = this.getOrderId();

    const header = (
      <Header
        left={<NavBackButton />}
        onLeft={() => {
          navigation.dispatch(NavigationActions.back());
        }}
        title={getOrderTitleFromOrderId(orderId)}
        right={<StoreMoreMenu onMore={this.handlePressMore} black size={28} />}
      />
    );

    const {
      showFundDlg,
      showDisputeDlg,
      showFulfillDlg,
      showRatingModal,
      showLearnMoreModal,
      contractType,
      memo,
      orderDetails = {},
      tab,
      copied,
      order = {},
      updating,
      showContractModal,
    } = this.state;
    if (!order) {
      return (
        <View style={screenWrapper.wrapper}>
          {header}
        </View>
      );
    }

    const moderatorId = get(orderDetails, 'contract.buyerOrder.payment.moderator');
    const isModerated = get(orderDetails, 'contract.buyerOrder.payment.method') === 'MODERATED';
    const disputeTimestamp = get(orderDetails, 'contract.dispute.timestamp');
    const vendorId = order.vendorId || peerID;
    const buyerId = order.buyerId || peerID;
    const blurComponentIOS = (
      <BlurView style={StyleSheet.absoluteFill} blurType="xlight" blurAmount={50} />
    );
    return (
      <View style={screenWrapper.wrapper}>
        <NavigationEvents onDidFocus={this.handleNavigationFocus} />
        {header}
        <Tabs
          currentTab={tab}
          tabs={this.getOrderTabs()}
          onChange={this.updateState('tab')}
          withBorder
        />
        {tab === 'details' ? (
          <ScrollView
            refreshControl={
              <RefreshControl
                refreshing={updating && fetching}
                onRefresh={this.onRefresh}
              />
            }
          >
            {!isEmpty(order) && (
              <View style={styles.brief}>
                <OrderBrief
                  orderType={orderType}
                  order={order}
                  onPress={this.handleGoToListing}
                  noBorder
                  hideTimestamp
                  shouldFetchProfile
                  showLearnMore
                  onLearnMore={this.showLearnMoreDlg}
                />
              </View>
            )}
            {!isEmpty(orderDetails) && (
              <OrderSummary
                orderId={this.getOrderId()}
                orderDetails={orderDetails}
                orderType={orderType}
                onDispute={this.disputeOrder}
                onClaim={this.claimOrder}
                onCancel={this.cancelOrder}
                onMessage={this.handleGoToChat}
                navigation={navigation}
              />
            )}
          </ScrollView>
        ) : (
          <ChatDetailTemplate
            isFromOrder
            isModerated={isModerated}
            peerID={getPeerIDFromOrder(this.getOrderId(), orderType)}
            subject={this.getOrderId()}
            orderType={orderType}
            moderatorId={moderatorId}
            vendorId={vendorId}
            buyerId={buyerId}
            inDispute={orderDetails.state === 'DISPUTED'}
            disputeTimestamp={disputeTimestamp}
          />
          )}
        {tab === 'details' && (
          <OrderFooter
            orderType={orderType}
            order={order}
            orderDetails={orderDetails}
            onOrderAction={this.onOrderAction}
          />
        )}
        <Dialog.Container visible={showFundDlg} blurComponentIOS={blurComponentIOS}>
          <Dialog.Title>Fund Order</Dialog.Title>
          <Dialog.Description>Leave Notes</Dialog.Description>
          <Dialog.Input value={memo} onChangeText={this.updateState('memo')} />
          <Dialog.Button
            label="Cancel"
            onPress={() => {
              this.setState({ showFundDlg: false, memo: '' });
            }}
          />
          <Dialog.Button label="Confirm" onPress={this.doFund} />
        </Dialog.Container>
        <FulfillModal
          isOpen={showFulfillDlg}
          orderId={this.getOrderId()}
          buyerId={buyerId}
          vendorId={this.getVendorId()}
          contractType={contractType}
          onHideFulfill={this.handleHideFulfill}
        />
        <DisputeModal
          orderType={orderType}
          isOpen={showDisputeDlg}
          orderId={this.getOrderId()}
          vendorId={this.getVendorId()}
          onHideDispute={this.handleHideDispute}
        />
        <RatingModal
          show={showRatingModal}
          orderType={orderType}
          order={order}
          hideModal={this.hideRatingModal}
          finishReview={this.doComplete}
        />
        <OBActionSheet
          ref={this.setActionSheet}
          onPress={this.handleChange}
          options={[
            orderType === 'purchases' ? 'Go to seller\'s profile' : 'Go to buyer\'s profile',
            'View listing',
            'Copy order number',
            'View contract',
            'Cancel',
          ]}
          cancelButtonIndex={4}
        />
        {copied && (
          <View style={styles.overlay}>
            <Text style={styles.overlayText}>Order number copied!</Text>
          </View>
        )}
        <OBLightModal
          animationType="slide"
          transparent
          visible={showLearnMoreModal}
          onRequestClose={this.hideLearnMoreDlg}
        >
          <Header
            modal
            left={<NavCloseButton />}
            onLeft={this.hideLearnMoreDlg}
          />
          <View style={styles.contentContainer}>
            <Text style={styles.learnMoreText}>
              Due to changes in the exchange rate, the current market price for an order may differ from the total price of the item at the time of purchase.
            </Text>
          </View>
        </OBLightModal>
        <ContractModal
          show={showContractModal}
          onClose={this.handleCloseContractModal}
          orderDetails={orderDetails}
        />
      </View>
    );
  }

render() {
    const {
      featuredListing = {},
      trendingListing = {},
      bestsellersListing = {},
      gamingListing = {},
      munchiesListing = {},
      devicesListing = {},
      navigation,
    } = this.props;
    const { promoData, refreshing, showCovid, showEULA } = this.state;
    const featuredListings = _.take((featuredListing.data || []).filter(this.filterBlocked), 6);
    const trendingListings = _.take((trendingListing.data || []).filter(this.filterBlocked), 3);
    const bestsellersListings = _.take((bestsellersListing.data || []).filter(this.filterBlocked), 9);
    const gamingListings = _.take((gamingListing.data || []).filter(this.filterBlocked), 9);
    const munchiesListings = _.take((munchiesListing.data || []).filter(this.filterBlocked), 9);
    const devicesListings = _.take((devicesListing.data || []).filter(this.filterBlocked), 9);

    const { showQRButton } = this.state;
    return (
      <View style={screenWrapper.wrapper}>
        <NavigationEvents onDidFocus={this.handleFocus} />
        <SearchHeader
          onRight={this.handleGoToSettings}
          onClick={this.handleTapSearch}
          navigation={navigation}
          showQRButton={showQRButton}
        />
        <ScrollView
          scrollEventThrottle={400}
          refreshControl={
            <RefreshControl
              refreshing={(featuredListing.loading || trendingListing.loading) && refreshing}
              onRefresh={this.onRefresh}
            />
          }
        >
          {Platform.OS === 'android' && false && (
            <Button
              title="Essential supplies needed (COVID-19)"
              textStyle={styles.buttonText}
              wrapperStyle={styles.buttonWrapper}
              onPress={this.handleShowCovid}
            />
          )}
          <MainSlider items={promoData} />
          <CategoryList />
          <Section title="Trending">
            <ProductGrid
              compact
              products={trendingListings}
              keyPrefix="trending"
              toListingDetails={this.toListingDetails('Latest')}
            />
          </Section>
          <Section title="Featured stores">
            <ShopGrid
              shops={this.getFeaturedStores()}
              onPress={this.toExternalStore}
              count={4}
            />
          </Section>
          <Section title="Featured listings">
            <ProductGrid
              compact
              products={featuredListings}
              keyPrefix="featured"
              toListingDetails={this.toListingDetails('Hot')}
            />
          </Section>
          <Section title="Best Sellers">
            <ProductGrid
              compact
              products={bestsellersListings}
              keyPrefix="bestsellers"
              toListingDetails={this.toListingDetails('Bestsellers')}
            />
          </Section>
          <Section title="Gaming">
            <ProductGrid
              compact
              products={gamingListings}
              keyPrefix="gaming"
              toListingDetails={this.toListingDetails('Gaming')}
            />
          </Section>
          <Section title="Munchies">
            <ProductGrid
              compact
              products={munchiesListings}
              keyPrefix="munchies"
              toListingDetails={this.toListingDetails('Munchies')}
            />
          </Section>
          <Section title="Devices">
            <ProductGrid
              compact
              products={devicesListings}
              keyPrefix="devices"
              toListingDetails={this.toListingDetails('Devices')}
            />
          </Section>

          <FlatList
            data={PREVIEWING_CATEGORIES}
            keyExtractor={this.keyExtractor}
            renderItem={this.renderCategoryPreview}
          />
        </ScrollView>
        <CovidModal
          show={showCovid}
          onClose={this.handleCloseCovid}
          onCreateListing={this.handleCreateListing}
          navigation={navigation}
        />
        <EULAModal
          show={showEULA}
          onClose={this.handleCloseEULA}
          navigation={navigation}
        />
      </View>
    );
  }

render() {

      const { t, i18n } = this.props;


        /* If you touch the address component, it will hide the other stuff.
           This is nice if you want someone to scan the QR code, but don't
           want to display your balance. */

           const interpolateColor =  this.animatedValue.interpolate({
           inputRange: [0, 32, 64, 96, 128, 160, 192, 224],
           outputRange:['#5f86f2','#a65ff2','#f25fd0','#f25f61','#f2cb5f','#abf25f','#5ff281','#5ff2f0']
           })

        return(
            <ScrollView
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refreshing}
                        onRefresh={this.refresh}
                        title='Updating coin price...'
                    />
                }
                style={{
                    backgroundColor: this.props.screenProps.theme.backgroundColour,
                }}
                contentContainerstyle={{
                    flex: 1,
                }}
            >
                <NavigationEvents
                    onWillFocus={(payload) => {
                        if (payload && payload.action && payload.action.params && payload.action.params.reloadBalance) {
                            this.updateBalance();
                        }
                    }}
                />
                <View style={{
                    justifyContent: 'space-around',
                    height: Dimensions.get('window').height - 73,
                }}>
                    <View style={{
                      height: '10%',
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      marginBottom: 30,
                      padding: 0,
                      opacity: this.state.addressOnly ? 0 : 100,
                      shadowColor: "#000",
                      shadowOffset: {
                      	width: 0,
                      	height: 7,
                      },
                      shadowOpacity: 0.43,
                      shadowRadius: 9.51,

                      elevation: 15,
                    }}>

                    </View>

                    <TouchableOpacity onPress={() => this.setState({ addressOnly: !this.state.addressOnly })}>
                        <AddressComponentWithTranslation {...this.props}/>
                      <View style={{ display: this.state.addressOnly ? 'flex' : 'none', borderRadius: 5, borderWidth: 0, borderColor: this.props.screenProps.theme.borderColour, padding: 0, marginTop: 10, backgroundColor: 'transparent', alignItems: "center" }}>

                          <QRCode
                              value={'xkr://' + this.state.address + '?paymentid=' + Buffer.from(getKeyPair().publicKey).toString('hex')}
                              size={250}
                              backgroundColor={'transparent'}
                              color={this.props.screenProps.theme.qrCode.foregroundColour}
                          />
                      </View>
                    </TouchableOpacity>

                    <View style={{display: this.state.addressOnly ? 'none' : 'flex', flex: 1}}>
                        <BalanceComponent
                            unlockedBalance={this.state.unlockedBalance}
                            lockedBalance={this.state.lockedBalance}
                            coinValue={this.state.coinValue}
                            address={this.state.address}
                            {...this.props}
                        />

                    </View>

                    <View style={{ opacity: this.state.addressOnly ? 0 : 100, flex: 1 }}>
                        <SyncComponent {...this.props}/>
                    </View>
                </View>
            </ScrollView>
        );
    }

render() {
    const {
      clearErrorMessage,
      errorMessage,
      isProcessing,
      theme: { colors },
      type,
      unloadAuthScreen,
    } = this.props;
    return (
      <SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
        <NavigationEvents onWillBlur={unloadAuthScreen} />
        <StatusBar barStyle="dark-content" />
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : null}
          style={styles.container}
        >
          <ScrollView
            keyboardShouldPersistTaps="handled"
            keyboardDismissMode="on-drag"
          >
            <Logo />
            <Spacer>
              <Title style={{ alignSelf: 'center', color: colors.primary }}>
                Sign In
              </Title>
            </Spacer>
            <Spacer>
              <TextInput
                label="Email"
                mode="outlined"
                dense
                value={this.state.email}
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="email-address"
                onChangeText={(email) => this.setState({ email })}
                onSubmitEditing={this.onEmailSignIn}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <Spacer />
              <TextInput
                label="Password"
                mode="outlined"
                dense
                secureTextEntry
                value={this.state.password}
                autoCapitalize="none"
                autoCorrect={false}
                onChangeText={(password) => this.setState({ password })}
                onSubmitEditing={this.onEmailSignIn}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <View style={styles.navLinks}>
                <NavLink
                  text="Forgot password?"
                  routeName="RequestPasswordReset"
                  disabled={isProcessing}
                />
                <NavLink
                  text="Register instead!"
                  routeName="SignUp"
                  disabled={isProcessing}
                />
              </View>
            </Spacer>
            <Spacer vertical={4}>
              <Button
                mode="contained"
                accessibilityLabel="Sign In"
                onPress={this.onEmailSignIn}
                loading={isProcessing && type === 'email'}
                disabled={isProcessing}
              >
                Sign In
              </Button>
            </Spacer>
            <Spacer vertical={12}>
              <Text style={{ alignSelf: 'center' }}>Or Sign In With</Text>
            </Spacer>
            <Spacer>
              <OAuthButtons />
            </Spacer>
            {errorMessage === 'Email is not verified' && (
              <NavLink
                text="Have not received verification email?"
                routeName="RequestVerificationEmail"
                disabled={isProcessing}
              />
            )}
          </ScrollView>
          <Snackbar
            visible={errorMessage}
            onDismiss={clearErrorMessage}
            action={{
              label: 'Dismiss',
              accessibilityLabel: 'Dismiss',
              onPress: () => {},
            }}
          >
            {errorMessage}
          </Snackbar>
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }

render() {
    const {
      clearErrorMessage,
      errorMessage,
      isProcessing,
      theme: { colors },
      type,
      unloadAuthScreen,
    } = this.props;
    return (
      <SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
        <NavigationEvents onWillBlur={unloadAuthScreen} />
        <StatusBar barStyle="dark-content" />
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : null}
          style={styles.container}
        >
          <ScrollView
            keyboardShouldPersistTaps="handled"
            keyboardDismissMode="on-drag"
          >
            <Logo />
            <Spacer>
              <Title style={{ alignSelf: 'center', color: colors.primary }}>
                Sign Up
              </Title>
            </Spacer>
            <Spacer>
              <TextInput
                label="Username"
                mode="outlined"
                dense
                value={this.state.username}
                autoCapitalize="none"
                autoCorrect={false}
                onChangeText={(username) => this.setState({ username })}
                onSubmitEditing={this.onEmailRegister}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <Spacer />
              <TextInput
                label="Email"
                mode="outlined"
                dense
                value={this.state.email}
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="email-address"
                onChangeText={(email) => this.setState({ email })}
                onSubmitEditing={this.onEmailRegister}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <Spacer />
              <View style={styles.fullName}>
                <TextInput
                  label="First Name"
                  mode="outlined"
                  style={styles.name}
                  dense
                  value={this.state.firstName}
                  autoCorrect={false}
                  onChangeText={(firstName) => this.setState({ firstName })}
                  onSubmitEditing={this.onEmailRegister}
                  onFocus={clearErrorMessage}
                  disabled={isProcessing}
                />
                <TextInput
                  label="Last Name"
                  mode="outlined"
                  style={styles.name}
                  dense
                  value={this.state.lastName}
                  autoCorrect={false}
                  onChangeText={(lastName) => this.setState({ lastName })}
                  onSubmitEditing={this.onEmailRegister}
                  onFocus={clearErrorMessage}
                  disabled={isProcessing}
                />
              </View>
              <Spacer />
              <TextInput
                label="Password"
                mode="outlined"
                dense
                secureTextEntry
                value={this.state.password}
                autoCapitalize="none"
                autoCorrect={false}
                onChangeText={(password) => this.setState({ password })}
                onSubmitEditing={this.onEmailRegister}
                onFocus={clearErrorMessage}
                disabled={isProcessing}
              />
              <View style={styles.navLinks}>
                <NavLink text="Sign in instead!" routeName="SignIn" />
              </View>
            </Spacer>
            <Spacer vertical={4}>
              <Button
                mode="contained"
                accessibilityLabel="Sign In"
                onPress={this.onEmailRegister}
                loading={isProcessing && type === 'email'}
                disabled={isProcessing}
              >
                Sign Up
              </Button>
            </Spacer>
            <Spacer vertical={12}>
              <Text style={{ alignSelf: 'center' }}>Or Sign Up With</Text>
            </Spacer>
            <Spacer>
              <OAuthButtons />
            </Spacer>
          </ScrollView>
          <Snackbar
            visible={errorMessage}
            onDismiss={clearErrorMessage}
            action={{
              label: 'Dismiss',
              accessibilityLabel: 'Dismiss',
              onPress: () => {},
            }}
          >
            {errorMessage}
          </Snackbar>
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }