| 1 | import type { ReactNode } from "react"; |
| 2 | import { Platform, View } from "react-native"; |
| 3 | |
| 4 | /** Keeps the header surface visible behind rounded Android content corners. */ |
| 5 | export function MaterialScreenContent({ |
| 6 | children, |
| 7 | insetHorizontal = false, |
| 8 | fitToContents = false, |
| 9 | }: { |
| 10 | readonly children: ReactNode; |
| 11 | /** Match the master-list gutters for secondary panes, not full-width content. */ |
| 12 | readonly insetHorizontal?: boolean; |
| 13 | /** Allow native form sheets to measure their content instead of filling a fixed detent. */ |
| 14 | readonly fitToContents?: boolean; |
| 15 | }) { |
| 16 | if (Platform.OS !== "android") return children; |
| 17 | |
| 18 | return ( |
| 19 | <View className={fitToContents ? "shrink bg-header" : "flex-1 bg-header"}> |
| 20 | <View |
| 21 | className="overflow-hidden rounded-t-[28px] bg-sheet-solid" |
| 22 | style={{ |
| 23 | flexShrink: 1, |
| 24 | flexGrow: fitToContents ? 0 : 1, |
| 25 | flexBasis: fitToContents ? "auto" : 0, |
| 26 | marginHorizontal: insetHorizontal ? 4 : 0, |
| 27 | }} |
| 28 | > |
| 29 | {children} |
| 30 | </View> |
| 31 | </View> |
| 32 | ); |
| 33 | } |