dynamically layout the Note and Result based on keyboard

zehfernandes / wordnote

A simple and elegant notebook to write new words and discover their meanings and synonyms https://wordnote.app

652 stars 37 forks source link

dynamically layout the Note and Result based on keyboard #21

Open TDHTTTT opened 1 year ago

TDHTTTT commented 1 year ago

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)

TDHTTTT commented 1 year ago

relevant issues: #19 #7

zehfernandes commented 1 year ago

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.

https://user-images.githubusercontent.com/1891339/186565243-079db3ee-d6d8-416d-ae72-e292f5777d87.MP4

What devices did you have a chance to test with?

TDHTTTT commented 1 year ago

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 commented 1 year ago

@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.

https://user-images.githubusercontent.com/24703459/187052774-aab36e2c-87b0-4715-81c8-c3bc4fb08403.mp4