Merge pull request #6950 from BlueWallet/memorycon

FIX: memory consumption bug by RN component

BlueComponents.js

@@ -7,7 +7,6 @@ import {
   I18nManager,
   InputAccessoryView,
   Keyboard,
-  KeyboardAvoidingView,
   Platform,
   StyleSheet,
   TextInput,
@@ -188,7 +187,7 @@ export const BlueDoneAndDismissKeyboardInputAccessory = props => {
   if (Platform.OS === 'ios') {
     return <InputAccessoryView nativeID={BlueDoneAndDismissKeyboardInputAccessory.InputAccessoryViewID}>{inputView}</InputAccessoryView>;
   } else {
-    return <KeyboardAvoidingView>{inputView}</KeyboardAvoidingView>;
+    return inputView;
   }
 };
 

screen/lnd/lndCreateInvoice.js

@@ -5,7 +5,6 @@ import {
   I18nManager,
   Image,
   Keyboard,
-  KeyboardAvoidingView,
   Platform,
   StyleSheet,
   Text,
@@ -397,7 +396,6 @@ const LNDCreateInvoice = () => {
     <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
       <View style={[styles.root, styleHooks.root]}>
         <View style={[styles.amount, styleHooks.amount]}>
-          <KeyboardAvoidingView enabled={!Platform.isPad} behavior="position">
           <AmountInput
             isLoading={isLoading}
             amount={amount}
@@ -423,7 +421,6 @@ const LNDCreateInvoice = () => {
           </View>
           <BlueDismissKeyboardInputAccessory />
           {renderCreateButton()}
-          </KeyboardAvoidingView>
         </View>
         {renderWalletSelectionButton()}
       </View>

screen/lnd/scanLndInvoice.js

@@ -1,17 +1,6 @@
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import React, { useCallback, useEffect, useState } from 'react';
-import {
+import { ActivityIndicator, I18nManager, Keyboard, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-  ActivityIndicator,
-  I18nManager,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
 import { Icon } from '@rneui/themed';
 
 import { btcToSatoshi, fiatToBTC } from '../../blue_modules/currency';
@@ -302,8 +291,13 @@ const ScanLndInvoice = () => {
   return (
     <SafeArea style={stylesHook.root}>
       <View style={[styles.root, stylesHook.root]}>
-        <ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
+        <ScrollView
-          <KeyboardAvoidingView enabled behavior="position" keyboardVerticalOffset={20}>
+          contentContainerStyle={styles.scroll}
+          keyboardShouldPersistTaps="handled"
+          automaticallyAdjustContentInsets
+          automaticallyAdjustKeyboardInsets
+          contentInsetAdjustmentBehavior="automatic"
+        >
           <View style={styles.scrollMargin}>
             <AmountInput
               pointerEvents={isAmountInitiallyEmpty ? 'auto' : 'none'}
@@ -357,7 +351,7 @@ const ScanLndInvoice = () => {
               )}
             </BlueCard>
           </BlueCard>
-          </KeyboardAvoidingView>
+
           {renderWalletSelectionButton()}
         </ScrollView>
       </View>

screen/send/Broadcast.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useRoute, RouteProp } from '@react-navigation/native';
 import * as bitcoin from 'bitcoinjs-lib';
-import { ActivityIndicator, Keyboard, KeyboardAvoidingView, Linking, Platform, StyleSheet, TextInput, View } from 'react-native';
+import { ActivityIndicator, Keyboard, Linking, StyleSheet, TextInput, View } from 'react-native';
 
 import * as BlueElectrum from '../../blue_modules/BlueElectrum';
-import { isTablet } from '../../blue_modules/environment';
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
 import Notifications from '../../blue_modules/notifications';
 import {
@@ -125,7 +124,6 @@ const Broadcast: React.FC = () => {
 
   return (
     <SafeArea>
-      <KeyboardAvoidingView enabled={!isTablet} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
       <View style={styles.wrapper} testID="BroadcastView">
         {BROADCAST_RESULT.success !== broadcastResult && (
           <BlueCard style={styles.mainCard}>
@@ -162,7 +160,6 @@ const Broadcast: React.FC = () => {
         )}
         {BROADCAST_RESULT.success === broadcastResult && tx && <SuccessScreen tx={tx} />}
       </View>
-      </KeyboardAvoidingView>
     </SafeArea>
   );
 };

screen/send/SendDetails.tsx

@@ -10,7 +10,6 @@ import {
   FlatList,
   I18nManager,
   Keyboard,
-  KeyboardAvoidingView,
   LayoutAnimation,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -50,7 +49,6 @@ import { TOptions } from 'bip21';
 import assert from 'assert';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { SendDetailsStackParamList } from '../../navigation/SendDetailsStackParamList';
-import { isTablet } from '../../blue_modules/environment';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import { ContactList } from '../../class/contact-list';
 import { useStorage } from '../../hooks/context/useStorage';
@@ -1324,7 +1322,6 @@ const SendDetails = () => {
   return (
     <View style={[styles.root, stylesHook.root]} onLayout={e => setWidth(e.nativeEvent.layout.width)}>
       <View>
-        <KeyboardAvoidingView enabled={!isTablet} behavior="position">
         <FlatList
           keyboardShouldPersistTaps="always"
           scrollEnabled={addresses.length > 1}
@@ -1332,6 +1329,7 @@ const SendDetails = () => {
           renderItem={renderBitcoinTransactionInfoFields}
           horizontal
           ref={scrollView}
+          automaticallyAdjustKeyboardInsets
           pagingEnabled
           removeClippedSubviews={false}
           onMomentumScrollBegin={Keyboard.dismiss}
@@ -1383,7 +1381,6 @@ const SendDetails = () => {
           setCustomFee={setCustomFee}
           setFeePrecalc={setFeePrecalc}
         />
-        </KeyboardAvoidingView>
       </View>
       <BlueDismissKeyboardInputAccessory />
       {Platform.select({

screen/send/isItMyAddress.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { useRoute } from '@react-navigation/native';
-import { Keyboard, KeyboardAvoidingView, Platform, StyleSheet, TextInput, View } from 'react-native';
+import { Keyboard, StyleSheet, TextInput, View } from 'react-native';
 import { BlueButtonLink, BlueCard, BlueSpacing10, BlueSpacing20, BlueText } from '../../BlueComponents';
 import Button from '../../components/Button';
 import SafeArea from '../../components/SafeArea';
@@ -86,11 +86,6 @@ const IsItMyAddress = () => {
 
   return (
     <SafeArea style={styles.blueArea}>
-      <KeyboardAvoidingView
-        enabled={!Platform.isPad}
-        behavior={Platform.OS === 'ios' ? 'position' : null}
-        keyboardShouldPersistTaps="handled"
-      >
       <View style={styles.wrapper}>
         <BlueCard style={styles.mainCard}>
           <View style={[styles.input, stylesHooks.input]}>
@@ -131,7 +126,6 @@ const IsItMyAddress = () => {
           <BlueText testID="Result">{result}</BlueText>
         </BlueCard>
       </View>
-      </KeyboardAvoidingView>
     </SafeArea>
   );
 };

screen/settings/electrumSettings.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import {
   Alert,
   Keyboard,
-  KeyboardAvoidingView,
   Platform,
   Pressable,
   ScrollView,
@@ -284,7 +283,6 @@ export default class ElectrumSettings extends Component {
             {this.state.config.host}:{this.state.config.port}
           </BlueText>
         </BlueCard>
-        <KeyboardAvoidingView>
         <BlueCard>
           <View style={styles.inputWrap}>
             <TextInput
@@ -390,7 +388,6 @@ export default class ElectrumSettings extends Component {
             />
           ),
         })}
-        </KeyboardAvoidingView>
         {serverHistoryItems.length > 0 && !this.state.isLoading && (
           <BlueCard>
             <View style={styles.serverHistoryTitle}>
@@ -408,7 +405,12 @@ export default class ElectrumSettings extends Component {
 
   render() {
     return (
-      <ScrollView keyboardShouldPersistTaps="always" automaticallyAdjustContentInsets contentInsetAdjustmentBehavior="automatic">
+      <ScrollView
+        keyboardShouldPersistTaps="always"
+        automaticallyAdjustContentInsets
+        contentInsetAdjustmentBehavior="automatic"
+        automaticallyAdjustKeyboardInsets
+      >
         <ListItem
           Component={Pressable}
           title={loc.settings.electrum_offline_mode}

screen/transactions/CPFP.js

@@ -1,15 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { ActivityIndicator, Linking, ScrollView, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
-  ActivityIndicator,
-  KeyboardAvoidingView,
-  Linking,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import PropTypes from 'prop-types';
 import { Text } from '@rneui/themed';
@@ -161,7 +151,6 @@ export default class CPFP extends Component {
 
   renderStage1(text) {
     return (
-      <KeyboardAvoidingView enabled={!Platform.isPad} behavior="position">
       <SafeArea style={styles.root}>
         <BlueSpacing />
         <BlueCard style={styles.center}>
@@ -176,7 +165,6 @@ export default class CPFP extends Component {
           />
         </BlueCard>
       </SafeArea>
-      </KeyboardAvoidingView>
     );
   }
 

screen/wallets/Add.tsx

@@ -5,7 +5,6 @@ import {
   ActivityIndicator,
   Alert,
   Keyboard,
-  KeyboardAvoidingView,
   LayoutAnimation,
   Platform,
   ScrollView,
@@ -351,9 +350,8 @@ const WalletsAdd: React.FC = () => {
   };
 
   return (
-    <ScrollView style={stylesHook.root} testID="ScrollView">
+    <ScrollView style={stylesHook.root} testID="ScrollView" automaticallyAdjustKeyboardInsets>
       <BlueSpacing20 />
-      <KeyboardAvoidingView enabled behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={62}>
       <BlueFormLabel>{loc.wallets.add_wallet_name}</BlueFormLabel>
       <View style={[styles.label, stylesHook.label]}>
         <TextInput
@@ -475,7 +473,6 @@ const WalletsAdd: React.FC = () => {
           <ActivityIndicator />
         )}
       </View>
-      </KeyboardAvoidingView>
     </ScrollView>
   );
 };

screen/wallets/ViewEditMultisigCosigners.tsx

@@ -7,7 +7,6 @@ import {
   FlatList,
   InteractionManager,
   Keyboard,
-  KeyboardAvoidingView,
   LayoutAnimation,
   ListRenderItemInfo,
   Platform,
@@ -17,7 +16,7 @@ import {
   View,
 } from 'react-native';
 import { Badge, Icon } from '@rneui/themed';
-import { isDesktop, isTablet } from '../../blue_modules/environment';
+import { isDesktop } from '../../blue_modules/environment';
 import { encodeUR } from '../../blue_modules/ur';
 import {
   BlueButtonLink,
@@ -631,23 +630,19 @@ const ViewEditMultisigCosigners: React.FC = () => {
 
   return (
     <View style={[styles.root, stylesHook.root]} ref={discardChangesRef}>
-      <KeyboardAvoidingView
-        enabled={!isTablet}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={62}
-        style={[styles.mainBlock, styles.root]}
-      >
       <FlatList
         ListHeaderComponent={tipKeys}
         data={data.current}
         extraData={vaultKeyData}
         renderItem={_renderKeyItem}
+        automaticallyAdjustKeyboardInsets
+        contentInsetAdjustmentBehavior="automatic"
+        automaticallyAdjustContentInsets
         keyExtractor={(_item, index) => `${index}`}
       />
       <BlueSpacing10 />
       {footer}
       <BlueSpacing40 />
-      </KeyboardAvoidingView>
 
       {renderProvideMnemonicsModal()}
 
@@ -689,7 +684,6 @@ const styles = StyleSheet.create({
     marginBottom: 32,
   },
   headerText: { fontSize: 15, color: '#13244D' },
-  mainBlock: { marginHorizontal: 16 },
   alignItemsCenter: { alignItems: 'center', justifyContent: 'space-between' },
   shareModalHeight: { minHeight: 450 },
   tipKeys: {

screen/wallets/details.js

@@ -5,8 +5,6 @@ import {
   I18nManager,
   InteractionManager,
   Keyboard,
-  KeyboardAvoidingView,
-  Platform,
   ScrollView,
   StyleSheet,
   Switch,
@@ -419,6 +417,7 @@ const WalletDetails = () => {
 
   return (
     <ScrollView
+      automaticallyAdjustKeyboardInsets
       contentInsetAdjustmentBehavior="automatic"
       centerContent={isLoading}
       contentContainerStyle={styles.scrollViewContent}
@@ -453,7 +452,6 @@ const WalletDetails = () => {
                 }
               })()}
               <Text style={[styles.textLabel2, stylesHook.textLabel2]}>{loc.wallets.add_wallet_name.toLowerCase()}</Text>
-              <KeyboardAvoidingView enabled={!Platform.isPad} behavior={Platform.OS === 'ios' ? 'position' : null}>
               <View style={[styles.input, stylesHook.input]}>
                 <TextInput
                   value={walletName}
@@ -467,7 +465,6 @@ const WalletDetails = () => {
                   testID="WalletNameInput"
                 />
               </View>
-              </KeyboardAvoidingView>
               <BlueSpacing20 />
               <Text style={[styles.textLabel1, stylesHook.textLabel1]}>{loc.wallets.details_type.toLowerCase()}</Text>
               <Text style={[styles.textValue, stylesHook.textValue]}>{wallet.typeReadable}</Text>

screen/wallets/generateWord.js

@@ -1,12 +1,11 @@
 import { useTheme } from '@react-navigation/native';
 import React, { useState } from 'react';
-import { Keyboard, KeyboardAvoidingView, Platform, StyleSheet, TextInput, View } from 'react-native';
+import { Keyboard, ScrollView, StyleSheet, TextInput, View } from 'react-native';
 
 import { generateChecksumWords } from '../../blue_modules/checksumWords';
 import { BlueCard, BlueSpacing10, BlueSpacing20, BlueText } from '../../BlueComponents';
 import { randomBytes } from '../../class/rng';
 import Button from '../../components/Button';
-import SafeArea from '../../components/SafeArea';
 import loc from '../../loc';
 
 const GenerateWord = () => {
@@ -53,11 +52,12 @@ const GenerateWord = () => {
   };
 
   return (
-    <SafeArea style={styles.blueArea}>
+    <ScrollView
-      <KeyboardAvoidingView
+      style={styles.blueArea}
-        enabled={!Platform.isPad}
-        behavior={Platform.OS === 'ios' ? 'position' : null}
       keyboardShouldPersistTaps="handled"
+      automaticallyAdjustContentInsets
+      automaticallyAdjustKeyboardInsets
+      contentInsetAdjustmentBehavior="automatic"
     >
       <View style={styles.wrapper}>
         <BlueCard style={styles.mainCard}>
@@ -96,8 +96,7 @@ const GenerateWord = () => {
           <BlueSpacing20 />
         </BlueCard>
       </View>
-      </KeyboardAvoidingView>
+    </ScrollView>
-    </SafeArea>
   );
 };
 

screen/wallets/signVerify.js

@@ -1,23 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useRoute } from '@react-navigation/native';
-import {
+import { ActivityIndicator, Keyboard, LayoutAnimation, Platform, ScrollView, StyleSheet, TextInput, View } from 'react-native';
-  ActivityIndicator,
-  Keyboard,
-  KeyboardAvoidingView,
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  TextInput,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
 import { Icon } from '@rneui/themed';
 import Share from 'react-native-share';
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
 import { BlueDoneAndDismissKeyboardInputAccessory, BlueFormLabel, BlueSpacing10, BlueSpacing20, BlueSpacing40 } from '../../BlueComponents';
 import presentAlert from '../../components/Alert';
 import { FButton, FContainer } from '../../components/FloatButtons';
-import SafeArea from '../../components/SafeArea';
 import { useTheme } from '../../components/themes';
 import loc from '../../loc';
 import { useStorage } from '../../hooks/context/useStorage';
@@ -116,9 +105,13 @@ const SignVerify = () => {
     );
 
   return (
-    <SafeArea style={[styles.root, stylesHooks.root]}>
+    <ScrollView
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+      automaticallyAdjustContentInsets
-        <KeyboardAvoidingView style={[styles.root, stylesHooks.root]}>
+      automaticallyAdjustKeyboardInsets
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={styles.root}
+      style={[styles.root, stylesHooks.root]}
+    >
       {!isKeyboardVisible && (
         <>
           <BlueSpacing20 />
@@ -229,9 +222,7 @@ const SignVerify = () => {
           />
         ),
       })}
-        </KeyboardAvoidingView>
+    </ScrollView>
-      </TouchableWithoutFeedback>
-    </SafeArea>
   );
 };