Skip to content

Commit

Permalink
fix: google password manager breaks KeyboardAwareScrollView (#667)
Browse files Browse the repository at this point in the history
## 📜 Description

Fixed input hiding when google password manager pops up.

## 💡 Motivation and Context

The native code worked correctly, however when Google Password manager
popup appears, then we have next events:

```bash
onStart -> 0
onMove -> 289.66
onMove -> 289.44
onEnd -> 0
```

So because of this fact we kept bottom area (fake view). When keyboard
appear again, then we were animating this bottom view again from 0 to
290. But since in the beginning of the keyboard movement focused input
was above the keyboard - we don't perform `scrollTo` operation. But when
bottom padding collapses to `0` an then input moves behind the keyboard.
And since we don't call `scrollTo` it keeps its present there.

To fix the problem and don't break the state machine we need to
synchronize keyboardFrame (currentKeybaordFrame) in `onEnd` handler.
Thus when popup appears, the input will be moved to bottom. When
keyboard appear it'll correctly understand, that the keyboard will
overlap the input and thus it will push the input as expected.

Fixes
#665

## 📢 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 -->

### JS

- update `currentKeyboardFrame` in `onEnd` handler;
- create `syncKeyboardFrame` function.

## 🤔 How Has This Been Tested?

Tested manually on Pixel 7 Pro API 35.

## 📸 Screenshots (if appropriate):

|Before|After|
|-------|-----|
|<video
src="https://github.com/user-attachments/assets/4a468d1d-0e41-4ba8-9f61-677bcf96a4c2">|<video
src="https://github.com/user-attachments/assets/5341a649-3ae5-464d-ac11-a49e09524b9d">|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko authored Oct 30, 2024
1 parent cfc5b48 commit 4c327dc
Showing 1 changed file with 19 additions and 8 deletions.
27 changes: 19 additions & 8 deletions src/components/KeyboardAwareScrollView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import type {
import type {
FocusedInputLayoutChangedEvent,
FocusedInputSelectionChangedEvent,
NativeEvent,
} from "react-native-keyboard-controller";

export type KeyboardAwareScrollViewProps = {
Expand Down Expand Up @@ -190,6 +191,20 @@ const KeyboardAwareScrollView = forwardRef<
},
[bottomOffset, enabled, height, snapToOffsets],
);
const syncKeyboardFrame = useCallback(
(e: NativeEvent) => {
"worklet";

const keyboardFrame = interpolate(
e.height,
[0, keyboardHeight.value],
[0, keyboardHeight.value + extraKeyboardSpace],
);

currentKeyboardFrameHeight.value = keyboardFrame;
},
[extraKeyboardSpace],
);

const scrollFromCurrentPosition = useCallback(
(customHeight?: number) => {
Expand Down Expand Up @@ -308,13 +323,7 @@ const KeyboardAwareScrollView = forwardRef<
onMove: (e) => {
"worklet";

const keyboardFrame = interpolate(
e.height,
[0, keyboardHeight.value],
[0, keyboardHeight.value + extraKeyboardSpace],
);

currentKeyboardFrameHeight.value = keyboardFrame;
syncKeyboardFrame(e);

// if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
Expand All @@ -326,9 +335,11 @@ const KeyboardAwareScrollView = forwardRef<

keyboardHeight.value = e.height;
scrollPosition.value = position.value;

syncKeyboardFrame(e);
},
},
[maybeScroll, disableScrollOnKeyboardHide, extraKeyboardSpace],
[maybeScroll, disableScrollOnKeyboardHide, syncKeyboardFrame],
);

useAnimatedReaction(
Expand Down

0 comments on commit 4c327dc

Please sign in to comment.