Merge pull request #2964 from BlueWallet/limpbrains-amount-toolbar

FIX: amount toolbar should be hidden on Android by default

BlueComponents.js

@@ -829,80 +829,6 @@ export const BlueSpacing10 = props => {
   return <View {...props} style={{ height: 10, opacity: 0 }} />;
 };
 
-export const BlueUseAllFundsButton = ({ balance, canUseAll, onUseAllPressed }) => {
-  const { colors } = useTheme();
-  const inputView = (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: 'row',
-        maxHeight: 44,
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: colors.inputBackgroundColor,
-      }}
-    >
-      <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
-        <Text
-          style={{
-            color: colors.alternativeTextColor,
-            fontSize: 16,
-            marginLeft: 8,
-            marginRight: 0,
-            paddingRight: 0,
-            paddingLeft: 0,
-            paddingTop: 12,
-            paddingBottom: 12,
-          }}
-        >
-          {loc.send.input_total}
-        </Text>
-        {canUseAll ? (
-          <BlueButtonLink
-            onPress={onUseAllPressed}
-            style={{ marginLeft: 8, paddingRight: 0, paddingLeft: 0, paddingTop: 12, paddingBottom: 12 }}
-            title={`${balance} ${BitcoinUnit.BTC}`}
-          />
-        ) : (
-          <Text
-            style={{
-              color: colors.alternativeTextColor,
-              fontSize: 16,
-              marginLeft: 8,
-              marginRight: 0,
-              paddingRight: 0,
-              paddingLeft: 0,
-              paddingTop: 12,
-              paddingBottom: 12,
-            }}
-          >
-            {balance} {BitcoinUnit.BTC}
-          </Text>
-        )}
-      </View>
-      <View style={{ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
-        <BlueButtonLink
-          style={{ paddingRight: 8, paddingLeft: 0, paddingTop: 12, paddingBottom: 12 }}
-          title={loc.send.input_done}
-          onPress={Keyboard.dismiss}
-        />
-      </View>
-    </View>
-  );
-
-  if (Platform.OS === 'ios') {
-    return <InputAccessoryView nativeID={BlueUseAllFundsButton.InputAccessoryViewID}>{inputView}</InputAccessoryView>;
-  } else {
-    return <KeyboardAvoidingView style={{ height: 44 }}>{inputView}</KeyboardAvoidingView>;
-  }
-};
-BlueUseAllFundsButton.InputAccessoryViewID = 'useMaxInputAccessoryViewID';
-BlueUseAllFundsButton.propTypes = {
-  balance: PropTypes.string.isRequired,
-  canUseAll: PropTypes.bool.isRequired,
-  onUseAllPressed: PropTypes.func.isRequired,
-};
-
 export const BlueDismissKeyboardInputAccessory = () => {
   const { colors } = useTheme();
   BlueDismissKeyboardInputAccessory.InputAccessoryViewID = 'BlueDismissKeyboardInputAccessory';

components/InputAccessoryAllFunds.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from 'react-native-elements';
+import { InputAccessoryView, StyleSheet, Keyboard, Platform, View } from 'react-native';
+import { useTheme } from '@react-navigation/native';
+
+import loc from '../loc';
+import { BitcoinUnit } from '../models/bitcoinUnits';
+import { BlueButtonLink } from '../BlueComponents';
+
+const InputAccessoryAllFunds = ({ balance, canUseAll, onUseAllPressed }) => {
+  const { colors } = useTheme();
+
+  const stylesHook = StyleSheet.create({
+    root: {
+      backgroundColor: colors.inputBackgroundColor,
+    },
+    totalLabel: {
+      color: colors.alternativeTextColor,
+    },
+    totalCanNot: {
+      color: colors.alternativeTextColor,
+    },
+  });
+
+  const inputView = (
+    <View style={[styles.root, stylesHook.root]}>
+      <View style={styles.left}>
+        <Text style={[styles.totalLabel, stylesHook.totalLabel]}>{loc.send.input_total}</Text>
+        {canUseAll ? (
+          <BlueButtonLink onPress={onUseAllPressed} style={styles.totalCan} title={`${balance} ${BitcoinUnit.BTC}`} />
+        ) : (
+          <Text style={[styles.totalCanNot, stylesHook.totalCanNot]}>
+            {balance} {BitcoinUnit.BTC}
+          </Text>
+        )}
+      </View>
+      <View style={styles.right}>
+        <BlueButtonLink style={styles.done} title={loc.send.input_done} onPress={Keyboard.dismiss} />
+      </View>
+    </View>
+  );
+
+  if (Platform.OS === 'ios') {
+    return <InputAccessoryView nativeID={InputAccessoryAllFunds.InputAccessoryViewID}>{inputView}</InputAccessoryView>;
+  }
+
+  // androidPlaceholder View is needed to force shrink screen (KeyboardAvoidingView) where this component is used
+  return (
+    <>
+      <View style={styles.androidPlaceholder} />
+      <View style={styles.androidAbsolute}>{inputView}</View>
+    </>
+  );
+};
+
+InputAccessoryAllFunds.InputAccessoryViewID = 'useMaxInputAccessoryViewID';
+
+InputAccessoryAllFunds.propTypes = {
+  balance: PropTypes.string.isRequired,
+  canUseAll: PropTypes.bool.isRequired,
+  onUseAllPressed: PropTypes.func.isRequired,
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'row',
+    maxHeight: 44,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  left: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  totalLabel: {
+    fontSize: 16,
+    marginLeft: 8,
+    marginRight: 0,
+    paddingRight: 0,
+    paddingLeft: 0,
+    paddingTop: 12,
+    paddingBottom: 12,
+  },
+  totalCan: {
+    marginLeft: 8,
+    paddingRight: 0,
+    paddingLeft: 0,
+    paddingTop: 12,
+    paddingBottom: 12,
+  },
+  totalCanNot: {
+    fontSize: 16,
+    marginLeft: 8,
+    marginRight: 0,
+    paddingRight: 0,
+    paddingLeft: 0,
+    paddingTop: 12,
+    paddingBottom: 12,
+  },
+  right: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+  },
+  done: {
+    paddingRight: 8,
+    paddingLeft: 0,
+    paddingTop: 12,
+    paddingBottom: 12,
+  },
+  androidPlaceholder: {
+    height: 44,
+  },
+  androidAbsolute: {
+    height: 44,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+export default InputAccessoryAllFunds;

screen/send/details.js

@@ -25,14 +25,7 @@ import RNFS from 'react-native-fs';
 import BigNumber from 'bignumber.js';
 import * as bitcoin from 'bitcoinjs-lib';
 
-import {
+import { BlueButton, BlueDismissKeyboardInputAccessory, BlueListItem, BlueLoading, BlueText } from '../../BlueComponents';
-  BlueButton,
-  BlueDismissKeyboardInputAccessory,
-  BlueListItem,
-  BlueLoading,
-  BlueText,
-  BlueUseAllFundsButton,
-} from '../../BlueComponents';
 import { navigationStyleTx } from '../../components/navigationStyle';
 import NetworkTransactionFees, { NetworkTransactionFee } from '../../models/networkTransactionFees';
 import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
@@ -44,6 +37,7 @@ import CoinsSelected from '../../components/CoinsSelected';
 import BottomModal from '../../components/BottomModal';
 import AddressInput from '../../components/AddressInput';
 import AmountInput from '../../components/AmountInput';
+import InputAccessoryAllFunds from '../../components/InputAccessoryAllFunds';
 import { AbstractHDElectrumWallet } from '../../class/wallets/abstract-hd-electrum-wallet';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 const currency = require('../../blue_modules/currency');
@@ -66,7 +60,7 @@ const SendDetails = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [wallet, setWallet] = useState(null);
   const [walletSelectionOrCoinsSelectedHidden, setWalletSelectionOrCoinsSelectedHidden] = useState(false);
-  const [isAmountToolbarVisibleForAndroid, setIsAmountToolbarVisibleForAndroid] = useState(true);
+  const [isAmountToolbarVisibleForAndroid, setIsAmountToolbarVisibleForAndroid] = useState(false);
   const [isFeeSelectionModalVisible, setIsFeeSelectionModalVisible] = useState(false);
   const [optionsVisible, setOptionsVisible] = useState(false);
   const [isTransactionReplaceable, setIsTransactionReplaceable] = useState(false);
@@ -1175,7 +1169,7 @@ const SendDetails = () => {
             });
           }}
           unit={units[index] || amountUnit}
-          inputAccessoryViewID={BlueUseAllFundsButton.InputAccessoryViewID}
+          inputAccessoryViewID={InputAccessoryAllFunds.InputAccessoryViewID}
         />
         <AddressInput
           onChangeText={text => {
@@ -1278,9 +1272,9 @@ const SendDetails = () => {
         </View>
         <BlueDismissKeyboardInputAccessory />
         {Platform.select({
-          ios: <BlueUseAllFundsButton canUseAll={balance > 0} onUseAllPressed={onUseAllPressed} balance={allBalance} />,
+          ios: <InputAccessoryAllFunds canUseAll={balance > 0} onUseAllPressed={onUseAllPressed} balance={allBalance} />,
           android: isAmountToolbarVisibleForAndroid && (
-            <BlueUseAllFundsButton canUseAll={balance > 0} onUseAllPressed={onUseAllPressed} balance={allBalance} />
+            <InputAccessoryAllFunds canUseAll={balance > 0} onUseAllPressed={onUseAllPressed} balance={allBalance} />
           ),
         })}