1import { View } from "react-native";
2import { KeyboardAvoidingView } from "react-native-keyboard-controller";
3import { useSafeAreaInsets } from "react-native-safe-area-context";
4
5import type { KeyboardSheetBodyProps } from "./KeyboardSheetBody.types";
6import { useBarOverlap } from "./useBarInset";
7export type { KeyboardSheetBodyProps } from "./KeyboardSheetBody.types";
8
9/** A sheet's body that stays above the keyboard, with its toolbar between the two. */
10export function KeyboardSheetBody(props: KeyboardSheetBodyProps) {
11 const insets = useSafeAreaInsets();
12 // The sheet's glass bar floats over its content, and only scroll views inset for it on their own.
13 const barOverlap = useBarOverlap();
14 return (
15 <KeyboardAvoidingView automaticOffset behavior="padding" className="flex-1">
16 <View
17 className="flex-1 px-5"
18 style={{
19 paddingTop: barOverlap + 8,
20 paddingBottom: props.toolbar ? 0 : Math.max(insets.bottom, 18),
21 }}
22 >
23 {props.children}
24 </View>
25 {props.toolbar ? (
26 <View className="flex-row items-center gap-3 bg-sheet px-5 py-2">{props.toolbar}</View>
27 ) : null}
28 </KeyboardAvoidingView>
29 );
30}