chore(runway): cherry-pick fix: cp-7.58.0 Fix swipe gesture navigation in send flow amount page for Android (#21605)

- fix: cp-7.58.0 Fix swipe gesture navigation in send flow amount page
for Android (#21518)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to fix Android issue where amount keyboard appears behind
the gestures navigation.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fix send flow keyboard to not appear behind gesture
navigation in mobile

## **Related issues**

Fixes: #21383

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

Android:
<img width="689" height="1416" alt="before android"

src="https://github.com/user-attachments/assets/5079c87b-a100-4f1a-bd99-4d325a7073b2"
/>

iOS:
<img width="696" height="1384" alt="before ios"

src="https://github.com/user-attachments/assets/b116d4e0-11f6-41a4-a16f-8873b59f03b8"
/>

### **After**

Android: 
<img width="711" height="1460" alt="after android"

src="https://github.com/user-attachments/assets/8cc6bc27-38fe-4656-a681-48785e8be1c6"
/>

iOS:
<img width="696" height="1384" alt="after ios"

src="https://github.com/user-attachments/assets/1500b133-db31-4264-b88f-60353b9f3434"
/>


## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling

guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adjust send amount screen layout to respect safe areas and avoid
Android gesture navigation overlapping the keyboard.
> 
> - **Send Flow - Amount Screen**:
> - Replace `ScrollView` with `SafeAreaView` and set platform-specific
`edges` to handle safe areas.
> - Update `container` style to use `flex: 1` (remove `minHeight:
'100%'`).
>   - Adjust amount keyboard wrapper (`edit-amount-keyboard.styles.ts`):
>     - Set `paddingBottom` via `Device.isIos() ? 20 : 12`.
>     - Remove vertical margins and set `marginBottom: 0`.
> - **Misc**:
>   - Import `Device` for platform checks and update related imports.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
cdc6069. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[aa8808c](aa8808c)

Co-authored-by: OGPoyraz <[email protected]>

Author: runway-github[bot]

app/components/Views/confirmations/components/edit-amount-keyboard/edit-amount-keyboard.styles.ts

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import Device from '../../../../../util/device';
 import { Theme } from '../../../../../util/theme/models';
 
 const styleSheet = (params: { theme: Theme }) =>
@@ -11,8 +12,8 @@ const styleSheet = (params: { theme: Theme }) =>
       borderTopLeftRadius: 12,
       borderTopRightRadius: 12,
       padding: 12,
-      paddingBottom: 16,
-      marginVertical: 12,
+      marginBottom: 0,
+      paddingBottom: Device.isIos() ? 20 : 12,
     },
     percentageButton: {
       borderRadius: 12,

app/components/Views/confirmations/components/send/amount/amount.styles.ts

@@ -44,9 +44,9 @@ export const styleSheet = (params: {
     },
     container: {
       backgroundColor: theme.colors.background.default,
+      flex: 1,
       flexDirection: FlexDirection.Column,
       justifyContent: JustifyContent.spaceBetween,
-      minHeight: '100%',
     },
     currencyTag: {
       alignSelf: 'center',

app/components/Views/confirmations/components/send/amount/amount.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Nft } from '@metamask/assets-controllers';
-import { ScrollView, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { strings } from '../../../../../../../locales/i18n';
 import Icon, {
@@ -18,6 +19,7 @@ import Text, {
 import { selectPrimaryCurrency } from '../../../../../../selectors/settings';
 import CollectibleMedia from '../../../../../UI/CollectibleMedia';
 import { useStyles } from '../../../../../hooks/useStyles';
+import Device from '../../../../../../util/device';
 import { AssetType, TokenStandard } from '../../../types/token';
 import { formatToFixedDecimals } from '../../../utils/send';
 import { useAmountSelectionMetrics } from '../../../hooks/send/metrics/useAmountSelectionMetrics';
@@ -52,6 +54,7 @@ export const Amount = () => {
     contentLength: amount.length + assetDisplaySymbol.length,
     isNFT,
   });
+  const isIos = Device.isIos();
   const { setAmountInputTypeFiat, setAmountInputTypeToken } =
     useAmountSelectionMetrics();
   useRouteParams();
@@ -105,7 +108,10 @@ export const Amount = () => {
   }
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
+    <SafeAreaView
+      edges={isIos ? ['left', 'right'] : ['left', 'right', 'bottom']}
+      style={styles.container}
+    >
       <View style={styles.topSection}>
         {isNFT && (
           <View style={styles.nftImageWrapper}>
@@ -170,6 +176,6 @@ export const Amount = () => {
           updateAmount={setAmount}
         />
       </View>
-    </ScrollView>
+    </SafeAreaView>
   );
 };