From 1d2cfbd4a80e58235f3e5161bb72f5b79fef7765 Mon Sep 17 00:00:00 2001 From: Kirill Zyusko Date: Tue, 4 Jun 2024 09:48:20 +0200 Subject: [PATCH] docs: added tips and info badges for `KeyboardAwareScrollView` page (#462) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📜 Description Added tips and info badges to `KeyboardAwareScrollView`. ## 💡 Motivation and Context To simplify search and migration. ## 📢 Changelog ### 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): image ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed --- .../api/components/keyboard-aware-scroll-view.mdx | 14 +++++++++++++- .../api/components/keyboard-aware-scroll-view.mdx | 4 ++++ .../api/components/keyboard-aware-scroll-view.mdx | 4 ++++ .../api/components/keyboard-aware-scroll-view.mdx | 14 +++++++++++++- 4 files changed, 34 insertions(+), 2 deletions(-) diff --git a/docs/docs/api/components/keyboard-aware-scroll-view.mdx b/docs/docs/api/components/keyboard-aware-scroll-view.mdx index 152717b2bb..32e3bea2b8 100644 --- a/docs/docs/api/components/keyboard-aware-scroll-view.mdx +++ b/docs/docs/api/components/keyboard-aware-scroll-view.mdx @@ -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`. @@ -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 diff --git a/docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx b/docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx index 88b54fc503..75ac289643 100644 --- a/docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx +++ b/docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx @@ -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`. diff --git a/docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx b/docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx index 88b54fc503..75ac289643 100644 --- a/docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx +++ b/docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx @@ -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`. diff --git a/docs/versioned_docs/version-1.12.0/api/components/keyboard-aware-scroll-view.mdx b/docs/versioned_docs/version-1.12.0/api/components/keyboard-aware-scroll-view.mdx index 152717b2bb..32e3bea2b8 100644 --- a/docs/versioned_docs/version-1.12.0/api/components/keyboard-aware-scroll-view.mdx +++ b/docs/versioned_docs/version-1.12.0/api/components/keyboard-aware-scroll-view.mdx @@ -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`. @@ -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