Commit 9011a90
authored
fix: disabling KeyboardAwareScrollView didn't prevent useAnimatedStyle flickering (#921)
## 📜 Description
- Completely remove the `Reanimated.View` from `KeyboardAwareScrollView`
when it's not enabled
## 💡 Motivation and Context
- There's an [open issue with react-native
Fabric](facebook/react-native#49694) that
manifests as flickering and/or modal height issues when
react-native-reanimated `useAnimatedStyle` values get out-of-sync with
their underlying react native Fabric style values.
- Until the open issue is fixed, the simplest workaround for the issue
seems to be removing instances of `useAnimatedStyle`
- This is the same underlying motivation as your recent PR:
#898
- My app has an issue where utilizing `KeyboardAwareScrollView` and then
navigating to a new screen causes flickering in the second screen (see
repro video below)
- Others have reported similar issues: e.g.
react-navigation/react-navigation#12410
- I hoped that setting `enabled` based on whether the first screen was
focused or not (using react navigation's [`useIsFocused`
hook](https://reactnavigation.org/docs/use-is-focused/)) would work
around the issue, but it didn't
- Fortunately, making the change in this PR, in addition to the
`enabled={isFocused}` change mentioned above, fixed things (see no-repro
video below)
- For reference, here's my app's full [workaround
commit](High5Apps/organize-rn@16f25a8)
with a [patch-package](https://github.com/ds300/patch-package) change
that's the same as this PR
- My app is using `react-native-keyboard-controller@1.17.0` (current
latest)
## 📢 Changelog
### JS
- Completely remove the `Reanimated.View` from `KeyboardAwareScrollView`
when it's not enabled
### iOS
- N/A
### Android
- N/A
## 🤔 How Has This Been Tested?
- Manually verified that:
- the same set of repro steps showed the issue mentioned above without
this PR change, but did not repro the issue with this PR change
- keyboard avoidance still works on the screen's initial showing as well
as when it's navigated back to
- nothing breaks when navigating away from the screen while the keyboard
is still active
## 📸 Screenshots (if appropriate):
### Repro (without this PR)
https://github.com/user-attachments/assets/e4b2b886-a451-4bbe-9193-3825ed945fc7
### No-repro (with this PR)
https://github.com/user-attachments/assets/cba518ab-befc-40ac-a3b8-898d4057ee63
## 📝 Checklist
- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed1 parent 986b996 commit 9011a90
1 file changed
Lines changed: 1 addition & 1 deletion
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
383 | 383 | | |
384 | 384 | | |
385 | 385 | | |
386 | | - | |
| 386 | + | |
387 | 387 | | |
388 | 388 | | |
389 | 389 | | |
| |||
0 commit comments