fix(suite-native): use react-native-keyboard-controller for keyboard …

…handling
trezor · Feb 11, 2025 · 68efa08 · 68efa08
1 parent 25ffdcd
commit 68efa08
Show file tree

Hide file tree

Showing 22 changed files with 127 additions and 127 deletions.
diff --git a/scripts/list-outdated-dependencies/mobile-dependencies.txt b/scripts/list-outdated-dependencies/mobile-dependencies.txt
@@ -53,7 +53,7 @@ expo-updates
 jotai
 lottie-react-native
 react-native-gesture-handler
-react-native-keyboard-aware-scroll-view
+react-native-keyboard-controller
 react-native-mmkv
 react-native-quick-crypto
 react-native-restart

diff --git a/suite-native/app/package.json b/suite-native/app/package.json
@@ -112,7 +112,7 @@
         "react-native": "0.76.1",
         "react-native-edge-to-edge": "^1.3.1",
         "react-native-gesture-handler": "^2.21.0",
-        "react-native-keyboard-aware-scroll-view": "0.9.5",
+        "react-native-keyboard-controller": "1.16.2",
         "react-native-mmkv": "2.12.2",
         "react-native-quick-crypto": "^0.7.6",
         "react-native-reanimated": "^3.16.7",

diff --git a/suite-native/app/src/App.tsx b/suite-native/app/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -80,13 +81,15 @@ const PureApp = () => (
         <IntlProvider>
             <StoreProvider>
                 <SentryProvider>
-                    <SafeAreaProvider>
-                        <StylesProvider>
-                            <NavigationContainerWithAnalytics>
-                                <AppComponent />
-                            </NavigationContainerWithAnalytics>
-                        </StylesProvider>
-                    </SafeAreaProvider>
+                    <KeyboardProvider>
+                        <SafeAreaProvider>
+                            <StylesProvider>
+                                <NavigationContainerWithAnalytics>
+                                    <AppComponent />
+                                </NavigationContainerWithAnalytics>
+                            </StylesProvider>
+                        </SafeAreaProvider>
+                    </KeyboardProvider>
                 </SentryProvider>
             </StoreProvider>
         </IntlProvider>

diff --git a/suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx b/suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx
@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
-import { KeyboardAvoidingView, Platform } from 'react-native';
 
 import { Box, PictogramTitleHeader, VStack } from '@suite-native/atoms';
-import { Screen, ScreenFooterGradient } from '@suite-native/navigation';
+import { KeyboardAvoidingScreen, ScreenFooterGradient } from '@suite-native/navigation';
 
 import { AccountImportScreenHeader } from './AccountImportScreenHeader';
 
@@ -21,13 +20,13 @@ export const AccountImportSummaryScreen = ({
     footer,
     testID,
 }: AccountImportSummaryScreenProps) => (
-    <Screen
+    <KeyboardAvoidingScreen
         header={<AccountImportScreenHeader />}
         footer={
-            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+            <>
                 <ScreenFooterGradient />
                 <Box marginHorizontal="sp16">{footer}</Box>
-            </KeyboardAvoidingView>
+            </>
         }
     >
         <VStack spacing="sp32" flex={1}>
@@ -43,5 +42,5 @@ export const AccountImportSummaryScreen = ({
                 {children}
             </Box>
         </VStack>
-    </Screen>
+    </KeyboardAvoidingScreen>
 );
diff --git a/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx b/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
@@ -22,7 +22,7 @@ import { Translation, useTranslate } from '@suite-native/intl';
 import {
     AccountsImportStackParamList,
     AccountsImportStackRoutes,
-    Screen,
+    KeyboardAvoidingScreen,
     StackProps,
 } from '@suite-native/navigation';
 import { ScanQRBottomSheet } from '@suite-native/qr-code';
@@ -36,9 +36,6 @@ import { XpubImportSection, networkTypeToTitleMap } from '../components/XpubImpo
 
 const FORM_BUTTON_FADE_IN_DURATION = 200;
 
-// Extra padding needed to make multiline xpub input form visible even with the sticky footer.
-const EXTRA_KEYBOARD_AVOIDING_VIEW_HEIGHT = 350;
-
 const cameraStyle = prepareNativeStyle(_ => ({
     alignItems: 'center',
     marginTop: 20,
@@ -173,10 +170,9 @@ export const XpubScanScreen = ({
     };
 
     return (
-        <Screen
+        <KeyboardAvoidingScreen
             header={<AccountImportScreenHeader closeActionType="back" />}
             footer={<XpubHint networkType={networkType} handleOpen={handleOpenHint} />}
-            extraKeyboardAvoidingViewHeight={EXTRA_KEYBOARD_AVOIDING_VIEW_HEIGHT}
         >
             <Card>
                 <SelectableNetworkItem symbol={networkSymbol} />
@@ -232,6 +228,6 @@ export const XpubScanScreen = ({
                 onCodeScanned={handleBarCodeScanned}
                 onClose={handleToggleScanner}
             />
-        </Screen>
+        </KeyboardAvoidingScreen>
     );
 };
diff --git a/...tive/module-authorize-device/src/components/passphrase/PassphraseContentScreenWrapper.tsx b/...tive/module-authorize-device/src/components/passphrase/PassphraseContentScreenWrapper.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { Text, VStack } from '@suite-native/atoms';
+import { TitleHeader, VStack } from '@suite-native/atoms';
 import { Screen } from '@suite-native/navigation';
 
 import { PassphraseScreenHeader } from './PassphraseScreenHeader';
@@ -18,10 +18,7 @@ export const PassphraseContentScreenWrapper = ({
 }: PassphraseContentScreenWrapperProps) => (
     <Screen header={<PassphraseScreenHeader />}>
         <VStack marginTop="sp8" spacing="sp16">
-            <VStack>
-                <Text variant="titleMedium">{title}</Text>
-                {subtitle && <Text>{subtitle}</Text>}
-            </VStack>
+            <TitleHeader title={title} subtitle={subtitle} titleVariant="titleMedium" />
             {children}
         </VStack>
     </Screen>

diff --git a/...e-native/module-authorize-device/src/screens/passphrase/PassphraseEnterOnTrezorScreen.tsx b/...e-native/module-authorize-device/src/screens/passphrase/PassphraseEnterOnTrezorScreen.tsx
@@ -78,6 +78,7 @@ export const PassphraseEnterOnTrezorScreen = () => {
     };
 
     return (
+        // TODO: Use just Screen
         <PassphraseContentScreenWrapper
             title={<Translation id="modulePassphrase.title" />}
             subtitle={

diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx
@@ -2,14 +2,15 @@ import { LayoutChangeEvent, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import { EventType, analytics } from '@suite-native/analytics';
-import { Box, Button, HStack, Text, VStack } from '@suite-native/atoms';
+import { Box, Button, HStack, Text, TitleHeader, VStack } from '@suite-native/atoms';
 import { Icon } from '@suite-native/icons';
 import { Translation, useTranslate } from '@suite-native/intl';
 import { useOpenLink } from '@suite-native/link';
+import { KeyboardAvoidingScreen } from '@suite-native/navigation';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
-import { PassphraseContentScreenWrapper } from '../../components/passphrase/PassphraseContentScreenWrapper';
 import { PassphraseForm } from '../../components/passphrase/PassphraseForm';
+import { PassphraseScreenHeader } from '../../components/passphrase/PassphraseScreenHeader';
 
 const ANIMATION_DURATION = 300;
 
@@ -70,18 +71,20 @@ export const PassphraseFormScreen = () => {
     };
 
     return (
-        <PassphraseContentScreenWrapper
-            title={<Translation id="modulePassphrase.title" />}
-            subtitle={
-                <Translation
-                    id="modulePassphrase.subtitle"
-                    values={{
-                        bold: chunks => <Text variant="highlight">{chunks}</Text>,
-                    }}
+        <KeyboardAvoidingScreen header={<PassphraseScreenHeader />}>
+            <VStack marginTop="sp8" spacing="sp16">
+                <TitleHeader
+                    title={<Translation id="modulePassphrase.title" />}
+                    subtitle={
+                        <Translation
+                            id="modulePassphrase.subtitle"
+                            values={{
+                                bold: chunks => <Text variant="highlight">{chunks}</Text>,
+                            }}
+                        />
+                    }
+                    titleVariant="titleMedium"
                 />
-            }
-        >
-            <VStack spacing="sp16">
                 <View
                     style={applyStyle(animationWrapperStyle)}
                     onLayout={(event: LayoutChangeEvent) =>
@@ -158,6 +161,6 @@ export const PassphraseFormScreen = () => {
                     inputLabel={translate('modulePassphrase.form.createWalletInputLabel')}
                 />
             </VStack>
-        </PassphraseContentScreenWrapper>
+        </KeyboardAvoidingScreen>
     );
 };
diff --git a/...tive/module-authorize-device/src/screens/passphrase/PassphraseVerifyEmptyWalletScreen.tsx b/...tive/module-authorize-device/src/screens/passphrase/PassphraseVerifyEmptyWalletScreen.tsx
@@ -4,15 +4,16 @@ import { useDispatch } from 'react-redux';
 import { isFulfilled } from '@reduxjs/toolkit';
 
 import { EventType, analytics } from '@suite-native/analytics';
-import { AlertBox, Text, VStack } from '@suite-native/atoms';
+import { AlertBox, Text, TitleHeader, VStack } from '@suite-native/atoms';
 import {
     finishPassphraseFlow,
     verifyPassphraseOnEmptyWalletThunk,
 } from '@suite-native/device-authorization';
 import { Translation, useTranslate } from '@suite-native/intl';
+import { KeyboardAvoidingScreen } from '@suite-native/navigation';
 
-import { PassphraseContentScreenWrapper } from '../../components/passphrase/PassphraseContentScreenWrapper';
 import { PassphraseForm } from '../../components/passphrase/PassphraseForm';
+import { PassphraseScreenHeader } from '../../components/passphrase/PassphraseScreenHeader';
 
 export const PassphraseVerifyEmptyWalletScreen = () => {
     const dispatch = useDispatch();
@@ -34,15 +35,17 @@ export const PassphraseVerifyEmptyWalletScreen = () => {
     }, [dispatch]);
 
     return (
-        <PassphraseContentScreenWrapper
-            title={
-                <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.title" />
-            }
-            subtitle={
-                <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.description" />
-            }
-        >
-            <VStack spacing="sp16">
+        <KeyboardAvoidingScreen header={<PassphraseScreenHeader />}>
+            <VStack marginTop="sp8" spacing="sp16">
+                <TitleHeader
+                    title={
+                        <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.title" />
+                    }
+                    subtitle={
+                        <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.description" />
+                    }
+                    titleVariant="titleMedium"
+                />
                 <AlertBox
                     variant="warning"
                     title={
@@ -60,6 +63,6 @@ export const PassphraseVerifyEmptyWalletScreen = () => {
                     inputLabel={translate('modulePassphrase.form.verifyPassphraseInputLabel')}
                 />
             </VStack>
-        </PassphraseContentScreenWrapper>
+        </KeyboardAvoidingScreen>
     );
 };
diff --git a/suite-native/module-send/src/components/SendScreen.tsx b/suite-native/module-send/src/components/SendScreen.tsx
diff --git a/suite-native/module-send/src/screens/SendAccountsScreen.tsx b/suite-native/module-send/src/screens/SendAccountsScreen.tsx
@@ -1,14 +1,13 @@
 import { AccountsList, OnSelectAccount } from '@suite-native/accounts';
 import { useTranslate } from '@suite-native/intl';
 import {
+    Screen,
     ScreenHeader,
     SendStackParamList,
     SendStackRoutes,
     StackProps,
 } from '@suite-native/navigation';
 
-import { SendScreen } from '../components/SendScreen';
-
 // TODO: So far we do not want enable send form for any other networkS than Bitcoin-like coins.
 // This filter will be removed in a follow up PR.
 const BITCOIN_LIKE_FILTER = 'bitcoin';
@@ -25,15 +24,13 @@ export const SendAccountsScreen = ({
 
     // TODO: move text content to @suite-native/intl package when is copy ready
     return (
-        <SendScreen
-            screenHeader={<ScreenHeader content={translate('moduleSend.accountsList.title')} />}
-        >
+        <Screen header={<ScreenHeader content={translate('moduleSend.accountsList.title')} />}>
             {/* TODO: Enable filtering same as receive screen account list has. */}
             <AccountsList
                 onSelectAccount={navigateToSendFormScreen}
                 filterValue={BITCOIN_LIKE_FILTER}
                 hideTokensIntoModal
             />
-        </SendScreen>
+        </Screen>
     );
 };
diff --git a/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx b/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx
@@ -5,6 +5,7 @@ import { AccountsRootState, DeviceRootState, SendRootState } from '@suite-common
 import { Box, Text, VStack } from '@suite-native/atoms';
 import { Translation, useTranslate } from '@suite-native/intl';
 import {
+    Screen,
     ScreenHeader,
     SendStackParamList,
     SendStackRoutes,
@@ -13,7 +14,6 @@ import {
 
 import { AddressReviewStepList } from '../components/AddressReviewStepList';
 import { SendConfirmOnDeviceImage } from '../components/SendConfirmOnDeviceImage';
-import { SendScreen } from '../components/SendScreen';
 import {
     selectIsReceiveAddressOutputConfirmed,
     selectIsTransactionReviewInProgress,
@@ -43,8 +43,8 @@ export const SendAddressReviewScreen = ({
     }, [isAddressConfirmed, accountKey, navigation, tokenContract]);
 
     return (
-        <SendScreen
-            screenHeader={
+        <Screen
+            header={
                 <ScreenHeader
                     content={translate('moduleSend.review.outputs.title')}
                     closeActionType={isTransactionReviewInProgress ? 'close' : 'back'}
@@ -61,6 +61,6 @@ export const SendAddressReviewScreen = ({
                     <AddressReviewStepList />
                 </VStack>
             </Box>
-        </SendScreen>
+        </Screen>
     );
 };
diff --git a/suite-native/module-send/src/screens/SendDestinationTagReviewScreen.tsx b/suite-native/module-send/src/screens/SendDestinationTagReviewScreen.tsx
@@ -7,6 +7,7 @@ import { AccountsRootState, DeviceRootState, SendRootState } from '@suite-common
 import { Text, VStack } from '@suite-native/atoms';
 import { Translation, useTranslate } from '@suite-native/intl';
 import {
+    Screen,
     ScreenHeader,
     SendStackParamList,
     SendStackRoutes,
@@ -15,7 +16,6 @@ import {
 
 import { ReviewDestinationTagCard } from '../components/ReviewDestinationTagCard';
 import { SendConfirmOnDeviceImage } from '../components/SendConfirmOnDeviceImage';
-import { SendScreen } from '../components/SendScreen';
 import { useHandleOnDeviceTransactionReview } from '../hooks/useHandleOnDeviceTransactionReview';
 import {
     selectIsDestinationTagOutputConfirmed,
@@ -65,8 +65,8 @@ export const SendDestinationTagReviewScreen = ({
     }, [isDestinationTagConfirmed, accountKey, navigation, tokenContract, transaction]);
 
     return (
-        <SendScreen
-            screenHeader={
+        <Screen
+            header={
                 <ScreenHeader
                     content={translate('moduleSend.review.outputs.title')}
                     closeActionType={isTransactionReviewInProgress ? 'close' : 'back'}
@@ -80,6 +80,6 @@ export const SendDestinationTagReviewScreen = ({
                 </Text>
                 <ReviewDestinationTagCard destinationTag={destinationTag} />
             </VStack>
-        </SendScreen>
+        </Screen>
     );
 };