feat: disable slide gesture around confirm slider button

Signed-off-by: Prakhar Agarwal <[email protected]>

app/screens/send-bitcoin-screen/send-bitcoin-confirmation-screen.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { ActivityIndicator, TouchableOpacity, View } from "react-native"
+import { PanGestureHandler } from "react-native-gesture-handler"
 import ReactNativeHapticFeedback from "react-native-haptic-feedback"
 
 import { gql } from "@apollo/client"
@@ -422,13 +423,18 @@ const SendBitcoinConfirmationScreen: React.FC<Props> = ({ route }) => {
           </View>
         ) : null}
         <View style={styles.buttonContainer}>
-          <GaloySliderButton
-            isLoading={sendPaymentLoading}
-            initialText={LL.SendBitcoinConfirmationScreen.slideToConfirm()}
-            loadingText={LL.SendBitcoinConfirmationScreen.slideConfirming()}
-            onSwipe={handleSendPayment}
-            disabled={!validAmount || hasAttemptedSend}
-          />
+          {/* disable slide gestures in area around the slider button */}
+          <PanGestureHandler>
+            <View style={{ styles.sliderContainer }}>
+              <GaloySliderButton
+                isLoading={sendPaymentLoading}
+                initialText={LL.SendBitcoinConfirmationScreen.slideToConfirm()}
+                loadingText={LL.SendBitcoinConfirmationScreen.slideConfirming()}
+                onSwipe={handleSendPayment}
+                disabled={!validAmount || hasAttemptedSend}
+              />
+            </View>
+          </PanGestureHandler>
         </View>
       </View>
     </Screen>
@@ -442,6 +448,7 @@ const useStyles = makeStyles(({ colors }) => ({
     flex: 1,
   },
   fieldContainer: {
+    paddingHorizontal: 20,
     marginBottom: 12,
   },
   noteText: {
@@ -537,7 +544,7 @@ const useStyles = makeStyles(({ colors }) => ({
     alignItems: "center",
   },
   screenStyle: {
-    padding: 20,
+    paddingTop: 20,
     flexGrow: 1,
   },
   iconContainer: {
@@ -560,4 +567,7 @@ const useStyles = makeStyles(({ colors }) => ({
     justifyContent: "space-between",
     alignItems: "center",
   },
+  sliderContainer: {
+    padding: 20
+  }
 }))