From 990d6655fe011440dd94366546620b3ea3523dc9 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Tue, 22 Jun 2021 10:09:50 -0700
Subject: [PATCH 1/3] Don't focus input until screen transition has ended

---
 src/pages/settings/AddSecondaryLoginPage.js | 138 +++++++++++---------
 1 file changed, 77 insertions(+), 61 deletions(-)

diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
index 2e0bf3a35a11..ba3bf3e301fe 100755
--- a/src/pages/settings/AddSecondaryLoginPage.js
+++ b/src/pages/settings/AddSecondaryLoginPage.js
@@ -68,10 +68,19 @@ class AddSecondaryLoginPage extends Component {
         this.state = {
             login: '',
             password: '',
+            didScreenTransitionEnd: false,
         };
         this.formType = props.route.params.type;
         this.submitForm = this.submitForm.bind(this);
         this.validateForm = this.validateForm.bind(this);
+
+        this.phoneNumberInputRef = null;
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (!prevState.didScreenTransitionEnd && this.state.didScreenTransitionEnd) {
+            this.phoneNumberInputRef.focus();
+        }
     }
 
     componentWillUnmount() {
@@ -103,68 +112,75 @@ class AddSecondaryLoginPage extends Component {
     render() {
         return (
             <ScreenWrapper>
-                <KeyboardAvoidingView>
-                    <HeaderWithCloseButton
-                        title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                            ? 'addSecondaryLoginPage.addPhoneNumber'
-                            : 'addSecondaryLoginPage.addEmailAddress')}
-                        shouldShowBackButton
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                    />
-                    <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                        <Text style={[styles.mb6, styles.textP]}>
-                            {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                                ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
-                                : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
-                        </Text>
-                        <View style={styles.mb6}>
-                            <Text style={[styles.mb1, styles.formLabel]}>
-                                {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                                    ? 'common.phoneNumber'
-                                    : 'profilePage.emailAddress')}
-                            </Text>
-                            <TextInput
-                                style={styles.textInput}
-                                value={this.state.login}
-                                onChangeText={login => this.setState({login})}
-                                autoFocus
-                                keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
-                                    ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
-                                returnKeyType="done"
-                            />
-                        </View>
-                        <View style={styles.mb6}>
-                            <Text style={[styles.mb1, styles.formLabel]}>
-                                {this.props.translate('common.password')}
-                            </Text>
-                            <TextInput
-                                style={styles.textInput}
-                                value={this.state.password}
-                                onChangeText={password => this.setState({password})}
-                                secureTextEntry
-                                autoCompleteType="password"
-                                textContentType="password"
-                                onSubmitEditing={this.submitForm}
+                {({didScreenTransitionEnd}) => {
+                    if (didScreenTransitionEnd && !this.state.didScreenTransitionEnd) {
+                        this.setState({didScreenTransitionEnd});
+                    }
+                    return (
+                        <KeyboardAvoidingView>
+                            <HeaderWithCloseButton
+                                title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                                    ? 'addSecondaryLoginPage.addPhoneNumber'
+                                    : 'addSecondaryLoginPage.addEmailAddress')}
+                                shouldShowBackButton
+                                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
+                                onCloseButtonPress={() => Navigation.dismissModal()}
                             />
-                        </View>
-                        {!_.isEmpty(this.props.user.error) && (
-                            <Text style={styles.formError}>
-                                {this.props.user.error}
-                            </Text>
-                        )}
-                    </ScrollView>
-                    <FixedFooter style={[styles.flexGrow0]}>
-                        <Button
-                            success
-                            style={[styles.mb2]}
-                            isDisabled={this.validateForm()}
-                            isLoading={this.props.user.loading}
-                            text={this.props.translate('addSecondaryLoginPage.sendValidation')}
-                            onPress={this.submitForm}
-                        />
-                    </FixedFooter>
-                </KeyboardAvoidingView>
+                            <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                                <Text style={[styles.mb6, styles.textP]}>
+                                    {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                                        ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
+                                        : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
+                                </Text>
+                                <View style={styles.mb6}>
+                                    <Text style={[styles.mb1, styles.formLabel]}>
+                                        {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                                            ? 'common.phoneNumber'
+                                            : 'profilePage.emailAddress')}
+                                    </Text>
+                                    <TextInput
+                                        ref={e => this.phoneNumberInputRef = e}
+                                        style={styles.textInput}
+                                        value={this.state.login}
+                                        onChangeText={login => this.setState({login})}
+                                        keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
+                                            ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
+                                        returnKeyType="done"
+                                    />
+                                </View>
+                                <View style={styles.mb6}>
+                                    <Text style={[styles.mb1, styles.formLabel]}>
+                                        {this.props.translate('common.password')}
+                                    </Text>
+                                    <TextInput
+                                        style={styles.textInput}
+                                        value={this.state.password}
+                                        onChangeText={password => this.setState({password})}
+                                        secureTextEntry
+                                        autoCompleteType="password"
+                                        textContentType="password"
+                                        onSubmitEditing={this.submitForm}
+                                    />
+                                </View>
+                                {!_.isEmpty(this.props.user.error) && (
+                                    <Text style={styles.formError}>
+                                        {this.props.user.error}
+                                    </Text>
+                                )}
+                            </ScrollView>
+                            <FixedFooter style={[styles.flexGrow0]}>
+                                <Button
+                                    success
+                                    style={[styles.mb2]}
+                                    isDisabled={this.validateForm()}
+                                    isLoading={this.props.user.loading}
+                                    text={this.props.translate('addSecondaryLoginPage.sendValidation')}
+                                    onPress={this.submitForm}
+                                />
+                            </FixedFooter>
+                        </KeyboardAvoidingView>
+                    );
+                }}
             </ScreenWrapper>
         );
     }

From 82ff7ff46e660ef09e161e686a10027504b7198b Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Tue, 22 Jun 2021 11:12:44 -0700
Subject: [PATCH 2/3] Use onTransitionEnd instead of duplicating state

---
 src/pages/settings/AddSecondaryLoginPage.js | 138 +++++++++-----------
 1 file changed, 62 insertions(+), 76 deletions(-)

diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
index ba3bf3e301fe..74594d6c83b8 100755
--- a/src/pages/settings/AddSecondaryLoginPage.js
+++ b/src/pages/settings/AddSecondaryLoginPage.js
@@ -68,7 +68,6 @@ class AddSecondaryLoginPage extends Component {
         this.state = {
             login: '',
             password: '',
-            didScreenTransitionEnd: false,
         };
         this.formType = props.route.params.type;
         this.submitForm = this.submitForm.bind(this);
@@ -77,12 +76,6 @@ class AddSecondaryLoginPage extends Component {
         this.phoneNumberInputRef = null;
     }
 
-    componentDidUpdate(prevProps, prevState) {
-        if (!prevState.didScreenTransitionEnd && this.state.didScreenTransitionEnd) {
-            this.phoneNumberInputRef.focus();
-        }
-    }
-
     componentWillUnmount() {
         Onyx.merge(ONYXKEYS.USER, {error: ''});
     }
@@ -111,76 +104,69 @@ class AddSecondaryLoginPage extends Component {
 
     render() {
         return (
-            <ScreenWrapper>
-                {({didScreenTransitionEnd}) => {
-                    if (didScreenTransitionEnd && !this.state.didScreenTransitionEnd) {
-                        this.setState({didScreenTransitionEnd});
-                    }
-                    return (
-                        <KeyboardAvoidingView>
-                            <HeaderWithCloseButton
-                                title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                                    ? 'addSecondaryLoginPage.addPhoneNumber'
-                                    : 'addSecondaryLoginPage.addEmailAddress')}
-                                shouldShowBackButton
-                                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                                onCloseButtonPress={() => Navigation.dismissModal()}
+            <ScreenWrapper onTransitionEnd={() => this.phoneNumberInputRef.focus()}>
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                            ? 'addSecondaryLoginPage.addPhoneNumber'
+                            : 'addSecondaryLoginPage.addEmailAddress')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
+                    />
+                    <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                        <Text style={[styles.mb6, styles.textP]}>
+                            {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                                ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
+                                : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
+                        </Text>
+                        <View style={styles.mb6}>
+                            <Text style={[styles.mb1, styles.formLabel]}>
+                                {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                                    ? 'common.phoneNumber'
+                                    : 'profilePage.emailAddress')}
+                            </Text>
+                            <TextInput
+                                ref={e => this.phoneNumberInputRef = e}
+                                style={styles.textInput}
+                                value={this.state.login}
+                                onChangeText={login => this.setState({login})}
+                                keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
+                                    ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
+                                returnKeyType="done"
+                            />
+                        </View>
+                        <View style={styles.mb6}>
+                            <Text style={[styles.mb1, styles.formLabel]}>
+                                {this.props.translate('common.password')}
+                            </Text>
+                            <TextInput
+                                style={styles.textInput}
+                                value={this.state.password}
+                                onChangeText={password => this.setState({password})}
+                                secureTextEntry
+                                autoCompleteType="password"
+                                textContentType="password"
+                                onSubmitEditing={this.submitForm}
                             />
-                            <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                                <Text style={[styles.mb6, styles.textP]}>
-                                    {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                                        ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
-                                        : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
-                                </Text>
-                                <View style={styles.mb6}>
-                                    <Text style={[styles.mb1, styles.formLabel]}>
-                                        {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                                            ? 'common.phoneNumber'
-                                            : 'profilePage.emailAddress')}
-                                    </Text>
-                                    <TextInput
-                                        ref={e => this.phoneNumberInputRef = e}
-                                        style={styles.textInput}
-                                        value={this.state.login}
-                                        onChangeText={login => this.setState({login})}
-                                        keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
-                                            ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
-                                        returnKeyType="done"
-                                    />
-                                </View>
-                                <View style={styles.mb6}>
-                                    <Text style={[styles.mb1, styles.formLabel]}>
-                                        {this.props.translate('common.password')}
-                                    </Text>
-                                    <TextInput
-                                        style={styles.textInput}
-                                        value={this.state.password}
-                                        onChangeText={password => this.setState({password})}
-                                        secureTextEntry
-                                        autoCompleteType="password"
-                                        textContentType="password"
-                                        onSubmitEditing={this.submitForm}
-                                    />
-                                </View>
-                                {!_.isEmpty(this.props.user.error) && (
-                                    <Text style={styles.formError}>
-                                        {this.props.user.error}
-                                    </Text>
-                                )}
-                            </ScrollView>
-                            <FixedFooter style={[styles.flexGrow0]}>
-                                <Button
-                                    success
-                                    style={[styles.mb2]}
-                                    isDisabled={this.validateForm()}
-                                    isLoading={this.props.user.loading}
-                                    text={this.props.translate('addSecondaryLoginPage.sendValidation')}
-                                    onPress={this.submitForm}
-                                />
-                            </FixedFooter>
-                        </KeyboardAvoidingView>
-                    );
-                }}
+                        </View>
+                        {!_.isEmpty(this.props.user.error) && (
+                            <Text style={styles.formError}>
+                                {this.props.user.error}
+                            </Text>
+                        )}
+                    </ScrollView>
+                    <FixedFooter style={[styles.flexGrow0]}>
+                        <Button
+                            success
+                            style={[styles.mb2]}
+                            isDisabled={this.validateForm()}
+                            isLoading={this.props.user.loading}
+                            text={this.props.translate('addSecondaryLoginPage.sendValidation')}
+                            onPress={this.submitForm}
+                        />
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }

From 9df65ad7837750b04a0280964791a488bfc08a8f Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Tue, 22 Jun 2021 11:32:33 -0700
Subject: [PATCH 3/3] Fix variable naming and add falsey check for function

---
 src/pages/settings/AddSecondaryLoginPage.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
index 74594d6c83b8..cf65b4b4ad65 100755
--- a/src/pages/settings/AddSecondaryLoginPage.js
+++ b/src/pages/settings/AddSecondaryLoginPage.js
@@ -104,7 +104,12 @@ class AddSecondaryLoginPage extends Component {
 
     render() {
         return (
-            <ScreenWrapper onTransitionEnd={() => this.phoneNumberInputRef.focus()}>
+            <ScreenWrapper onTransitionEnd={() => {
+                if (this.phoneNumberInputRef) {
+                    this.phoneNumberInputRef.focus();
+                }
+            }}
+            >
                 <KeyboardAvoidingView>
                     <HeaderWithCloseButton
                         title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
@@ -127,7 +132,7 @@ class AddSecondaryLoginPage extends Component {
                                     : 'profilePage.emailAddress')}
                             </Text>
                             <TextInput
-                                ref={e => this.phoneNumberInputRef = e}
+                                ref={el => this.phoneNumberInputRef = el}
                                 style={styles.textInput}
                                 value={this.state.login}
                                 onChangeText={login => this.setState({login})}