Skip to content

Commit

Permalink
fix: synchronize bottom padding with keyboard frame in `KeyboardAware…
Browse files Browse the repository at this point in the history
…ScrollView` (#332)

## 📜 Description

Synchronized bottom padding with keyboard frame in
`KeyboardAwareScrollView`.

## 💡 Motivation and Context

Original regression was introduced in
#257
([these](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/257/files#diff-b4493213c8dc470b5ba251af896d133130cc8996cee1118525e4eba1f3aa993bL87-L88)
code lines). I decided not animated bottom padding to potentially fix
the issue described in
#255 (comment)

However such approach is causing unsynchronized animations in certain
conditions and I'm not sure, that it actually fixes the problem
described in comment above.

So in this PR I'm reworking it again and bringing back animated
transitions 👀

Closes
#329

## 📢 Changelog

### JS

- added `currentKeyboardFrameHeight` variable;
- update `currentKeyboardFrameHeight` variable in `onMove` handler;
- use `currentKeyboardFrameHeight` for bottom padding in KASV.

## 🤔 How Has This Been Tested?

Tested manually on iPhone 15 Pro + e2e tests.

## 📸 Screenshots (if appropriate):

|Before|After|
|-------|-----|
|<video
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/a7e5e3d3-8ef0-4b69-8c21-2414b1899e91">|<video
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/bdd34dee-25bd-4491-8612-6048c88760bb">|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko authored Jan 13, 2024
1 parent 97b0954 commit 391e293
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion src/components/KeyboardAwareScrollView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
const scrollPosition = useSharedValue(0);
const position = useSharedValue(0);
const currentKeyboardFrameHeight = useSharedValue(0);
const keyboardHeight = useSharedValue(0);
const tag = useSharedValue(-1);
const initialKeyboardSize = useSharedValue(0);
Expand Down Expand Up @@ -211,6 +212,8 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
onMove: (e) => {
"worklet";

currentKeyboardFrameHeight.value = e.height;

maybeScroll(e.height);
},
onEnd: (e) => {
Expand Down Expand Up @@ -242,7 +245,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({

const view = useAnimatedStyle(
() => ({
paddingBottom: keyboardHeight.value,
paddingBottom: currentKeyboardFrameHeight.value,
}),
[],
);
Expand Down

0 comments on commit 391e293

Please sign in to comment.