Commit 3ab39a0
authored
fix: attach keyboard tracking view in advance and only when window has been changed (#1170)
## 📜 Description
Fixed strange animation introduced by
`react-native-keyboard-controller`.
## 💡 Motivation and Context
This regression was introduced in
#1158
Basiucally I discovered 2 issues:
- the tracking view could be attached later to the window so we could
see "unreal" values, where keyboard height would be equal to whole
screen size and `progress` could be 2+
#1166 (comment)
- since we start to attach tracking view to each new window we can
attach it to system alerts etc.
#1169
So the manner that we choose was slightly agressive. The original issue
was caused by fact that tracking view gets detached when modal appears.
But when `Alert`/transparent `Modal` are shown, then we don't need to
re-attach a veiw, because old view is not detached. Additionally I
didin't like the fact that we subscribe to
`didBecomeVisibleNotification` event, which gets triggered every time
before the keyboard appears (potentially it may slow down the app).
So in this PR I decided to re-work the approach. Now instead of "try to
attach to top window root view" we follow approach "re-attach tracking
view only if current tracking view was detached". And this approach
works better because:
- we don't attach listener for each new window (attach it only when
necessary)
- we attach it **before** keyboard starts its movement.
So new solution seems to work better and fix all the issues caused by
its previous implementation.
Also I think it's worth to mention several solutions that didn't work:
- I tried to use KVO on `view.window` property and it didn't give a
desired behavior (listener was never called);
- I tried to avoid using `keyboardLayoutGuide`, but when keyboard
disappear - I again don't receive animation and animate instantly to the
end position 🤷♂️
- I tried to attach tracking view to window but in this case it's not
tracking any updates and it's not visible 🤷♂️
Closes
#1169
## 📢 Changelog
<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->
### iOS
- added `isAttaching` property (`willMove` can be called when we call
`removeFromSuperview`/`addSubview` inside `attachToTopmostView` and we
need to filter out these operations to avoid potential bugs;
- replace `didBecomeVisibleNotification` mechanism with
`willMove(toWindow`;
- call `attachToTopmostView` pro-actively on first mount to start window
observation.
## 🤔 How Has This Been Tested?
Tested in example app + repro (iPhone 16 Pro - iOS 26.0, iPhone 14 Pro -
iOS 16.4)
## 📸 Screenshots (if appropriate):
|Before|After|Issue|
|------|-----|------|
|<video
src="https://github.com/user-attachments/assets/0b7ab951-5a19-400e-b540-061df2c933a9">|<video
src="https://github.com/user-attachments/assets/8653bee3-78c4-4b18-a6ea-312923779bd7">|https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1166#issuecomment-3419679794|
|<video
src="https://github.com/user-attachments/assets/a48fb605-d7e9-484a-bec1-c87d601cdd85">|<video
src="https://github.com/user-attachments/assets/614b9c78-b8ae-4918-9e06-8f18e1516a8f">|https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1169|
## 📝 Checklist
- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed1 parent 0a6d012 commit 3ab39a0
1 file changed
+11
-6
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
15 | 15 | | |
16 | 16 | | |
17 | 17 | | |
| 18 | + | |
18 | 19 | | |
19 | 20 | | |
20 | 21 | | |
| |||
55 | 56 | | |
56 | 57 | | |
57 | 58 | | |
58 | | - | |
59 | | - | |
60 | | - | |
61 | | - | |
62 | | - | |
63 | | - | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
64 | 67 | | |
65 | 68 | | |
66 | 69 | | |
67 | 70 | | |
68 | 71 | | |
69 | 72 | | |
70 | 73 | | |
| 74 | + | |
71 | 75 | | |
72 | 76 | | |
73 | 77 | | |
| |||
87 | 91 | | |
88 | 92 | | |
89 | 93 | | |
| 94 | + | |
90 | 95 | | |
91 | 96 | | |
92 | 97 | | |
| |||
0 commit comments