Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix problems with BottomSheet and the report dialog #3297

Merged
merged 9 commits into from
Mar 21, 2024

Conversation

haileyok
Copy link
Contributor

@haileyok haileyok commented Mar 20, 2024

Why

Currently, when selecting the text input box in a report dialog, the input gets hidden behind the keyboard. This isn't great, as it requires the user to scroll down after selecting the box. It also messes with our "swipe to dismiss" gesture, since we have to stop using the on-drag keyboard dismiss mode.

Solution

Future

Using React Native's keyboardDidShow event isn't the optimal solution for iOS. It does not fire until the entire keyboard shows. There are some libraries that handle this, however as @pfrazee predicted, they do not play very well with the bottom sheet. This might be something worth investigating in the future if we feel like giving it some time.

https://github.com/kirillzyusko/react-native-keyboard-controller is one option that uses Reanimated and provides us with an onMove callback. This could work as a solution, however it comes with new difficulties on Android. This will require a deeper dive to figure out what our best option is on the two different platforms.

Screen_Recording_20240320_141949_Bluesky.mp4
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-03-20.at.14.22.59.mp4

Copy link

github-actions bot commented Mar 20, 2024

The Pull Request introduced fingerprint changes against the base commit: 81bc3ed

Fingerprint diff
[
  {
    "type": "file",
    "filePath": "package.json",
    "reasons": [
      "expoConfigPlugins"
    ],
    "hash": "2b56de89831e43f2242ec8c3f95426aa04fd21bc"
  }
]

Generated by PR labeler 🤖

Copy link
Collaborator

@pfrazee pfrazee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay looks good to me! tested on ios and android

@haileyok haileyok merged commit ad3dd9f into main Mar 21, 2024
5 checks passed
estrattonbailey added a commit that referenced this pull request Mar 21, 2024
* origin/main: (60 commits)
  Fix missing error on `PostThread` (#3295)
  Fix dialogs state references, fixes Android back button (#3314)
  [Statsig] Protect against early logEvent call crashing (#3315)
  Fix android splash jump (#3316)
  [Statsig] Onboarding and routing events (#3302)
  Fix problems with `BottomSheet` and the report dialog (#3297)
  bump pkg json version
  Adjust DateField timezone offset
  Fix key error on choose account
  Move some things around
  Bump button size on choose account
  Password flow tweaks
  Login form tweaks
  Remove log
  StepInfo tweaks
  Signup shell tweaks
  HostingProvider tweaks
  fix pencil svg in asset folder
  sort imports for files related to this PR
  dismiss keyboard when opening dialog
  ...
@haileyok haileyok deleted the hailey/keyboard-controller branch June 8, 2024 07:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants