Skip to content

Commit

Permalink
docs: added tips and info badges for KeyboardAwareScrollView page (#…
Browse files Browse the repository at this point in the history
…462)

## 📜 Description

Added tips and info badges to `KeyboardAwareScrollView`.

## 💡 Motivation and Context

To simplify search and migration.

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

### Docs

- added reference to original props names;
- added a tip when to use `extraKeyboardSpace`

## 🤔 How Has This Been Tested?

Tested locally and on CI.

## 📸 Screenshots (if appropriate):

<img width="990" alt="image"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/652dc391-5227-404c-b018-d0d39d1ebfbe">

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko authored Jun 4, 2024
1 parent 0e41662 commit 1d2cfbd
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 2 deletions.
14 changes: 13 additions & 1 deletion docs/docs/api/components/keyboard-aware-scroll-view.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props).

The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`.

:::info `react-native-keyboard-aware-scroll-view` equivalent
This property is equivalent to [extraHeight](https://github.com/APSL/react-native-keyboard-aware-scroll-view/tree/9eee405f7b3e261faf86a0fc8e495288d91c853e?tab=readme-ov-file#props) from original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package.
:::

### `disableScrollOnKeyboardHide`

Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`.
Expand All @@ -81,7 +85,15 @@ A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabl

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.
:::tip When to use it?
It can be useful when there is some space between the `KeyboardAwareScrollView` and the _**bottom edge**_ 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.

If you have _**sticky elements**_ above the keyboard and want to extend the keyboard frame in the bottom of `ScrollView`, then you can specify a **positive** value.
:::

:::info `react-native-keyboard-aware-scroll-view` equivalent
This property acts as [extraScrollHeight](https://github.com/APSL/react-native-keyboard-aware-scroll-view/tree/9eee405f7b3e261faf86a0fc8e495288d91c853e?tab=readme-ov-file#props) from original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package.
:::

## Integration with 3rd party components

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props).

The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`.

:::info `react-native-keyboard-aware-scroll-view` equivalent
This property is equivalent to [extraHeight](https://github.com/APSL/react-native-keyboard-aware-scroll-view/tree/9eee405f7b3e261faf86a0fc8e495288d91c853e?tab=readme-ov-file#props) from original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package.
:::

### `disableScrollOnKeyboardHide`

Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props).

The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`.

:::info `react-native-keyboard-aware-scroll-view` equivalent
This property is equivalent to [extraHeight](https://github.com/APSL/react-native-keyboard-aware-scroll-view/tree/9eee405f7b3e261faf86a0fc8e495288d91c853e?tab=readme-ov-file#props) from original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package.
:::

### `disableScrollOnKeyboardHide`

Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props).

The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`.

:::info `react-native-keyboard-aware-scroll-view` equivalent
This property is equivalent to [extraHeight](https://github.com/APSL/react-native-keyboard-aware-scroll-view/tree/9eee405f7b3e261faf86a0fc8e495288d91c853e?tab=readme-ov-file#props) from original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package.
:::

### `disableScrollOnKeyboardHide`

Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`.
Expand All @@ -81,7 +85,15 @@ A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabl

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.
:::tip When to use it?
It can be useful when there is some space between the `KeyboardAwareScrollView` and the _**bottom edge**_ 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.

If you have _**sticky elements**_ above the keyboard and want to extend the keyboard frame in the bottom of `ScrollView`, then you can specify a **positive** value.
:::

:::info `react-native-keyboard-aware-scroll-view` equivalent
This property acts as [extraScrollHeight](https://github.com/APSL/react-native-keyboard-aware-scroll-view/tree/9eee405f7b3e261faf86a0fc8e495288d91c853e?tab=readme-ov-file#props) from original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package.
:::

## Integration with 3rd party components

Expand Down

0 comments on commit 1d2cfbd

Please sign in to comment.