fix(suite-native): use react-native-keyboard-controller for keyboard handling #16838
Conversation
WalkthroughThe pull request replaces the use of Assessment against linked issues
Suggested reviewers
Tip 🌐 Web search-backed reviews and chat
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
| keyboardShouldPersistTaps="handled" | ||
| contentInsetAdjustmentBehavior="automatic" | ||
| extraHeight={extraKeyboardAvoidingViewHeight} | ||
| // innerRef={ref => { |
There was a problem hiding this comment.
this should not be removed. useScrollView hook will not work without it. It is used on some screens where we want to scroll imperatively.
There was a problem hiding this comment.
Fixed in the latest version.
yanascz
force-pushed
the
fix/native/keyboard-aware-scroll-view
branch
from
2ca3a7b to
43ad751
Compare
|
🚀 Expo preview is ready!
|
yanascz
force-pushed
the
fix/native/keyboard-aware-scroll-view
branch
4 times, most recently
from
4122c2e to
e2772b4
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
suite-native/navigation/src/components/Screen.tsx (1)
20-32: Consider platform-specific keyboard behavior.The keyboard handling could be enhanced with platform-specific behavior.
Consider adding platform-specific behavior:
type ScreenProps = { children: ReactNode; header?: ReactNode; footer?: ReactNode; isScrollable?: boolean; backgroundColor?: Color; noHorizontalPadding?: boolean; noBottomPadding?: boolean; - extraKeyboardAvoidingViewHeight?: number; + keyboardBehavior?: 'height' | 'position' | 'padding'; hasBottomInset?: boolean; refreshControl?: ScrollViewProps['refreshControl']; keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']; };Then update the KeyboardAvoidingView usage:
<KeyboardAvoidingView style={applyStyle(screenStyle)} keyboardVerticalOffset={spacings.sp16} - behavior="height" + behavior={keyboardBehavior ?? (Platform.OS === 'ios' ? 'padding' : 'height')} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (8)
suite-native/app/package.json(1 hunks)suite-native/app/src/App.tsx(2 hunks)suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx(1 hunks)suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx(0 hunks)suite-native/module-send/src/components/SendScreen.tsx(2 hunks)suite-native/navigation/package.json(1 hunks)suite-native/navigation/src/components/Screen.tsx(3 hunks)suite-native/navigation/src/components/ScreenContentWrapper.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
⏰ Context from checks skipped due to timeout of 90000ms (22)
- GitHub Check: Type Checking
- GitHub Check: Releases revision Checks
- GitHub Check: Linting and formatting
- GitHub Check: Build libs for publishing
- GitHub Check: Other Checks
- GitHub Check: Unit Tests
- GitHub Check: PR-check / node-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: PR-check / web-override init-api-flaky
- GitHub Check: PR-check / web-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: PR-check / node-override init-api-flaky
- GitHub Check: build-deploy
- GitHub Check: Analyze with CodeQL (javascript)
- GitHub Check: build-web
- GitHub Check: test
- GitHub Check: run-desktop-tests (@group=wallet, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: run-desktop-tests (@group=settings, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: run-desktop-tests (@group=device-management, trezor-user-env-unix)
- GitHub Check: run-desktop-tests (@group=suite, trezor-user-env-unix)
- GitHub Check: build-web
- GitHub Check: EAS Update
- GitHub Check: prepare_android_test_app
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (7)
suite-native/module-send/src/components/SendScreen.tsx (1)
2-2: LGTM! Good implementation of keyboard handling.The changes properly integrate the new keyboard controller:
- KeyboardAvoidingView is correctly configured with height behavior
- Screen component is properly wrapped
- keyboardDismissMode="on-drag" improves UX by allowing keyboard dismissal on scroll
Also applies to: 13-17
suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx (1)
26-30: LGTM! Simplified footer implementation.Removing the redundant KeyboardAvoidingView is correct since keyboard handling is now managed by the KeyboardProvider at the app level.
suite-native/navigation/src/components/ScreenContentWrapper.tsx (1)
34-47: LGTM! Proper migration to standard ScrollView.The changes correctly:
- Maintain ScrollViewContext functionality
- Remove redundant keyboard handling as it's now managed by KeyboardProvider
- Preserve essential ScrollView props for keyboard interaction
suite-native/app/src/App.tsx (1)
3-3: LGTM! Proper integration of KeyboardProvider.The KeyboardProvider is correctly placed high in the component tree to manage keyboard behavior app-wide.
Let's verify the react-native-keyboard-controller version and compatibility:
Also applies to: 84-92
✅ Verification successful
🌐 Web query:
What is the latest version of react-native-keyboard-controller and its compatibility with React Native?💡 Result:
The latest version of **react-native-keyboard-controller** is **1.16.2** (released a day ago as of February 2025)[1][4]. This library maintains compatibility across modern React Native versions and platforms through continuous updates: ### Key Compatibility Features | Aspect | Details | |--------|---------| | **React Native Support** | Works with any navigation library and tested up to RN 0.75[1][4], though no incompatibilities reported with newer versions like RN 0.77[6] | | **Platform Parity** | Identical iOS/Android behavior for keyboard events and animations[2][4] | | **Architecture Support** | Compatible with both old and new React Native architectures (Fabric)[8] | | **Third-Party Integration** | Works with `@gorhom/bottom-sheet`[5], `react-native-gesture-handler`[1], and `react-native-reanimated`[4] | Recent updates include critical fixes for Stripe inputs[1], XCode warnings[1], and Android crashes[1][3]. The library supports modern Android/iOS APIs while maintaining backward compatibility (e.g., iOS <13 support via polyfills)[1][3]. For installation: ```bash yarn add [email protected] # or npm install [email protected] ``` The documentation confirms compatibility with "any React Native version"[4], though testing with specific RN releases (especially beyond 0.75) is recommended during upgrades[6]. Citations: - 1: https://github.com/kirillzyusko/react-native-keyboard-controller/releases - 2: https://www.npmjs.com/package/react-native-keyboard-controller/v/1.0.0-alpha.1 - 3: https://kirillzyusko.github.io/react-native-keyboard-controller/blog/release-1-13 - 4: https://www.npmjs.com/package/react-native-keyboard-controller - 5: https://github.com/kirillzyusko/react-native-keyboard-controller/discussions/309 - 6: https://reactnative.dev/blog/2025/01/21/version-0.77 - 7: https://kirillzyusko.github.io/react-native-keyboard-controller/blog - 8: https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/react-native-keyboard-controller.podspec - 9: https://reactnative.dev/versions - 10: https://kirillzyusko.github.io/react-native-keyboard-controller/
LGTM: KeyboardProvider integration is correctly implemented.
- Confirmed using the web query that the latest version of react-native-keyboard-controller is 1.16.2.
- This version supports modern React Native versions (tested up to RN 0.75 and known to work with newer versions like RN 0.77), ensuring compatibility and proper keyboard handling.
suite-native/navigation/src/components/Screen.tsx (1)
123-127: Verify keyboard behavior across different screen layouts.The implementation looks good, but the fixed
behavior="height"setting might not be optimal for all screens, especially those with complex layouts.Consider testing the following scenarios:
- Forms at the bottom of scrollable content
- Text inputs in the middle of the screen
- Landscape orientation handling
suite-native/navigation/package.json (1)
36-36: Verify the stability of react-native-keyboard-controller.Let's check if version 1.16.2 is the latest stable version and review its compatibility with React Native 0.76.1.
✅ Verification successful
🌐 Web query:
What is the latest stable version of react-native-keyboard-controller and its compatibility with React Native 0.76.1?💡 Result:
The latest stable version of **react-native-keyboard-controller** is **1.16.2** (published a day ago as of February 2025) [3][5]. This version maintains full compatibility with **React Native 0.76.x**, including **0.76.1** [2][4]. ### Key Compatibility Details: - **Fabric Architecture Support**: Version **1.13.0+** explicitly supports React Native **0.75+**, including subsequent updates like **0.76.x** [2]. - **Tested Features**: 1.x versions have been validated across multiple iOS/Android versions and RN architectures (Paper/Fabric) [1][5]. - **RN 0.76-Specific Enhancements**: Recent updates address edge cases in keyboard handling introduced by React Native's New Architecture default in v0.76 [4][5]. For projects using React Native ≥0.76, the recommended minimum keyboard-controller version is **1.13.x**, though upgrading to **1.16.x** is advised for bug fixes and new features like async dismiss handling and performance optimizations [5]. Citations: - 1: https://kirillzyusko.github.io/react-native-keyboard-controller/blog/release-1-13 - 2: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/compatibility - 3: https://www.npmjs.com/package/react-native-keyboard-controller - 4: https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture - 5: https://github.com/kirillzyusko/react-native-keyboard-controller/releases - 6: https://reactnative.dev/versions - 7: https://kirillzyusko.github.io/react-native-keyboard-controller/ - 8: https://github.com/facebook/react-native/blob/main/CHANGELOG.md?plain=1 - 9: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327 - 10: https://expo.dev/changelog/2024/10-24-sdk-52-beta
Stable Version and Compatibility Confirmed
The latest stable version of react-native-keyboard-controller is indeed 1.16.2—recently published—and it fully supports React Native 0.76.1 (as part of the 0.76.x compatibility range). No changes are required.suite-native/app/package.json (1)
115-115: LGTM! Consistent dependency versioning.The version of react-native-keyboard-controller matches the one in the navigation package, maintaining consistency across the codebase.
yanascz
force-pushed
the
fix/native/keyboard-aware-scroll-view
branch
2 times, most recently
from
494256e to
9407245
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
suite-native/navigation/src/components/Screen.tsx (1)
20-32: Remove unused prop type.The
extraKeyboardAvoidingViewHeightprop is defined but no longer used after switching toreact-native-keyboard-controller.Apply this diff to remove the unused prop:
type ScreenProps = { children: ReactNode; header?: ReactNode; footer?: ReactNode; isScrollable?: boolean; backgroundColor?: Color; noHorizontalPadding?: boolean; noBottomPadding?: boolean; - extraKeyboardAvoidingViewHeight?: number; hasBottomInset?: boolean; refreshControl?: ScrollViewProps['refreshControl']; keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']; };
🧹 Nitpick comments (1)
suite-native/navigation/src/components/Screen.tsx (1)
123-127: Consider platform-specific keyboard avoiding behavior.While "height" behavior works, iOS typically uses "padding" behavior for smoother keyboard interactions. Consider using platform-specific behavior:
<KeyboardAvoidingView style={applyStyle(screenStyle)} keyboardVerticalOffset={spacings.sp16} - behavior="height" + behavior={Platform.OS === 'ios' ? 'padding' : 'height'} >Don't forget to add the import:
+import { Platform } from 'react-native';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (7)
suite-native/app/package.json(1 hunks)suite-native/app/src/App.tsx(2 hunks)suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx(1 hunks)suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx(0 hunks)suite-native/navigation/package.json(1 hunks)suite-native/navigation/src/components/Screen.tsx(3 hunks)suite-native/navigation/src/components/ScreenContentWrapper.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (5)
- suite-native/app/package.json
- suite-native/navigation/package.json
- suite-native/app/src/App.tsx
- suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx
- suite-native/navigation/src/components/ScreenContentWrapper.tsx
⏰ Context from checks skipped due to timeout of 90000ms (19)
- GitHub Check: PR-check / node-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: PR-check / node-override init-api-flaky
- GitHub Check: PR-check / web-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: PR-check / web-override init-api-flaky
- GitHub Check: prepare_android_test_app
- GitHub Check: build-deploy
- GitHub Check: build-deploy
- GitHub Check: run-desktop-tests (@group=wallet, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: run-desktop-tests (@group=settings, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: EAS Update
- GitHub Check: transport-e2e-test
- GitHub Check: run-desktop-tests (@group=device-management, trezor-user-env-unix)
- GitHub Check: build-web
- GitHub Check: test
- GitHub Check: run-desktop-tests (@group=suite, trezor-user-env-unix)
- GitHub Check: Setup and Cache Dependencies
- GitHub Check: build-web
- GitHub Check: Analyze with CodeQL (javascript)
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (3)
suite-native/navigation/src/components/Screen.tsx (3)
4-4: LGTM! Import of KeyboardAvoidingView.The import aligns with the PR objective to use
react-native-keyboard-controllerfor keyboard handling.
34-36: LGTM! Simple flex style for KeyboardAvoidingView.The style ensures the keyboard avoiding view takes full available space.
128-159: LGTM! Clean implementation of screen layout.The screen layout maintains proper structure with SystemBars, header, content, and footer while supporting keyboard avoidance.
yanascz
force-pushed
the
fix/native/keyboard-aware-scroll-view
branch
from
9407245 to
bcefc03
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
suite-native/navigation/src/components/Screen.tsx (1)
123-127: Consider making keyboard avoidance behavior configurable.While the current implementation works, different screens might require different keyboard avoidance behaviors. Consider exposing these props:
keyboardVerticalOffsetfor custom offset valuesbehaviorto support different adjustment strategies ("height", "position", "padding")type ScreenProps = { children: ReactNode; header?: ReactNode; footer?: ReactNode; + keyboardVerticalOffset?: number; + keyboardAvoidingBehavior?: 'height' | 'position' | 'padding'; // ... other props }; export const Screen = ({ children, header, footer, + keyboardVerticalOffset = spacings.sp16, + keyboardAvoidingBehavior = 'height', // ... other props }: ScreenProps) => { // ... other code return ( <KeyboardAvoidingView style={applyStyle(screenStyle)} - keyboardVerticalOffset={spacings.sp16} - behavior="height" + keyboardVerticalOffset={keyboardVerticalOffset} + behavior={keyboardAvoidingBehavior} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (8)
scripts/list-outdated-dependencies/mobile-dependencies.txt(1 hunks)suite-native/app/package.json(1 hunks)suite-native/app/src/App.tsx(2 hunks)suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx(1 hunks)suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx(0 hunks)suite-native/navigation/package.json(1 hunks)suite-native/navigation/src/components/Screen.tsx(3 hunks)suite-native/navigation/src/components/ScreenContentWrapper.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
- suite-native/navigation/package.json
- suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx
- suite-native/navigation/src/components/ScreenContentWrapper.tsx
- suite-native/app/src/App.tsx
- scripts/list-outdated-dependencies/mobile-dependencies.txt
- suite-native/app/package.json
⏰ Context from checks skipped due to timeout of 90000ms (18)
- GitHub Check: PR-check / node-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: PR-check / web-override init-api-flaky
- GitHub Check: PR-check / node-override init-api-flaky
- GitHub Check: PR-check / web-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: build-deploy
- GitHub Check: build-deploy
- GitHub Check: prepare_android_test_app
- GitHub Check: run-desktop-tests (@group=wallet, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: EAS Update
- GitHub Check: run-desktop-tests (@group=settings, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: run-desktop-tests (@group=device-management, trezor-user-env-unix)
- GitHub Check: build-web
- GitHub Check: run-desktop-tests (@group=suite, trezor-user-env-unix)
- GitHub Check: Setup and Cache Dependencies
- GitHub Check: test
- GitHub Check: Analyze with CodeQL (javascript)
- GitHub Check: build-web
- GitHub Check: transport-e2e-test
🔇 Additional comments (3)
suite-native/navigation/src/components/Screen.tsx (3)
4-4: LGTM! Import and type changes align with the new keyboard handling approach.The changes correctly integrate the new keyboard controller library while cleaning up the obsolete keyboard height prop.
Also applies to: 20-32
34-36: LGTM! Style definition ensures proper keyboard avoidance behavior.The
flex: 1style is essential forKeyboardAvoidingViewto calculate and adjust its dimensions correctly.
128-159: LGTM! Component hierarchy maintains proper layout structure.The nested components are correctly organized within the
KeyboardAvoidingView, ensuring proper keyboard handling while preserving the existing layout behavior.
yanascz
force-pushed
the
fix/native/keyboard-aware-scroll-view
branch
2 times, most recently
from
de09d27 to
f3e8a3a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
suite-native/navigation/src/components/Screen.tsx (1)
28-28: Remove unused prop type.The
extraKeyboardAvoidingViewHeightprop is no longer used in the component implementation since keyboard handling is now managed byreact-native-keyboard-controller.Apply this diff to remove the unused prop:
- extraKeyboardAvoidingViewHeight?: number;
🧹 Nitpick comments (1)
suite-native/navigation/src/components/Screen.tsx (1)
123-127: Consider platform-specific keyboard behavior.While
behavior="height"works well on Android, iOS typically benefits from using"padding"behavior for smoother keyboard interactions.Consider updating the behavior prop to be platform-specific:
- behavior="height" + behavior={Platform.OS === 'ios' ? 'padding' : 'height'}Don't forget to add the Platform import:
-import { ScrollViewProps, View } from 'react-native'; +import { Platform, ScrollViewProps, View } from 'react-native';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (10)
scripts/list-outdated-dependencies/mobile-dependencies.txt(1 hunks)suite-native/app/package.json(1 hunks)suite-native/app/src/App.tsx(2 hunks)suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx(1 hunks)suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx(0 hunks)suite-native/navigation/package.json(1 hunks)suite-native/navigation/src/components/Screen.tsx(3 hunks)suite-native/navigation/src/components/ScreenContentWrapper.tsx(2 hunks)suite-native/test-utils/package.json(1 hunks)suite-native/test-utils/src/expoMock.js(1 hunks)
💤 Files with no reviewable changes (1)
- suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
- suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx
- suite-native/test-utils/src/expoMock.js
- suite-native/test-utils/package.json
- suite-native/navigation/src/components/ScreenContentWrapper.tsx
- suite-native/navigation/package.json
- suite-native/app/package.json
- scripts/list-outdated-dependencies/mobile-dependencies.txt
- suite-native/app/src/App.tsx
⏰ Context from checks skipped due to timeout of 90000ms (18)
- GitHub Check: PR-check / node-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: PR-check / node-override init-api-flaky
- GitHub Check: PR-check / web-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: PR-check / web-override init-api-flaky
- GitHub Check: build-deploy
- GitHub Check: build-deploy
- GitHub Check: prepare_android_test_app
- GitHub Check: run-desktop-tests (@group=wallet, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: EAS Update
- GitHub Check: run-desktop-tests (@group=settings, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: build-web
- GitHub Check: run-desktop-tests (@group=device-management, trezor-user-env-unix)
- GitHub Check: build-web
- GitHub Check: transport-e2e-test
- GitHub Check: Setup and Cache Dependencies
- GitHub Check: Analyze with CodeQL (javascript)
- GitHub Check: run-desktop-tests (@group=suite, trezor-user-env-unix)
- GitHub Check: test
🔇 Additional comments (2)
suite-native/navigation/src/components/Screen.tsx (2)
34-36: LGTM!The new
screenStylecorrectly ensures theKeyboardAvoidingViewtakes up the full screen space.
95-106: Add documentation for keyboard handling behavior.Since this component implements critical keyboard handling logic, it would be beneficial to:
- Document the keyboard behavior in the component's JSDoc.
- Test the keyboard interactions on both iOS and Android devices.
Could you verify the keyboard behavior works as expected on both platforms? Pay special attention to:
- Keyboard appearance/disappearance animations
- Content shifting when keyboard shows/hides
- Interaction with different input fields
yanascz
force-pushed
the
fix/native/keyboard-aware-scroll-view
branch
from
f3e8a3a to
7996c6e
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
suite-native/navigation/src/components/Screen.tsx (1)
123-127: Consider platform-specific keyboard behavior.While the "height" behavior works well on iOS, Android might benefit from a different behavior. Consider using platform-specific behavior:
<KeyboardAvoidingView style={applyStyle(screenStyle)} keyboardVerticalOffset={spacings.sp16} - behavior="height" + behavior={Platform.OS === 'ios' ? 'height' : 'padding'} >Don't forget to add the import:
+import { Platform } from 'react-native';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (10)
scripts/list-outdated-dependencies/mobile-dependencies.txt(1 hunks)suite-native/app/package.json(1 hunks)suite-native/app/src/App.tsx(2 hunks)suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx(1 hunks)suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx(0 hunks)suite-native/navigation/package.json(1 hunks)suite-native/navigation/src/components/Screen.tsx(3 hunks)suite-native/navigation/src/components/ScreenContentWrapper.tsx(2 hunks)suite-native/test-utils/package.json(1 hunks)suite-native/test-utils/src/expoMock.js(1 hunks)
💤 Files with no reviewable changes (1)
- suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
- suite-native/test-utils/package.json
- scripts/list-outdated-dependencies/mobile-dependencies.txt
- suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx
- suite-native/navigation/package.json
- suite-native/app/src/App.tsx
- suite-native/navigation/src/components/ScreenContentWrapper.tsx
- suite-native/app/package.json
- suite-native/test-utils/src/expoMock.js
⏰ Context from checks skipped due to timeout of 90000ms (19)
- GitHub Check: PR-check / node-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: PR-check / node-override init-api-flaky
- GitHub Check: PR-check / web-override init-api-flaky
- GitHub Check: PR-check / web-authorizeCoinjoin cancelCoinjoinAuthorization passphrase unlockPath setBusy checkFirmwareAuthenticity keepSession cancel.test info.test resetDevice-api
- GitHub Check: build-deploy
- GitHub Check: build-deploy
- GitHub Check: run-desktop-tests (@group=wallet, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: run-desktop-tests (@group=settings, trezor-user-env-unix bitcoin-regtest)
- GitHub Check: EAS Update
- GitHub Check: transport-e2e-test
- GitHub Check: run-desktop-tests (@group=device-management, trezor-user-env-unix)
- GitHub Check: Setup and Cache Dependencies
- GitHub Check: prepare_android_test_app
- GitHub Check: test
- GitHub Check: build-web
- GitHub Check: Analyze with CodeQL (javascript)
- GitHub Check: build-web
- GitHub Check: run-desktop-tests (@group=suite, trezor-user-env-unix)
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (2)
suite-native/navigation/src/components/Screen.tsx (2)
34-36: LGTM!The new
screenStylecorrectly ensures theKeyboardAvoidingViewtakes full available space.
125-125: Verify keyboard vertical offset.The
sp16spacing might not be sufficient for all screen sizes and orientations. Consider making this value dynamic based on the device's screen size or navigation bar height.
| @@ -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'; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove unused prop type.
The extraKeyboardAvoidingViewHeight prop is defined in ScreenProps but is no longer used after migrating to react-native-keyboard-controller.
Apply this diff to remove the unused prop:
type ScreenProps = {
children: ReactNode;
header?: ReactNode;
footer?: ReactNode;
isScrollable?: boolean;
backgroundColor?: Color;
noHorizontalPadding?: boolean;
noBottomPadding?: boolean;
- extraKeyboardAvoidingViewHeight?: number;
hasBottomInset?: boolean;
refreshControl?: ScrollViewProps['refreshControl'];
keyboardDismissMode?: ScrollViewProps['keyboardDismissMode'];
};Also applies to: 20-32
Resolves #16697