From df32a981d496378982f0da2c6d5eb54666d40b4d Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Fri, 9 Dec 2022 17:35:11 -0800
Subject: [PATCH 1/2] Use measureLayout to calculate scrolling

---
 src/components/Form.js | 31 ++++---------------------------
 1 file changed, 4 insertions(+), 27 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 72ee4afc6b00..41a67a5dc1cd 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -79,7 +79,6 @@ class Form extends React.Component {
 
         this.inputRefs = {};
         this.touchedInputs = {};
-        this.childPosition = {};
 
         this.setTouchedInput = this.setTouchedInput.bind(this);
         this.validate = this.validate.bind(this);
@@ -109,21 +108,6 @@ class Form extends React.Component {
         return _.first(_.keys(hasStateErrors ? this.state.erorrs : this.props.formState.errorFields));
     }
 
-    setPosition(element, position) {
-        // Some elements might not have props defined, e.g. Text
-        if (!element.props) {
-            return;
-        }
-
-        if (!element.props.inputID && element.props.children) {
-            _.forEach(element.props.children, (child) => {
-                this.setPosition(child, position);
-            });
-        } else {
-            this.childPosition[element.props.inputID] = position;
-        }
-    }
-
     submit() {
         // Return early if the form is already submitting to avoid duplicate submission
         if (this.props.formState.isLoading) {
@@ -268,16 +252,7 @@ class Form extends React.Component {
                     ref={el => this.form = el}
                 >
                     <View style={[this.props.style]}>
-                        {_.map(this.childrenWrapperWithProps(this.props.children), child => (
-                            <View
-                                key={child.key}
-                                onLayout={(event) => {
-                                    this.setPosition(child, event.nativeEvent.layout.y);
-                                }}
-                            >
-                                {child}
-                            </View>
-                        ))}
+                        {this.childrenWrapperWithProps(this.props.children)}
                         {this.props.isSubmitButtonVisible && (
                         <FormAlertWithSubmitButton
                             buttonText={this.props.submitButtonText}
@@ -289,10 +264,12 @@ class Form extends React.Component {
                                 const errors = !_.isEmpty(this.state.errors) ? this.state.errors : this.props.formState.errorFields;
                                 const focusKey = _.find(_.keys(this.inputRefs), key => _.keys(errors).includes(key));
                                 const focusInput = this.inputRefs[focusKey];
-                                this.form.scrollTo({y: this.childPosition[focusKey], animated: false});
                                 if (focusInput.focus && typeof focusInput.focus === 'function') {
                                     focusInput.focus();
                                 }
+
+                                // We substract 10 to scroll slightly above the input
+                                focusInput.measureLayout(this.form, (x, y) => this.form.scrollTo({y: y - 10, animated: false}));
                             }}
                             containerStyles={[styles.mh0, styles.mt5]}
                             enabledWhenOffline={this.props.enabledWhenOffline}

From f2ac03ba71b63342d9e7c53e382dee6d4aa4bfff Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Fri, 9 Dec 2022 17:37:28 -0800
Subject: [PATCH 2/2] Call measureLayout safely

---
 src/components/Form.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 41a67a5dc1cd..29abfe53e2fa 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -269,7 +269,9 @@ class Form extends React.Component {
                                 }
 
                                 // We substract 10 to scroll slightly above the input
-                                focusInput.measureLayout(this.form, (x, y) => this.form.scrollTo({y: y - 10, animated: false}));
+                                if (focusInput.measureLayout && typeof focusInput.measureLayout === 'function') {
+                                    focusInput.measureLayout(this.form, (x, y) => this.form.scrollTo({y: y - 10, animated: false}));
+                                }
                             }}
                             containerStyles={[styles.mh0, styles.mt5]}
                             enabledWhenOffline={this.props.enabledWhenOffline}