From 33853e1d1c615123bbc8cfe7cf4e1d1f941ef737 Mon Sep 17 00:00:00 2001 From: Kirill Zyusko Date: Thu, 16 May 2024 11:22:54 +0200 Subject: [PATCH] docs: integration with `@gorhom/bottom-sheet` (#445) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📜 Description Added docs explaining how to integrate `KeyboardAwareScrollView` and `@gorhom/bottom-sheet`. ## 💡 Motivation and Context It may be no very obvious that you'll need to wrap it in additional HOCs. Inspired by https://github.com/kirillzyusko/react-native-keyboard-controller/discussions/309#discussioncomment-9215288 Closes https://github.com/kirillzyusko/react-native-keyboard-controller/issues/343 ## 📢 Changelog ### Docs - added a section about integration `KeyboardAwareScrollView` with `@gorhom/bottom-sheet`; ## 🤔 How Has This Been Tested? Tested via preview and `localhost:3000`. ## 📸 Screenshots (if appropriate): image ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed --- cspell.json | 3 +- .../components/keyboard-aware-scroll-view.mdx | 54 ++++++++++++++++++- .../components/keyboard-aware-scroll-view.mdx | 54 ++++++++++++++++++- 3 files changed, 108 insertions(+), 3 deletions(-) diff --git a/cspell.json b/cspell.json index 2cccf3873..0289fd007 100644 --- a/cspell.json +++ b/cspell.json @@ -109,7 +109,8 @@ "objc", "QWERT", "autoplayed", - "bridgeless" + "bridgeless", + "scrollview" ], "ignorePaths": [ "node_modules", diff --git a/docs/docs/api/components/keyboard-aware-scroll-view.mdx b/docs/docs/api/components/keyboard-aware-scroll-view.mdx index 88b54fc50..1a699fcbc 100644 --- a/docs/docs/api/components/keyboard-aware-scroll-view.mdx +++ b/docs/docs/api/components/keyboard-aware-scroll-view.mdx @@ -77,7 +77,9 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`. -## `FlatList`/`FlashList`/`SectionList` integrations +## Integration with 3rd party components + +### `FlatList`/`FlashList`/`SectionList` etc. Unlike original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package I'm not exporting `KeyboardAwareFlatList`, `KeyboardAwareSectionList` and other components. @@ -150,6 +152,56 @@ export default List; +### `@gorhom/bottom-sheet` + +To seamlessly work with [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) you will need to wrap `KeyboardAwareScrollView` in some HOCs provided by `@gorhom/bottom-sheet`. + +```tsx title="BottomSheetKeyboardAwareScrollView.tsx" +import { + KeyboardAwareScrollView, + KeyboardAwareScrollViewProps, +} from "react-native-keyboard-controller"; +import { + SCROLLABLE_TYPE, + createBottomSheetScrollableComponent, + type BottomSheetScrollViewMethods, +} from "@gorhom/bottom-sheet"; +import type { BottomSheetScrollViewProps } from "@gorhom/bottom-sheet/src/components/bottomSheetScrollable/types"; +import Reanimated from "react-native-reanimated"; + +const AnimatedScrollView = + Reanimated.createAnimatedComponent( + KeyboardAwareScrollView, + ); +const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent< + BottomSheetScrollViewMethods, + BottomSheetScrollViewProps +>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView); +const BottomSheetKeyboardAwareScrollView = memo(BottomSheetScrollViewComponent); + +BottomSheetKeyboardAwareScrollView.displayName = + "BottomSheetKeyboardAwareScrollView"; + +export default BottomSheetKeyboardAwareScrollView as ( + props: BottomSheetScrollViewProps, +) => ReturnType; +``` + +```tsx title="index.tsx" +import BottomSheet from "@gorhom/bottom-sheet"; +import BottomSheetKeyboardAwareScrollView from "./BottomSheetKeyboardAwareScrollView"; + +export function Example() { + return ( + + + {/* More content here */} + + + ); +} +``` + ## Example ```tsx 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 88b54fc50..1a699fcbc 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 @@ -77,7 +77,9 @@ Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, A boolean prop indicating whether `KeyboardAwareScrollView` is enabled or disabled. Default is `true`. -## `FlatList`/`FlashList`/`SectionList` integrations +## Integration with 3rd party components + +### `FlatList`/`FlashList`/`SectionList` etc. Unlike original [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) package I'm not exporting `KeyboardAwareFlatList`, `KeyboardAwareSectionList` and other components. @@ -150,6 +152,56 @@ export default List; +### `@gorhom/bottom-sheet` + +To seamlessly work with [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) you will need to wrap `KeyboardAwareScrollView` in some HOCs provided by `@gorhom/bottom-sheet`. + +```tsx title="BottomSheetKeyboardAwareScrollView.tsx" +import { + KeyboardAwareScrollView, + KeyboardAwareScrollViewProps, +} from "react-native-keyboard-controller"; +import { + SCROLLABLE_TYPE, + createBottomSheetScrollableComponent, + type BottomSheetScrollViewMethods, +} from "@gorhom/bottom-sheet"; +import type { BottomSheetScrollViewProps } from "@gorhom/bottom-sheet/src/components/bottomSheetScrollable/types"; +import Reanimated from "react-native-reanimated"; + +const AnimatedScrollView = + Reanimated.createAnimatedComponent( + KeyboardAwareScrollView, + ); +const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent< + BottomSheetScrollViewMethods, + BottomSheetScrollViewProps +>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView); +const BottomSheetKeyboardAwareScrollView = memo(BottomSheetScrollViewComponent); + +BottomSheetKeyboardAwareScrollView.displayName = + "BottomSheetKeyboardAwareScrollView"; + +export default BottomSheetKeyboardAwareScrollView as ( + props: BottomSheetScrollViewProps, +) => ReturnType; +``` + +```tsx title="index.tsx" +import BottomSheet from "@gorhom/bottom-sheet"; +import BottomSheetKeyboardAwareScrollView from "./BottomSheetKeyboardAwareScrollView"; + +export function Example() { + return ( + + + {/* More content here */} + + + ); +} +``` + ## Example ```tsx