diff --git a/suite-native/app/package.json b/suite-native/app/package.json index 8587b3f44f7..d0bb55db044 100644 --- 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 index 586800cf360..7cfd9cc7f89 100644 --- 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 = () => ( - - - - - - - + + + + + + + + + diff --git a/suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx b/suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx index f456125d8ff..2c1f544d7e6 100644 --- 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 = ({ } footer={ - + <> {footer} - + } > diff --git a/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx b/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx index aa3115b1f27..a6387ecbfc5 100644 --- 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 = ({ } footer={} - extraKeyboardAvoidingViewHeight={EXTRA_KEYBOARD_AVOIDING_VIEW_HEIGHT} > diff --git a/suite-native/module-send/src/components/SendScreen.tsx b/suite-native/module-send/src/components/SendScreen.tsx index 42e99c2108f..962e8be66a0 100644 --- 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) => ( - - {children} - + + + {children} + + ); diff --git a/suite-native/navigation/package.json b/suite-native/navigation/package.json index f974d87943f..cfd7f6aa455 100644 --- 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/Screen.tsx b/suite-native/navigation/src/components/Screen.tsx index 8fea49e18c7..a6cb9fa6070 100644 --- 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; @@ -116,37 +121,43 @@ export const Screen = ({ const { name } = useRoute(); return ( - - - {header} - - + {header} + - {children} - - - {footer} - + + {children} + + + {footer} + + ); }; diff --git a/suite-native/navigation/src/components/ScreenContentWrapper.tsx b/suite-native/navigation/src/components/ScreenContentWrapper.tsx index 3dc16e2e703..018db66d65b 100644 --- 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} - { - // Assign the ref of inner ScrollView. - scrollViewRef.current = ref as unknown as ScrollView; - }} + {children} - + ) : ( <>{children} diff --git a/yarn.lock b/yarn.lock index 474fa68481a..b87e179cd92 100644 --- 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"