From c344574ff193241e7cbd982fe26ac1b4dcf4c4be Mon Sep 17 00:00:00 2001
From: Dustin Bailey <bailey.dust@gmail.com>
Date: Wed, 8 Dec 2021 16:04:30 -0800
Subject: [PATCH] Fix: Android checkout Screen Scrolling

A nested View had unbounded height which impared automated test's ability to scroll to checkout btn on some devices.
-Tested on Galaxy Nexus API 29 x86
-Flavor & btn were added to the footer component of the FlatList
-Some cleanup around styling
---
 src/screens/CheckoutScreen.tsx | 61 ++++++++++++++++------------------
 1 file changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/screens/CheckoutScreen.tsx b/src/screens/CheckoutScreen.tsx
index 3555edd..c3a82d2 100644
--- a/src/screens/CheckoutScreen.tsx
+++ b/src/screens/CheckoutScreen.tsx
@@ -122,6 +122,30 @@ const CheckoutScreen = (props) => {
         }
         return response;
     };
+    const renderFooter = () =>{
+      return (
+        <View>
+          <View style={styles.flavorContainer}>
+                    {/* <Image
+                    source={require('../assets/sentry-logo.png')}
+                    style={styles.logo}
+                    /> */}
+                    <Text style={{marginLeft: 5, fontWeight: '500'}}>
+                    Deliver to Sentry - San Francisco {contactInfoData['zipCode']}
+                    </Text>
+                </View>
+                <View>
+                    <GradientBtn
+                    buttonText={styles.buttonText}
+                    colors={['#002626','#001414']}
+                    style={styles.linearGradient}
+                    onPress={() => performCheckoutOnServer()}
+                    progressState={orderStatusUI}
+                    name={'Place your order'}></GradientBtn>
+                </View>
+        </View>
+      )
+    }
 
     return (
         <View style={styles.screen}>
@@ -132,10 +156,12 @@ const CheckoutScreen = (props) => {
                     fontSize: 18,
                     fontWeight: '600',
                 }}>Contact Info</Text>
-            <View>
+            <View style={{flex:1}}>
                 <FlatList
                     data={items}
                     appDispatch={dispatch}
+                    ListFooterComponent={renderFooter}
+                    ListFooterComponentStyle={styles.flavorContainer}
                     renderItem={({item}) => {
                         return (
                             <SafeAreaView>
@@ -152,24 +178,7 @@ const CheckoutScreen = (props) => {
                     }}
                     keyExtractor={(item) => item.id}
                 />
-                <View style={styles.flavorContainer}>
-                    {/* <Image
-                    source={require('../assets/sentry-logo.png')}
-                    style={styles.logo}
-                    /> */}
-                    <Text style={{marginLeft: 5, fontWeight: '500'}}>
-                    Deliver to Sentry - San Francisco {contactInfoData['zipCode']}
-                    </Text>
-                </View>
-                <View style={styles.orderBtnContainer}>
-                    <GradientBtn
-                    buttonText={styles.buttonText}
-                    colors={['#002626','#001414']}
-                    style={styles.linearGradient}
-                    onPress={() => performCheckoutOnServer()}
-                    progressState={orderStatusUI}
-                    name={'Place your order'}></GradientBtn>
-                </View>
+                
             </View>
         </View>
     );
@@ -214,20 +223,6 @@ const styles = StyleSheet.create({
     width:300,
     margin:10,
   },
-  orderBtnContainer: {
-    height: 50,
-
-    paddingLeft: 20,
-    paddingRight: 20,
-    // borderRadius: 2,
-    borderWidth: 1,
-    borderColor: 'white',
-    flexDirection: 'column',
-    justifyContent: 'center',
-
-    width:300,
-    margin:10,
-  },
   buttonText: {
     textAlign: 'center',
     fontSize: 16,