[iOS] KeyboardStickyView sometimes appears far above the keyboard

[salieflewis]

Describe the bug
A clear and concise description of what the bug is.

In some instances, the KeyboardStickyView component appears far above the keyboard. I'm only seeing this after migrating my app to the New Architecture.

Code snippet
Add your code snippet where error has been occurred.

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Expecting that the placement of the KeyboardStickyView is directly above the keyboard.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Desktop OS: [e.g. Windows 10, MacOS 10.15.5]
• Device: [e.g. iPhone8]
• OS: [e.g. iOS 10.0]
• RN version: [e.g. 0.68.2]
• RN architecture: [e.g. old/new or paper/fabric]
• JS engine: [e.g. JSC, Hermes, v8]
• Library version: [e.g. 1.2.0]

Additional context
Add any other context about the problem here.

[kirillzyusko]

@salieflewis which iOS version do you test?

[ste00martin]

i see this too; on ios 26

[kirillzyusko]

@ste00martin @salieflewis would it be possible to prepare a reproduction app?

[iankberry]

@kirillzyusko I updated the example app I used to reproduce to #1155 with the latest version of the library. Keep in mind this is all happening inside of a Modal so it could be related to that specifically.

Here are the useKeyboardHandler values when the keyboard is first opened:

 LOG  onStart: 345 percent 1
 LOG  onMove: 847.6769645139575 percent 2.4570346797506013
 LOG  onMove: 782.9345098286867 percent 2.2693753908077876
 LOG  onMove: 707.2238218486309 percent 2.0499241213003794
 LOG  onMove: 634.3758282661438 percent 1.8387705167134603
 LOG  onMove: 570.7683464884758 percent 1.6544010043144226
 LOG  onMove: 517.8134071230888 percent 1.5009084264437358
 LOG  onMove: 475.52119463682175 percent 1.3783223032951355
 LOG  onMove: 442.468658387661 percent 1.2825178503990173
 LOG  onMove: 417.1173132658005 percent 1.2090356906255086
 LOG  onMove: 397.9525430202484 percent 1.1534856319427491
 LOG  onMove: 383.6271602511406 percent 1.1119627833366394
 LOG  onMove: 373.0307112336159 percent 1.081248438358307
 LOG  onMove: 365.233067214489 percent 1.0586465716362
 LOG  onMove: 359.55278331041336 percent 1.0421819806098938
 LOG  onMove: 355.42069602012634 percent 1.0302049160003661
 LOG  onMove: 352.44106155633926 percent 1.0215682943662008
 LOG  onMove: 350.28063029050827 percent 1.0153061747550964
 LOG  onMove: 348.7499648332596 percent 1.0108694632848103
 LOG  onMove: 347.656190931797 percent 1.0076991041501364
 LOG  onMove: 346.87709498405457 percent 1.005440855026245
 LOG  onMove: 346.32467436790466 percent 1.003839635848999
 LOG  onMove: 345.93243050575256 percent 1.0027026971181234
 LOG  onMove: 345.65681928396225 percent 1.0019038240114848
 LOG  onEnd: 345 percent 1
 LOG  onStart: 251.33331298828125 percent 1
 LOG  onEnd: 345 percent 1
 LOG  onEnd: 251.33333333333331 percent 1

You can see the height starts much higher than the keyboard and decrements to the actual keyboard height. The issue with the extra onStart/onEnd event with "251" still exists as well. This one causes issues with the sticky view as it results in the view being stuck behind the keyboard if these values are not filtered out somehow.

Here are values when interactively dismissing the keyboard:

 LOG  onInteractive: 321.66666666666663 percent 1.279840848806366
 LOG  onInteractive: 319.33333333333337 percent 1.270557029177719
 LOG  onInteractive: 317 percent 1.2612732095490717
 LOG  onInteractive: 313.66666666666663 percent 1.2480106100795756
 LOG  onInteractive: 309 percent 1.2294429708222812
 LOG  onInteractive: 303.66666666666663 percent 1.2082228116710876
 LOG  onInteractive: 296.66666666666663 percent 1.1803713527851458
 LOG  onInteractive: 292 percent 1.1618037135278516
 LOG  onInteractive: 287.66666666666663 percent 1.1445623342175066
 LOG  onInteractive: 284.33333333333337 percent 1.131299734748011
 LOG  onInteractive: 282 percent 1.1220159151193634
 LOG  onInteractive: 279.66666666666663 percent 1.112732095490716
 LOG  onInteractive: 277.66666666666663 percent 1.1047745358090184
 LOG  onInteractive: 276 percent 1.0981432360742707
 LOG  onInteractive: 274.33333333333337 percent 1.0915119363395227
 LOG  onInteractive: 273.33333333333337 percent 1.0875331564986739
 LOG  onInteractive: 272.33333333333337 percent 1.083554376657825
 LOG  onInteractive: 272 percent 1.0822281167108754
 LOG  onInteractive: 271.66666666666663 percent 1.0809018567639257
 LOG  onInteractive: 270.33333333333337 percent 1.0755968169761276
 LOG  onInteractive: 268.66666666666663 percent 1.0689655172413792
 LOG  onInteractive: 267.33333333333337 percent 1.0636604774535812
 LOG  onInteractive: 266.33333333333337 percent 1.0596816976127323
 LOG  onInteractive: 265.66666666666663 percent 1.0570291777188328
 LOG  onInteractive: 265.33333333333337 percent 1.0557029177718835
 LOG  onInteractive: 263.33333333333337 percent 1.0477453580901859
 LOG  onInteractive: 257.66666666666663 percent 1.0251989389920424
 LOG  onInteractive: 245.33333333333337 percent 0.9761273209549074
 LOG  onInteractive: 226 percent 0.8992042440318303
 LOG  onInteractive: 202.33333333333337 percent 0.8050397877984087
 LOG  onInteractive: 175.33333333333337 percent 0.6976127320954909
 LOG  onInteractive: 123 percent 0.4893899204244032
 LOG  onInteractive: 64.66666666666663 percent 0.2572944297082227
 LOG  onInteractive: 18.66666666666663 percent 0.07427055702917758
 LOG  onInteractive: 93.66666666666663 percent 0.37267904509283806
 LOG  onStart: 0 percent 0
 LOG  onEnd: 344.99999999999994 percent 1
 LOG  onEnd: 0 percent 0
 LOG  onStart: 0 percent 0
 LOG  onMove: -77.68088068564725 percent -0.17708407451135394
 LOG  onEnd: 0 percent 0

Here the height values seem correct but the progress values start above "1" which is odd. There are also extra events that are emitted after the keyboard is fully dismissed.

Hope that helps!

[salieflewis]

@salieflewis which iOS version do you test?

Personally I'm testing on iOS 18

[kirillzyusko]

@iankberry I haven't tested yet, but I assume that #1170 may help to fix a problem... Don't you mind to try it out? (it will not fix a problem with interactive keyboard, but should fix bugs with strange values when keyboard simply appears/disappears)

[kirillzyusko]

@iankberry yeah, this fix #1170 will improve a situation:

So basically it will restore 1.19.0 behavior, but will contain some other fixes. Regarding problem of 251 keyboard height - I'm currently trying to fix it in #1161 👀 (basically iOS fires keyboardDidShow whenever it wants to fire and in certain cases it fires it with incorrect values, so my first idea is to dispatch keyboardDidShow on my own, currently experimenting with that idea in this PR)

[kirillzyusko]

@salieflewis may I ask you to provide a repro? Because I believe that repro from @iankberry may describe a different issue. Do you experience this issue after upgrading react-native-keyboard-controller from a specific version to another specific version?