41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { Platform, View } from "react-native";
|
|
import { SafeAreaView, Edge } from "react-native-safe-area-context";
|
|
import { StatusBar } from "expo-status-bar";
|
|
import { useColorScheme } from "react-native";
|
|
import type { StatusBarStyle } from "expo-status-bar";
|
|
|
|
interface ScreenWrapperProps {
|
|
children: React.ReactNode;
|
|
/** Safe area edges to apply (e.g. ["top", "bottom"]) */
|
|
edges?: Edge[];
|
|
/** Optional background color for the screen */
|
|
backgroundColor?: string;
|
|
/** Optional tailwind / nativewind className for inner content */
|
|
className?: string;
|
|
/** Override status bar style; defaults based on device color scheme */
|
|
statusBarStyle?: StatusBarStyle;
|
|
}
|
|
|
|
export function ScreenWrapper({
|
|
children,
|
|
edges = ["top", "bottom"],
|
|
backgroundColor = "#ffffff",
|
|
className,
|
|
statusBarStyle,
|
|
}: ScreenWrapperProps) {
|
|
const scheme = useColorScheme();
|
|
|
|
const resolvedStatusBarStyle: StatusBarStyle =
|
|
statusBarStyle ?? (scheme === "dark" ? "light" : "dark");
|
|
|
|
return (
|
|
<SafeAreaView edges={edges} style={{ flex: 1, backgroundColor }}>
|
|
<StatusBar style={resolvedStatusBarStyle} />
|
|
<View style={{ flex: 1 }}>{children}</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
export default ScreenWrapper;
|