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
  • Loading branch information
kirillzyusko committed Jun 3, 2024
1 parent 0e41662 commit 137088a
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 137088a

Please sign in to comment.