| 1 | import { HeaderHeightContext } from "@react-navigation/elements"; |
| 2 | import { useState, type ReactNode } from "react"; |
| 3 | import { View } from "react-native"; |
| 4 | import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"; |
| 5 | import { NativeColumnLayoutMetricsContext } from "./native-layout-metrics"; |
| 6 | import type { NativeLayoutMetrics } from "../lib/reserved-regions"; |
| 7 | import { NativeLayoutObserver } from "./NativeLayoutObserver"; |
| 8 | |
| 9 | export function NativeColumnContent(props: { |
| 10 | readonly children: ReactNode; |
| 11 | readonly primary?: boolean; |
| 12 | readonly insetHorizontally?: boolean; |
| 13 | }) { |
| 14 | const [metrics, setMetrics] = useState<NativeLayoutMetrics | null>(null); |
| 15 | return ( |
| 16 | <View className={props.primary ? "flex-1 bg-drawer" : "flex-1 bg-screen"}> |
| 17 | <SafeAreaProvider style={{ flex: 1 }}> |
| 18 | <SafeAreaView |
| 19 | edges={props.insetHorizontally === false ? [] : ["left", "right"]} |
| 20 | style={{ flex: 1 }} |
| 21 | > |
| 22 | {/* Observe the inset body. UIKit can reserve other columns in its safe area. */} |
| 23 | <View style={{ flex: 1 }}> |
| 24 | <NativeLayoutObserver onChange={setMetrics} /> |
| 25 | <NativeColumnLayoutMetricsContext value={metrics}> |
| 26 | <HeaderHeightContext value={metrics?.safeArea.top ?? undefined}> |
| 27 | {props.children} |
| 28 | </HeaderHeightContext> |
| 29 | </NativeColumnLayoutMetricsContext> |
| 30 | </View> |
| 31 | </SafeAreaView> |
| 32 | </SafeAreaProvider> |
| 33 | </View> |
| 34 | ); |
| 35 | } |