@butternutbox/pawprint-native 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/molecules/Drawer/DrawerBody.tsx

@@ -6,8 +6,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
 import { useDrawerFooterContext } from "./DrawerFooterContext"
 import { useDrawerBodyMax } from "./DrawerBodyMaxContext"
+import { useDrawerKeyboardAvoidance } from "../../../hooks/useDrawerKeyboardAvoidance"
 
-export type DrawerBodyProps = ScrollViewProps
+export type DrawerBodyProps = ScrollViewProps & {
+  ignoreKeyboardAvoidance?: boolean
+}
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
@@ -40,7 +43,15 @@ const StyledScrollView = styled(ScrollView)<{
  * chrome-aware `maxHeight`, scrolling beyond that.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  ({ children, contentContainerStyle, ...props }, ref) => {
+  (
+    {
+      children,
+      contentContainerStyle,
+      ignoreKeyboardAvoidance = false,
+      ...props
+    },
+    ref
+  ) => {
     const theme = useTheme()
     const { spacing } = theme.tokens.components.drawer
     const { buttons } = theme.tokens.components
@@ -50,6 +61,9 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const providedMaxHeight = useDrawerBodyMax()
     const { height: windowHeight } = useWindowDimensions()
     const insets = useSafeAreaInsets()
+    const { contentContainerStyle: keyboardStyle } =
+      useDrawerKeyboardAvoidance()
+    const effectiveKeyboardStyle = ignoreKeyboardAvoidance ? {} : keyboardStyle
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
@@ -93,6 +107,7 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
             paddingTop: topPadding,
             paddingBottom: 0
           },
+          effectiveKeyboardStyle,
           contentContainerStyle
         ]}
         {...props}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useDrawerKeyboardAvoidance } from "./useDrawerKeyboardAvoidance"

package/src/hooks/useDrawerKeyboardAvoidance.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react"
+import { Keyboard, StyleProp, ViewStyle } from "react-native"
+
+const useDrawerKeyboardAvoidance = (
+  minPadding: number = 16
+): { contentContainerStyle: StyleProp<ViewStyle> } => {
+  const [keyboardHeight, setKeyboardHeight] = useState(0)
+
+  useEffect(() => {
+    const showListener = Keyboard.addListener("keyboardDidShow", (e) => {
+      setKeyboardHeight(e.endCoordinates.height)
+    })
+    const hideListener = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyboardHeight(0)
+    })
+    return () => {
+      showListener.remove()
+      hideListener.remove()
+    }
+  }, [])
+
+  return {
+    contentContainerStyle: {
+      paddingBottom: Math.max(minPadding, keyboardHeight)
+    }
+  }
+}
+
+export { useDrawerKeyboardAvoidance }

package/src/index.ts

@@ -7,3 +7,4 @@ export { default as styled } from "@emotion/native"
 export * from "./fonts"
 export * from "./theme"
 export * from "./components"
+export * from "./hooks"