Skip to content

dynamically layout the Note and Result based on keyboard#21

Open
TDHTTTT wants to merge 4 commits into
zehfernandes:mainfrom
TDHTTTT:feature-flexbox
Open

dynamically layout the Note and Result based on keyboard#21
TDHTTTT wants to merge 4 commits into
zehfernandes:mainfrom
TDHTTTT:feature-flexbox

Conversation

@TDHTTTT
Copy link
Copy Markdown

@TDHTTTT TDHTTTT commented Aug 20, 2022

  • use flexbox to dynamically layout
  • use KeyboardAvoidingView to adjust the height so that flexbox can
    adjust according
    • TODO: have more control with flexGrow/flexShrink
      (reference)

- use flexbox to dynamically layout
- use KeyboardAvoidingView to adjust the height so that flexbox can
  adjust according
  - TODO: have more control with flexGrow/flexShrink
    ([reference](https://reactnative.dev/docs/flexbox#flex-basis-grow-and-shrink))
@TDHTTTT
Copy link
Copy Markdown
Author

TDHTTTT commented Aug 20, 2022

relevant issues: #19 #7

@zehfernandes
Copy link
Copy Markdown
Owner

Hey @TDHTTTT,

Thanks for picking this issue.

I found some problems testing on an iPhone device:

  • The result box is changing position depending on the size of the word result
  • Scrolling the result is dismissing the keyboard; this action should happen only on tap.
RPReplay_Final1661395845.MP4

What devices did you have a chance to test with?

Comment thread pages/Editor.js Outdated
width: "100%",
position: "absolute",
height: 165,
minheight: 165,
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

typo: minHeight

@TDHTTTT
Copy link
Copy Markdown
Author

TDHTTTT commented Aug 27, 2022

Hey @zehfernandes thanks for the reply! I tested with my iPhone XS MAX. I will take a look at the issues and try to fix them over the weekend.

@TDHTTTT
Copy link
Copy Markdown
Author

TDHTTTT commented Aug 28, 2022

@zehfernandes I think I fixed the onDrag keyboard dismiss. However, the size of the result box is a bit tricky to debug so I don't have a good solution now. Also, interestingly, the issue doesn't seem to appear in simulator. Please see the video attached which is recorded on a iPhone 13 mini simulator.

Simulator.Screen.Recording.-.iPhone.13.mini.-.2022-08-27.at.17.31.34.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants