Fix lite UI story sheet keyboard spacing

.changeset/kind-poets-rule.md

@@ -0,0 +1,5 @@
+---
+'@storybook/react-native-ui-lite': patch
+---
+
+fix: content below keyboard not reachable, sheet too tall

packages/react-native-ui-lite/src/DrawerKeyboardInsetContext.tsx

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+
+export const DrawerKeyboardInsetContext = createContext(0);
+
+export const useDrawerKeyboardInset = () => useContext(DrawerKeyboardInsetContext);

packages/react-native-ui-lite/src/MobileMenuDrawer.tsx

@@ -25,6 +25,7 @@ import {
 } from 'react-native';
 
 import { useSelectedNode } from './SelectedNodeProvider';
+import { DrawerKeyboardInsetContext } from './DrawerKeyboardInsetContext';
 import useAnimatedValue from './useAnimatedValue';
 
 const flexStyle: ViewStyle = { flex: 1 };
@@ -52,68 +53,47 @@ export interface MobileMenuDrawerRef {
 export const useAnimatedModalHeight = () => {
   const { height } = useWindowDimensions();
   const modalHeight = 0.65 * height;
-  const maxModalHeight = 0.85 * height;
-  const [sheetHeight, setSheetHeight] = useState(modalHeight);
-  const [keyboardInset, setKeyboardInset] = useState(0);
-  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
-
-  useEffect(() => {
-    setSheetHeight(modalHeight);
-    setKeyboardInset(0);
-    setIsKeyboardVisible(false);
-  }, [modalHeight]);
+  const maxKeyboardModalHeight = 0.75 * height;
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const isKeyboardVisible = keyboardHeight > 0;
+  const keyboardAvoidanceOffset = isKeyboardVisible
+    ? Math.min(keyboardHeight, maxKeyboardModalHeight - modalHeight)
+    : 0;
+  const sheetHeight = modalHeight + keyboardAvoidanceOffset;
+  const keyboardInset = isKeyboardVisible ? keyboardHeight : 0;
 
   useEffect(() => {
     const expand = (keyboardHeight: number = 0) => {
-      const maxKeyboardOffset = maxModalHeight - modalHeight;
-      const keyboardAvoidanceOffset = Math.min(keyboardHeight, maxKeyboardOffset);
-
-      setIsKeyboardVisible(true);
-      setSheetHeight(modalHeight + keyboardAvoidanceOffset);
-      setKeyboardInset(Math.max(keyboardHeight - keyboardAvoidanceOffset, 0));
+      setKeyboardHeight(keyboardHeight);
     };
 
     const collapse = () => {
-      setSheetHeight(modalHeight);
-      setKeyboardInset(0);
-      setIsKeyboardVisible(false);
-    };
-
-    const handleKeyboardWillShow: KeyboardEventListener = (e) => {
-      if (Platform.OS === 'ios') {
-        expand(e.endCoordinates.height);
-      }
-    };
-
-    const handleKeyboardDidShow: KeyboardEventListener = (e) => {
-      if (Platform.OS === 'android') {
-        expand(e.endCoordinates.height);
-      }
+      setKeyboardHeight(0);
     };
 
-    const handleKeyboardWillHide: KeyboardEventListener = (e) => {
-      if (Platform.OS === 'ios') {
-        collapse();
-      }
+    const handleKeyboardShow: KeyboardEventListener = (e) => {
+      expand(e.endCoordinates.height);
     };
 
-    const handleKeyboardDidHide: KeyboardEventListener = (e) => {
-      if (Platform.OS === 'android') {
-        collapse();
-      }
+    const handleKeyboardHide: KeyboardEventListener = () => {
+      collapse();
     };
 
     const subscriptions = [
-      Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow),
-      Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow),
-      Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide),
-      Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide),
+      Keyboard.addListener(
+        Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+        handleKeyboardShow
+      ),
+      Keyboard.addListener(
+        Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+        handleKeyboardHide
+      ),
     ];
 
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
     };
-  }, [maxModalHeight, modalHeight]);
+  }, []);
 
   return {
     height: sheetHeight,
@@ -271,9 +251,8 @@ export const MobileMenuDrawer = memo(
         () => ({
           flex: 1,
           backgroundColor: theme.background.content,
-          paddingBottom: keyboardInset,
         }),
-        [keyboardInset, theme.background.content]
+        [theme.background.content]
       );
 
       const scrollToSelectedButtonWrapperStyle = useMemo(
@@ -320,8 +299,10 @@ export const MobileMenuDrawer = memo(
                   <View style={handleStyle} />
                 </View>
 
-                <View style={childrenWrapperStyle}>{children}</View>
-                {showScrollToSelected ? (
+                <DrawerKeyboardInsetContext.Provider value={keyboardInset}>
+                  <View style={childrenWrapperStyle}>{children}</View>
+                </DrawerKeyboardInsetContext.Provider>
+                {showScrollToSelected && !isKeyboardVisible ? (
                   <View style={scrollToSelectedButtonWrapperStyle}>
                     <Button
                       text="Scroll to selected"

packages/react-native-ui-lite/src/SearchResults.tsx

@@ -11,6 +11,7 @@ import type { FC, PropsWithChildren, ReactNode } from 'react';
 import React, { useCallback, useMemo } from 'react';
 import { PressableProps, View, ViewStyle, TextStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useDrawerKeyboardInset } from './DrawerKeyboardInsetContext';
 import { ComponentIcon, StoryIcon } from './icon/iconDataUris';
 
 // Microfuzz highlight types
@@ -218,6 +219,7 @@ export const SearchResults: FC<{
   clearLastViewed,
 }) {
   const insets = useSafeAreaInsets();
+  const drawerKeyboardInset = useDrawerKeyboardInset();
 
   const handleClearLastViewed = useCallback(() => {
     clearLastViewed();
@@ -228,9 +230,9 @@ export const SearchResults: FC<{
     () => ({
       paddingHorizontal: 10,
       paddingTop: 8,
-      paddingBottom: insets.bottom + 20,
+      paddingBottom: insets.bottom + drawerKeyboardInset + 20,
     }),
-    [insets.bottom]
+    [insets.bottom, drawerKeyboardInset]
   );
 
   const listData = useMemo<ListItemType[]>(() => {

packages/react-native-ui-lite/src/Tree.tsx

@@ -15,6 +15,7 @@ import { View, ViewStyle } from 'react-native';
 import { LegendList, LegendListRef, LegendListRenderItemProps } from './LegendList';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelectedNode } from './SelectedNodeProvider';
+import { useDrawerKeyboardInset } from './DrawerKeyboardInsetContext';
 import type {
   ComponentEntry,
   GroupEntry,
@@ -225,6 +226,7 @@ export const Tree = React.memo<{
   const [pendingScrollTarget, setPendingScrollTarget] = useState<PendingScrollTarget | null>(null);
 
   const insets = useSafeAreaInsets();
+  const drawerKeyboardInset = useDrawerKeyboardInset();
   const listRef = useRef<LegendListRef | null>(null);
   // Find top-level nodes and group them so we can hoist any orphans and expand any roots.
   const [rootIds, orphanIds, initialExpanded] = useMemo(
@@ -434,10 +436,10 @@ export const Tree = React.memo<{
   const contentContainerStyle = useMemo(
     () => ({
       marginTop: isMain && orphanIds.length > 0 ? 20 : 0,
-      paddingBottom: insets.bottom + 20,
+      paddingBottom: insets.bottom + drawerKeyboardInset + 20,
       paddingLeft: 6,
     }),
-    [isMain, orphanIds.length, insets.bottom]
+    [isMain, orphanIds.length, insets.bottom, drawerKeyboardInset]
   );
 
   // so we can call the scroll to function in the search component