fix: keyboard overlapping the input element #6
Conversation
|
|
WalkthroughThis update modifies the Expo React Native playground app and the React Native package. The playground app receives dependency upgrades, configuration changes, and refactoring of its entry point from JavaScript to TypeScript. Several configuration files are removed or updated, Changes
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![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)
apps/playground/index.ts (1)
1-8: Minimal TypeScript entry point looks correct
registerRootComponent(App);replaces the old JS bootstrap cleanly; no functional concerns.If you previously suppressed noisy warnings via
LogBox.ignoreAllLogs(), consider carrying that over here when needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/playground/assets/splash.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
apps/playground/.gitignore(1 hunks)apps/playground/.npmrc(1 hunks)apps/playground/babel.config.js(0 hunks)apps/playground/index.js(0 hunks)apps/playground/index.ts(1 hunks)apps/playground/metro.config.js(0 hunks)apps/playground/package.json(1 hunks)apps/playground/tsconfig.json(1 hunks)packages/react-native/package.json(1 hunks)packages/react-native/src/components/survey-web-view.tsx(5 hunks)packages/react-native/src/lib/user/update-queue.ts(5 hunks)
💤 Files with no reviewable changes (3)
- apps/playground/babel.config.js
- apps/playground/index.js
- apps/playground/metro.config.js
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/playground/index.ts (1)
apps/playground/src/app.tsx (1)
App(15-108)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (20)
apps/playground/.npmrc (1)
1-1: No action needed – pnpm is the sole package manager
We have a pnpm-workspace.yaml and a pnpm-lock.yaml at the repo root, with no Yarn or npm lockfiles present. Since the monorepo uses pnpm exclusively,node-linker=hoistedin apps/playground/.npmrc is valid and will be respected by pnpm.packages/react-native/package.json (1)
48-53: Confirmed availability of React 19.0.0 and React Native 0.79.4Both
react@19.0.0andreact-native@0.79.4are published on npm, so specifying these versions will not break installs.apps/playground/.gitignore (1)
10-14: Nice ignore additionsIgnoring
expo-env.d.tsand Kotlin build artefacts keeps the repo clean.apps/playground/tsconfig.json (1)
2-5: Ordering fix LGTMPlacing
"extends"at the top makes the config valid; no further issues spotted.packages/react-native/src/lib/user/update-queue.ts (5)
12-12: Good improvement for cross-platform compatibility.Changing from
NodeJS.TimeouttoReturnType<typeof setTimeout>makes the code more generic and compatible across different JavaScript environments, which is essential for React Native applications.
87-88: Formatting improvement enhances readability.The multi-line assignment improves code readability without changing functionality.
107-108: Consistent destructuring pattern.The destructuring assignment follows consistent patterns and improves readability.
117-120: Improved conditional formatting.The multi-line conditional check enhances readability and maintainability.
155-158: Consistent formatting for setTimeout call.The multi-line setTimeout assignment follows consistent formatting patterns used elsewhere in the file.
apps/playground/package.json (4)
2-2: Simplified package name is appropriate for a playground app.The change from "@formbricks/demo-react-native" to "playground" simplifies the package name and is appropriate for a development/testing environment.
4-4: Entry point change to TypeScript is consistent with modernization.Changing the main entry point from
index.jstoindex.tsaligns with the TypeScript migration mentioned in the AI summary.
6-6: Good addition of --reset-cache flag for development.Adding
--reset-cacheto the dev script helps prevent caching issues during development, which is particularly useful when making significant changes.
13-17: Confirmed compatibility of React 19.0.0, React Native 0.79.4, and Expo 53.0.13All updated versions satisfy each other’s peerDependencies:
- react-native@0.79.4 requires react ^19.0.0
- expo@53.0.13 accepts any react/react-native range
No further changes required.
packages/react-native/src/components/survey-web-view.tsx (7)
9-9: Good addition of KeyboardAvoidingView for keyboard overlap fix.Importing
KeyboardAvoidingViewdirectly addresses the PR objective of fixing keyboard overlapping input elements.
22-24: Component refactoring improves consistency.Changing from destructuring to accepting a
propsparameter is a good practice that makes the component more consistent and easier to extend.
112-116: Excellent implementation of keyboard avoidance solution.The
KeyboardAvoidingViewwithbehavior="padding"wrapping the WebView directly addresses the keyboard overlap issue mentioned in the PR objectives. This will ensure that when the keyboard appears, the content is properly adjusted to remain visible.
144-144: Good addition of scrollEnabled={false} for modal behavior.Disabling scroll in the WebView is appropriate for a modal survey interface, preventing unintended scrolling that could interfere with the form interaction.
147-147: Useful addition of webviewDebuggingEnabled for development.Enabling WebView debugging helps with troubleshooting WebView issues during development, which is particularly useful for form interactions.
251-263: Well-structured styling with proper modal overlay.The StyleSheet implementation is clean and provides:
- Proper modal container with semi-transparent background (
rgba(0, 0, 0, 0.5))- Flexible keyboard avoiding view
- Transparent WebView background
This enhances the user experience by providing visual separation between the survey and the underlying content.
117-244: Comprehensive WebView configuration addresses multiple concerns.The WebView configuration includes important security and functionality settings:
- Origin whitelist for security
- Proper content mode and JavaScript enablement
- Mixed content handling
- File access controls
- Robust message handling with error catching
The message handling logic correctly updates all references to use
props.surveyinstead of the destructured variable.
|
4 participants
This pull request addresses a common mobile UX issue where the keyboard overlaps input elements in the Formbricks React Native SDK, making it difficult for users to see what they're typing.
Key Changes:
Keyboard Handling: Implements proper keyboard avoidance behavior to prevent the keyboard from covering input fields
Input Element Visibility: Ensures input elements remain visible and accessible when the keyboard is displayed
User Experience: Improves the overall user experience by maintaining proper viewport visibility during text input
Technical Details:
The PR changes focus on:
Survey web view components (packages/react-native/src/components/survey-web-view.tsx)
User update queue functionality (packages/react-native/src/lib/user/update-queue.ts)
Playground app configuration and setup files
This fix resolves a critical usability issue that would have prevented users from effectively interacting with form inputs on mobile devices, particularly important for a survey/feedback collection SDK where user input is central to the functionality.
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores