Skip to content

Commit

Permalink
feat:add keyboardAwareScrollView in scrollBottomOffset (#455)
Browse files Browse the repository at this point in the history
## 📜 Description

<!-- Describe your changes in detail -->


## 💡 Motivation and Context

<!-- Why is this change required? What problem does it solve? -->
<!-- If it fixes an open issue, please link to the issue here. -->

If there is another view under "keyboardAwareScrollView", I think the
keyboard should be able to change the height to be pushed

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

- Added `KeyboardAwareScrollView` in **scrollBottomOffset** props

## 🤔 How Has This Been Tested?

Please refer to the video below

<!-- Please describe in detail how you tested your changes. -->
<!-- Include details of your testing environment, and the tests you ran
to -->
<!-- see how your change affects other areas of the code, etc. -->

## 📸 Screenshots (if appropriate):

<!-- Add screenshots/video if needed -->
<!-- That would be highly appreciated if you can add how it looked
before and after your changes -->

Before


https://github.com/kirillzyusko/react-native-keyboard-controller/assets/57166515/ce62642e-b251-407f-a3f2-bac94869f03a

After


https://github.com/kirillzyusko/react-native-keyboard-controller/assets/57166515/58134068-eaa7-47d4-af76-e5dcd80a4d11


## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

---------

Co-authored-by: kirillzyusko <zyusko.kirik@gmail.com>
  • Loading branch information
box8741 and kirillzyusko authored May 31, 2024
1 parent c8ff1cf commit bd66950
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 2 deletions.
6 changes: 6 additions & 0 deletions docs/docs/api/components/keyboard-aware-scroll-view.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,12 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden,

A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`.

### `extraKeyboardSpace`

Adjusting the bottom spacing of `KeyboardAwareScrollView`. Default is `0`.

It can be useful when there is some space between the `KeyboardAwareScrollView` and the bottom of the screen, and you don't want the full keyboard frame to be in the bottom. In such cases, you can specify a negative value.

## Integration with 3rd party components

### `FlatList`/`FlashList`/`SectionList` etc.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,12 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden,

A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`.

### `extraKeyboardSpace`

Adjusting the bottom spacing of `KeyboardAwareScrollView`. Default is `0`.

It can be useful when there is some space between the `KeyboardAwareScrollView` and the bottom of the screen, and you don't want the full keyboard frame to be in the bottom. In such cases, you can specify a negative value.

## Integration with 3rd party components

### `FlatList`/`FlashList`/`SectionList` etc.
Expand Down
12 changes: 10 additions & 2 deletions src/components/KeyboardAwareScrollView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ export type KeyboardAwareScrollViewProps = {
disableScrollOnKeyboardHide?: boolean;
/** Controls whether this `KeyboardAwareScrollView` instance should take effect. Default is `true` */
enabled?: boolean;
/** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */
extraKeyboardSpace?: number;
} & ScrollViewProps;

/*
Expand Down Expand Up @@ -83,6 +85,7 @@ const KeyboardAwareScrollView = forwardRef<
disableScrollOnKeyboardHide = false,
enabled = true,
onScroll: onScrollProps,
extraKeyboardSpace = 0,
...rest
},
ref,
Expand Down Expand Up @@ -265,7 +268,12 @@ const KeyboardAwareScrollView = forwardRef<
onMove: (e) => {
"worklet";

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

// if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
Expand All @@ -279,7 +287,7 @@ const KeyboardAwareScrollView = forwardRef<
scrollPosition.value = position.value;
},
},
[height, maybeScroll, disableScrollOnKeyboardHide],
[height, maybeScroll, disableScrollOnKeyboardHide, extraKeyboardSpace],
);

useAnimatedReaction(
Expand Down

0 comments on commit bd66950

Please sign in to comment.