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

…handling
trezor · Feb 6, 2025 · e733289 · e733289
1 parent 0a1177d
commit e733289
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 42 deletions.
diff --git a/suite-native/app/package.json b/suite-native/app/package.json
@@ -113,6 +113,7 @@
         "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/AccountImportSummaryScreen.tsx b/suite-native/module-accounts-import/src/screens/AccountImportSummaryScreen.tsx
@@ -1,3 +1,4 @@
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import { useSelector } from 'react-redux';
 
 import {
@@ -59,5 +60,9 @@ export const AccountImportSummaryScreen = ({
         return <AccountAlreadyImportedScreen account={account} />;
     }
 
-    return <AccountImportConfirmFormScreen symbol={networkSymbol} accountInfo={accountInfo} />;
+    return (
+        <KeyboardAvoidingView style={{ flex: 1 }} behavior="height">
+            <AccountImportConfirmFormScreen symbol={networkSymbol} accountInfo={accountInfo} />
+        </KeyboardAvoidingView>
+    );
 };
diff --git a/suite-native/module-send/src/components/AmountInputs.tsx b/suite-native/module-send/src/components/AmountInputs.tsx
@@ -66,7 +66,7 @@ export const AmountInputs = ({ index }: AmountInputProps) => {
     );
 
     const [isCryptoSelected, setIsCryptoSelected] = useState(true);
-    const scrollView = useScrollView();
+    // const scrollView = useScrollView();
     const amountInputsWrapperRef = useRef<View>(null);
 
     const cryptoRef = useRef<TextInput>(null);
@@ -102,22 +102,22 @@ export const AmountInputs = ({ index }: AmountInputProps) => {
         setIsCryptoSelected(!isCryptoSelected);
     };
 
-    const handleInputFocus = () => {
-        const amountInputsWrapper = amountInputsWrapperRef.current;
-        const scrollViewNodeHandle = findNodeHandle(scrollView);
-
-        if (!amountInputsWrapper || !scrollViewNodeHandle) return;
-
-        // Timeout is needed so the position is calculated after keyboard and footer animations are finished.
-        setTimeout(
-            () =>
-                // Scroll so the whole amount inputs section is visible.
-                amountInputsWrapper.measureLayout(scrollViewNodeHandle, (_, y) => {
-                    scrollView?.scrollTo({ y, animated: true });
-                }),
-            400,
-        );
-    };
+    // const handleInputFocus = () => {
+    //     const amountInputsWrapper = amountInputsWrapperRef.current;
+    //     const scrollViewNodeHandle = findNodeHandle(scrollView);
+    //
+    //     if (!amountInputsWrapper || !scrollViewNodeHandle) return;
+    //
+    //     // Timeout is needed so the position is calculated after keyboard and footer animations are finished.
+    //     setTimeout(
+    //         () =>
+    //             // Scroll so the whole amount inputs section is visible.
+    //             amountInputsWrapper.measureLayout(scrollViewNodeHandle, (_, y) => {
+    //                 scrollView?.scrollTo({ y, animated: true });
+    //             }),
+    //         400,
+    //     );
+    // };
 
     if (!symbol) return null;
 
@@ -149,7 +149,7 @@ export const AmountInputs = ({ index }: AmountInputProps) => {
                         isDisabled={!isCryptoSelected}
                         symbol={symbol}
                         onPress={!isCryptoSelected ? handleSwitchInputs : undefined}
-                        onFocus={handleInputFocus}
+                        // onFocus={handleInputFocus}
                         tokenContract={tokenContract}
                     />
                     {isFiatDisplayed && (
@@ -164,7 +164,7 @@ export const AmountInputs = ({ index }: AmountInputProps) => {
                                 symbol={symbol}
                                 tokenContract={tokenContract}
                                 onPress={isCryptoSelected ? handleSwitchInputs : undefined}
-                                onFocus={handleInputFocus}
+                                // onFocus={handleInputFocus}
                             />
                         </>
                     )}

diff --git a/suite-native/module-send/src/components/SendScreen.tsx b/suite-native/module-send/src/components/SendScreen.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 
 import { Screen } from '@suite-native/navigation';
 
@@ -9,7 +10,9 @@ type SendScreenProps = {
 };
 
 export const SendScreen = ({ children, footer, screenHeader }: SendScreenProps) => (
-    <Screen header={screenHeader} footer={footer} keyboardDismissMode="on-drag">
-        {children}
-    </Screen>
+    <KeyboardAvoidingView style={{ flex: 1 }} behavior="height">
+        <Screen header={screenHeader} footer={footer} keyboardDismissMode="on-drag">
+            {children}
+        </Screen>
+    </KeyboardAvoidingView>
 );
diff --git a/suite-native/navigation/package.json b/suite-native/navigation/package.json
@@ -34,6 +34,7 @@
         "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/ScreenContentWrapper.tsx b/suite-native/navigation/src/components/ScreenContentWrapper.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useRef } from 'react';
 import { ScrollView, ScrollViewProps } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
 
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
@@ -35,14 +35,15 @@ export const ScreenContentWrapper = ({
         <>
             {scrollDivider}
             <KeyboardAwareScrollView
-                innerRef={ref => {
-                    // Assign the ref of inner ScrollView.
-                    scrollViewRef.current = ref as unknown as ScrollView;
-                }}
-                keyboardDismissMode={keyboardDismissMode}
-                keyboardShouldPersistTaps="handled"
-                contentInsetAdjustmentBehavior="automatic"
-                extraHeight={extraKeyboardAvoidingViewHeight}
+                // innerRef={scrollViewRef as any}
+                // innerRef={ref => {
+                //     // Assign the ref of inner ScrollView.
+                //     scrollViewRef.current = ref as unknown as ScrollView;
+                // }}
+                // keyboardDismissMode={keyboardDismissMode}
+                // keyboardShouldPersistTaps="handled"
+                // contentInsetAdjustmentBehavior="automatic"
+                // extraHeight={extraKeyboardAvoidingViewHeight}
                 contentContainerStyle={applyStyle(screenContentWrapperStyle)}
                 refreshControl={refreshControl}
                 testID="@screen/mainScrollView"

diff --git a/yarn.lock b/yarn.lock
@@ -10064,6 +10064,7 @@ __metadata:
     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,6 +10998,7 @@ __metadata:
     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"
@@ -36153,6 +36155,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"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: ">=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"
@@ -36165,6 +36177,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-keyboard-controller@npm:1.16.2":
+  version: 1.16.2
+  resolution: "react-native-keyboard-controller@npm:1.16.2"
+  dependencies:
+    react-native-is-edge-to-edge: "npm:^1.1.6"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+    react-native-reanimated: ">=3.0.0"
+  checksum: 10/8e017d079755c098e2960e63f5d077060aaa40b31f979ef043483af143c51897f3fe9ff1a1ca7f04a6ebedc9b29a0cd3b76d635b26c865e0056f626893e0739a
+  languageName: node
+  linkType: hard
+
 "react-native-mmkv@npm:2.12.2":
   version: 2.12.2
   resolution: "react-native-mmkv@npm:2.12.2"