fix: keyboard avoiding

storybookjs · Mar 27, 2024 · b781f99 · b781f99
1 parent 4304af4
commit b781f99
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 21 deletions.
diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json
@@ -50,7 +50,8 @@
     "@react-native-community/datetimepicker": "*",
     "@react-native-community/slider": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "@gorhom/bottom-sheet": ">=4"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/ondevice-controls/src/types/Array.tsx b/packages/ondevice-controls/src/types/Array.tsx
@@ -3,8 +3,9 @@ import { styled } from '@storybook/react-native-theming';
 
 import { inputStyle } from './common';
 import { useResyncValue } from './useResyncValue';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
-const Input = styled.TextInput(({ theme }) => ({
+const Input = styled(BottomSheetTextInput)(({ theme }) => ({
   ...inputStyle(theme),
 }));
 

diff --git a/packages/ondevice-controls/src/types/Number.tsx b/packages/ondevice-controls/src/types/Number.tsx
@@ -5,8 +5,9 @@ import { View } from 'react-native';
 
 import { inputStyle } from './common';
 import { useResyncValue } from './useResyncValue';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
-const Input = styled.TextInput<{ showError: boolean }>(({ theme, showError }) => {
+const Input = styled(BottomSheetTextInput)<{ showError: boolean }>(({ theme, showError }) => {
   const style = inputStyle(theme);
   return {
     ...style,

diff --git a/packages/ondevice-controls/src/types/Object.tsx b/packages/ondevice-controls/src/types/Object.tsx
@@ -4,6 +4,7 @@ import { ViewStyle } from 'react-native';
 
 import { useResyncValue } from './useResyncValue';
 import { inputStyle } from './common';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
 export interface ObjectProps {
   arg: {
@@ -14,7 +15,7 @@ export interface ObjectProps {
   isPristine: boolean;
 }
 
-const Input = styled.TextInput(({ theme }) => ({
+const Input = styled(BottomSheetTextInput)(({ theme }) => ({
   ...inputStyle(theme, false),
   minHeight: 60,
 }));

diff --git a/packages/ondevice-controls/src/types/Text.tsx b/packages/ondevice-controls/src/types/Text.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { styled } from '@storybook/react-native-theming';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
 import { inputStyle } from './common';
 import { useResyncValue } from './useResyncValue';
@@ -14,7 +15,7 @@ export interface TextProps {
   isPristine: boolean;
 }
 
-const Input = styled.TextInput(({ theme }) => ({
+const Input = styled(BottomSheetTextInput)(({ theme }) => ({
   ...inputStyle(theme),
 }));
 

diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
@@ -15,8 +15,8 @@ import {
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
 import { ReactNode, forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { Keyboard, Platform, ScrollView, Text, View } from 'react-native';
-import { useAnimatedKeyboard, useReducedMotion } from 'react-native-reanimated';
+import { Keyboard, Text, View } from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
 // import { Button } from './Button';
 import { IconButton } from './IconButton';
 import { MenuIcon } from './icon/MenuIcon';
@@ -27,6 +27,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ReactRenderer } from '@storybook/react';
 import { Button as Button2 } from './Button';
 import { CloseIcon } from './icon/CloseIcon';
+import { ScrollView } from 'react-native-gesture-handler';
 
 const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheetBackdropProps) => (
   <BottomSheetBackdrop
@@ -66,7 +67,6 @@ export interface MobileMenuDrawerRef {
 }
 const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, { children: ReactNode | ReactNode[] }>(
   ({ children }, ref) => {
-    const keyboard = useAnimatedKeyboard();
     const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
     const reducedMotion = useReducedMotion();
 
@@ -99,18 +99,12 @@ const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, { children: ReactNode |
         enableDismissOnClose
         enableHandlePanningGesture
         enableContentPanningGesture
-        // enablePanDownToClose={false}
+        keyboardBehavior="extend"
+        keyboardBlurBehavior="restore"
         stackBehavior="replace"
         backdropComponent={BottomSheetBackdropComponent}
       >
-        <BottomSheetScrollView
-          style={{
-            marginBottom: Platform.select({
-              ios: keyboard.height,
-            }),
-          }}
-          keyboardShouldPersistTaps="handled"
-        >
+        <BottomSheetScrollView keyboardShouldPersistTaps="handled">
           {children}
         </BottomSheetScrollView>
       </BottomSheetModal>
@@ -161,14 +155,17 @@ const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>
         style={{
           paddingTop: 8,
         }}
+        containerStyle={{}}
         backgroundStyle={{
           borderRadius: 0,
           borderTopColor: 'lightgrey',
           borderTopWidth: 1,
         }}
+        keyboardBehavior="interactive"
+        keyboardBlurBehavior="restore"
         enableDismissOnClose
-        enableHandlePanningGesture
-        enableContentPanningGesture
+        enableHandlePanningGesture={true}
+        enableContentPanningGesture={true}
         // enablePanDownToClose={false}
         stackBehavior="replace"
         // backdropComponent={BottomSheetBackdropComponent}
@@ -209,6 +206,7 @@ const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>
             />
           </View>
           <BottomSheetScrollView
+            keyboardShouldPersistTaps="handled"
             contentContainerStyle={{
               paddingBottom: insets.bottom + 16,
               marginTop: 10,
@@ -255,6 +253,7 @@ export const Layout = ({
   const addonPanelRef = useRef<MobileAddonsPanelRef>(null);
   // const fullStoryName = useFullStoryName();
   const insets = useSafeAreaInsets();
+
   return (
     <View style={{ flex: 1, paddingTop: insets.top }}>
       <View style={{ flex: 1 }}>{children}</View>

diff --git a/packages/react-native-ui/src/Search.tsx b/packages/react-native-ui/src/Search.tsx
@@ -27,6 +27,7 @@ import { SearchIcon } from './icon/SearchIcon';
 import { CloseIcon } from './icon/CloseIcon';
 import { TextInput, View } from 'react-native';
 import { DEFAULT_REF_ID } from './constants';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
 const DEFAULT_MAX_SEARCH_RESULTS = 50;
 
@@ -67,7 +68,7 @@ const SearchField = styled.View({
   // marginBottom: 16,
 });
 
-const Input = styled.TextInput(({ theme }) => ({
+const Input = styled(BottomSheetTextInput)(({ theme }) => ({
   // appearance: 'none',
   height: 32,
   paddingLeft: 28,
@@ -304,7 +305,7 @@ export const Search = React.memo<{
         </SearchIconWrapper>
 
         <Input
-          ref={inputRef}
+          ref={inputRef as any} // TODO find solution for this
           onChangeText={setInputValue}
           onFocus={() => setIsOpen(true)}
           onBlur={() => setIsOpen(false)}