Skip to content

Commit

Permalink
fix: KeyboardAvoidingView is not reacting on keyboard movements if …
Browse files Browse the repository at this point in the history
…was mounted when keyboard is open (#391)

## 📜 Description

Update `initialFrame` on first render.

## 💡 Motivation and Context

The problem with the old condition is the case when screen that uses
`KeyboardAvoidingView` is pushed/gets mounted and the keyboard is
already in open state. In this case we don't update `initialFrame`
(because we update it only when `onLayout` is fired and keyboard is
closed - to avoid concurrent re-calculations) and it remains always
`null`. As a result `relativeKeyboardHeight` returns `0` and we
interpolate from `[0, 1]` to `[0, 0]`, so our `padding` will be always
`0`.

In this PR I'm fixing this problem by adding `initialFrame.value ===
null` condition. Such check will be executed only on initial mount. And
since `relativeKeyboardHeight` returns `0` when `initialFrame.value ===
null` -> we will not have concurrent calculations that can interfere
with each other.

## 📢 Changelog

### JS

- added `|| initialFrame.value === null` check in `onLayout` callback

## 🤔 How Has This Been Tested?

Tested manually on iPhone 15 Pro (iOS 17.2, simulator).

## 📸 Screenshots (if appropriate):

|Before|After|
|-------|-----|
|<video
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/01ca7547-a0a7-4059-8251-3479f1c67eac">|<video
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/84e014ae-1c15-4aac-aa74-ffe62125c3af">|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko committed Mar 20, 2024
1 parent 22f6de8 commit 8a853a1
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/components/KeyboardAvoidingView/index.tsx
Expand Up @@ -79,7 +79,7 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
"worklet";

if (keyboard.isClosed.value) {
if (keyboard.isClosed.value || initialFrame.value === null) {
initialFrame.value = layout;
}
}, []);
Expand Down

0 comments on commit 8a853a1

Please sign in to comment.