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

…handling
trezor · Feb 7, 2025 · d2b2219 · d2b2219
1 parent cecf169
commit d2b2219
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 71 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,5 +1,4 @@
 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';
@@ -24,10 +23,10 @@ export const AccountImportSummaryScreen = ({
     <Screen
         header={<AccountImportScreenHeader />}
         footer={
-            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+            <>
                 <ScreenFooterGradient />
                 <Box marginHorizontal="sp16">{footer}</Box>
-            </KeyboardAvoidingView>
+            </>
         }
     >
         <VStack spacing="sp32" flex={1}>

diff --git a/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx b/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
@@ -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,
@@ -176,7 +173,6 @@ export const XpubScanScreen = ({
         <Screen
             header={<AccountImportScreenHeader closeActionType="back" />}
             footer={<XpubHint networkType={networkType} handleOpen={handleOpenHint} />}
-            extraKeyboardAvoidingViewHeight={EXTRA_KEYBOARD_AVOIDING_VIEW_HEIGHT}
         >
             <Card>
                 <SelectableNetworkItem symbol={networkSymbol} />

diff --git a/suite-native/navigation/package.json b/suite-native/navigation/package.json
@@ -33,7 +33,7 @@
         "react": "18.2.0",
         "react-native": "0.76.1",
         "react-native-edge-to-edge": "^1.3.1",
-        "react-native-keyboard-aware-scroll-view": "0.9.5",
+        "react-native-keyboard-controller": "1.16.2",
         "react-native-reanimated": "^3.16.7",
         "react-native-safe-area-context": "^4.14.0",
         "react-redux": "8.0.7"

diff --git a/suite-native/navigation/src/components/Screen.tsx b/suite-native/navigation/src/components/Screen.tsx
@@ -1,6 +1,7 @@
 import { ReactNode, useContext } from 'react';
 import { ScrollViewProps, View } from 'react-native';
 import { SystemBars } from 'react-native-edge-to-edge';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import { EdgeInsets } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
@@ -30,6 +31,10 @@ type ScreenProps = {
     keyboardDismissMode?: ScrollViewProps['keyboardDismissMode'];
 };
 
+const screenStyle = prepareNativeStyle(_ => ({
+    flex: 1,
+}));
+
 const screenContainerStyle = prepareNativeStyle<{
     backgroundColor: Color;
     insets: EdgeInsets;
@@ -97,7 +102,6 @@ export const Screen = ({
     backgroundColor = 'backgroundSurfaceElevation0',
     noHorizontalPadding = false,
     noBottomPadding = false,
-    extraKeyboardAvoidingViewHeight = 0,
     hasBottomInset = true,
 }: ScreenProps) => {
     const {
@@ -116,37 +120,42 @@ export const Screen = ({
     const { name } = useRoute();
 
     return (
-        <View
-            style={applyStyle(screenContainerStyle, {
-                backgroundColor,
-                insets,
-                bottomPadding,
-                hasBottomPadding,
-                isMessageBannerDisplayed,
-            })}
-            testID={`@screen/${name}`}
+        <KeyboardAvoidingView
+            style={applyStyle(screenStyle)}
+            keyboardVerticalOffset={spacings.sp16}
+            behavior="height"
         >
-            <SystemBars style={systemBarsStyle} />
-            {header}
-            <ScreenContentWrapper
-                isScrollable={isScrollable}
-                hasHeader={!!header}
-                extraKeyboardAvoidingViewHeight={extraKeyboardAvoidingViewHeight}
-                refreshControl={refreshControl}
-                keyboardDismissMode={keyboardDismissMode}
+            <View
+                style={applyStyle(screenContainerStyle, {
+                    backgroundColor,
+                    insets,
+                    bottomPadding,
+                    hasBottomPadding,
+                    isMessageBannerDisplayed,
+                })}
+                testID={`@screen/${name}`}
             >
-                <Box
-                    style={applyStyle(screenContentBaseStyle, {
-                        insets,
-                        horizontalPadding,
-                        bottomPadding,
-                        isScrollable,
-                    })}
+                <SystemBars style={systemBarsStyle} />
+                {header}
+                <ScreenContentWrapper
+                    isScrollable={isScrollable}
+                    hasHeader={!!header}
+                    refreshControl={refreshControl}
+                    keyboardDismissMode={keyboardDismissMode}
                 >
-                    {children}
-                </Box>
-            </ScreenContentWrapper>
-            {footer}
-        </View>
+                    <Box
+                        style={applyStyle(screenContentBaseStyle, {
+                            insets,
+                            horizontalPadding,
+                            bottomPadding,
+                            isScrollable,
+                        })}
+                    >
+                        {children}
+                    </Box>
+                </ScreenContentWrapper>
+                {footer}
+            </View>
+        </KeyboardAvoidingView>
     );
 };
diff --git a/suite-native/navigation/src/components/ScreenContentWrapper.tsx b/suite-native/navigation/src/components/ScreenContentWrapper.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode, useRef } from 'react';
 import { ScrollView, ScrollViewProps } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
@@ -11,7 +10,6 @@ type ScreenContentProps = {
     children: ReactNode;
     isScrollable: boolean;
     hasHeader: boolean;
-    extraKeyboardAvoidingViewHeight: number;
     refreshControl?: ScrollViewProps['refreshControl'];
     keyboardDismissMode?: ScrollViewProps['keyboardDismissMode'];
 };
@@ -22,7 +20,6 @@ export const ScreenContentWrapper = ({
     children,
     isScrollable,
     hasHeader,
-    extraKeyboardAvoidingViewHeight,
     refreshControl,
     keyboardDismissMode,
 }: ScreenContentProps) => {
@@ -34,15 +31,11 @@ export const ScreenContentWrapper = ({
     return isScrollable ? (
         <>
             {scrollDivider}
-            <KeyboardAwareScrollView
-                innerRef={ref => {
-                    // Assign the ref of inner ScrollView.
-                    scrollViewRef.current = ref as unknown as ScrollView;
-                }}
+            <ScrollView
+                ref={scrollViewRef}
                 keyboardDismissMode={keyboardDismissMode}
                 keyboardShouldPersistTaps="handled"
                 contentInsetAdjustmentBehavior="automatic"
-                extraHeight={extraKeyboardAvoidingViewHeight}
                 contentContainerStyle={applyStyle(screenContentWrapperStyle)}
                 refreshControl={refreshControl}
                 testID="@screen/mainScrollView"
@@ -51,7 +44,7 @@ export const ScreenContentWrapper = ({
                 <ScrollViewContext.Provider value={scrollViewRef}>
                     {children}
                 </ScrollViewContext.Provider>
-            </KeyboardAwareScrollView>
+            </ScrollView>
         </>
     ) : (
         <>{children}</>

diff --git a/suite-native/test-utils/package.json b/suite-native/test-utils/package.json
@@ -16,6 +16,7 @@
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",
         "react": "18.2.0",
+        "react-native-keyboard-controller": "1.16.2",
         "react-native-safe-area-context": "^4.14.0",
         "react-redux": "8.0.7"
     }

diff --git a/suite-native/test-utils/src/expoMock.js b/suite-native/test-utils/src/expoMock.js
@@ -407,3 +407,7 @@ jest.mock('expo-constants', () => {
 jest.mock('redux-devtools-expo-dev-plugin', () => () => next => next);
 
 jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
+
+jest.mock('react-native-keyboard-controller', () =>
+    require('react-native-keyboard-controller/jest'),
+);
diff --git a/yarn.lock b/yarn.lock
@@ -10063,7 +10063,7 @@ __metadata:
     react-native: "npm:0.76.1"
     react-native-edge-to-edge: "npm:^1.3.1"
     react-native-gesture-handler: "npm:^2.21.0"
-    react-native-keyboard-aware-scroll-view: "npm:0.9.5"
+    react-native-keyboard-controller: "npm:1.16.2"
     react-native-mmkv: "npm:2.12.2"
     react-native-quick-crypto: "npm:^0.7.6"
     react-native-reanimated: "npm:^3.16.7"
@@ -10997,7 +10997,7 @@ __metadata:
     react: "npm:18.2.0"
     react-native: "npm:0.76.1"
     react-native-edge-to-edge: "npm:^1.3.1"
-    react-native-keyboard-aware-scroll-view: "npm:0.9.5"
+    react-native-keyboard-controller: "npm:1.16.2"
     react-native-reanimated: "npm:^3.16.7"
     react-native-safe-area-context: "npm:^4.14.0"
     react-redux: "npm:8.0.7"
@@ -11202,6 +11202,7 @@ __metadata:
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"
     react: "npm:18.2.0"
+    react-native-keyboard-controller: "npm:1.16.2"
     react-native-safe-area-context: "npm:^4.14.0"
     react-redux: "npm:8.0.7"
   languageName: unknown
@@ -36146,24 +36147,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-iphone-x-helper@npm:^1.0.3":
-  version: 1.3.1
-  resolution: "react-native-iphone-x-helper@npm:1.3.1"
+"react-native-is-edge-to-edge@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "react-native-is-edge-to-edge@npm:1.1.6"
   peerDependencies:
-    react-native: ">=0.42.0"
-  checksum: 10/024376646009a966e33e12fc2358751830818b0fb73b1c601a64eb5e490d2dc43eec23668991b985a8c412a84d087f20eb45bb9b593567c08b66e741b7bddda5
+    react: ">=18.2.0"
+    react-native: ">=0.73.0"
+  checksum: 10/4e07c1e34c01c8d50fd7c1d0460db06f6f0515197405230386a8ffb950cb724b10743af032310d1384df0a90059bfb8992ba2d93344ce86315315f0493feccc2
   languageName: node
   linkType: hard
 
-"react-native-keyboard-aware-scroll-view@npm:0.9.5":
-  version: 0.9.5
-  resolution: "react-native-keyboard-aware-scroll-view@npm:0.9.5"
+"react-native-keyboard-controller@npm:1.16.2":
+  version: 1.16.2
+  resolution: "react-native-keyboard-controller@npm:1.16.2"
   dependencies:
-    prop-types: "npm:^15.6.2"
-    react-native-iphone-x-helper: "npm:^1.0.3"
+    react-native-is-edge-to-edge: "npm:^1.1.6"
   peerDependencies:
-    react-native: ">=0.48.4"
-  checksum: 10/95d8ed8a46426b16e819713495d64766a3eed5d63a03fb4feca0351cce55d74197f75d8b01dd3f2c491cda29c155bb71c8063d2fba23e8a0044208aad03d0d91
+    react: "*"
+    react-native: "*"
+    react-native-reanimated: ">=3.0.0"
+  checksum: 10/8e017d079755c098e2960e63f5d077060aaa40b31f979ef043483af143c51897f3fe9ff1a1ca7f04a6ebedc9b29a0cd3b76d635b26c865e0056f626893e0739a
   languageName: node
   linkType: hard