1import { View } from "react-native";
2import { KeyboardAvoidingView, KeyboardStickyView } from "react-native-keyboard-controller";
3import { useSafeAreaInsets } from "react-native-safe-area-context";
4
5import type { KeyboardSheetBodyProps } from "./KeyboardSheetBody.types";
6export type { KeyboardSheetBodyProps } from "./KeyboardSheetBody.types";
7
8const TOOLBAR_CLEARANCE = 72;
9
10/** The toolbar sticks to the keyboard on its own, over the body's bottom edge. */
11export function KeyboardSheetBody(props: KeyboardSheetBodyProps) {
12 const insets = useSafeAreaInsets();
13 return (
14 <>
15 <KeyboardAvoidingView automaticOffset behavior="padding" className="flex-1">
16 <View
17 className="flex-1 px-5"
18 style={{
19 paddingTop: 8,
20 paddingBottom: props.toolbar ? TOOLBAR_CLEARANCE : Math.max(insets.bottom, 18),
21 }}
22 >
23 {props.children}
24 </View>
25 </KeyboardAvoidingView>
26 {props.toolbar ? (
27 <KeyboardStickyView
28 className="absolute inset-x-0 bottom-0"
29 offset={{ closed: 0, opened: 0 }}
30 >
31 <View
32 className="flex-row items-center gap-3 border-t border-border bg-sheet px-5 pt-2"
33 style={{ paddingBottom: Math.max(insets.bottom, 10) }}
34 >
35 {props.toolbar}
36 </View>
37 </KeyboardStickyView>
38 ) : null}
39 </>
40 );
41}