Improve textinput performance in login and account creation (#4673)

* Change login form to use uncontrolled inputs

* Debounce state updates in account creation to reduce flicker

* Refactor state-control of account creation forms to fix perf without relying on debounces

* Remove canNext and enforce is13

* Re-add live validation to signup form (#4720)

* Update validation in real time

* Disable on invalid

* Clear server error on typing

* Remove unnecessary clearing of error

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 73 insertions, 0 deletions

diff --git a/src/screens/Signup/BackNextButtons.tsx b/src/screens/Signup/BackNextButtons.tsx
new file mode 100644
index 000000000..73bd428c8
--- /dev/null
+++ b/src/screens/Signup/BackNextButtons.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Loader} from '#/components/Loader'
+
+export interface BackNextButtonsProps {
+  hideNext?: boolean
+  showRetry?: boolean
+  isLoading: boolean
+  isNextDisabled?: boolean
+  onBackPress: () => void
+  onNextPress?: () => void
+  onRetryPress?: () => void
+}
+
+export function BackNextButtons({
+  hideNext,
+  showRetry,
+  isLoading,
+  isNextDisabled,
+  onBackPress,
+  onNextPress,
+  onRetryPress,
+}: BackNextButtonsProps) {
+  const {_} = useLingui()
+
+  return (
+    <View style={[a.flex_row, a.justify_between, a.pb_lg, a.pt_3xl]}>
+      <Button
+        label={_(msg`Go back to previous step`)}
+        variant="solid"
+        color="secondary"
+        size="medium"
+        onPress={onBackPress}>
+        <ButtonText>
+          <Trans>Back</Trans>
+        </ButtonText>
+      </Button>
+      {!hideNext &&
+        (showRetry ? (
+          <Button
+            label={_(msg`Press to retry`)}
+            variant="solid"
+            color="primary"
+            size="medium"
+            onPress={onRetryPress}>
+            <ButtonText>
+              <Trans>Retry</Trans>
+            </ButtonText>
+            {isLoading && <ButtonIcon icon={Loader} />}
+          </Button>
+        ) : (
+          <Button
+            testID="nextBtn"
+            label={_(msg`Continue to next step`)}
+            variant="solid"
+            color="primary"
+            size="medium"
+            disabled={isLoading || isNextDisabled}
+            onPress={onNextPress}>
+            <ButtonText>
+              <Trans>Next</Trans>
+            </ButtonText>
+            {isLoading && <ButtonIcon icon={Loader} />}
+          </Button>
+        ))}
+    </View>
+  )
+}