Skip to content

Commit 9011a90

Browse files
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 changed
1 parent 986b996 commit 9011a90

1 file changed

Lines changed: 1 addition & 1 deletion

File tree

  • src/components/KeyboardAwareScrollView

src/components/KeyboardAwareScrollView/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -383,7 +383,7 @@ const KeyboardAwareScrollView = forwardRef<
383383
onLayout={onScrollViewLayout}
384384
>
385385
{children}
386-
<Reanimated.View style={view} />
386+
{enabled && <Reanimated.View style={view} />}
387387
</ScrollViewComponent>
388388
);
389389
},

0 commit comments

Comments
 (0)